How to fetch parameters from ajax post request - javascript

The Javascript code is:
var str = "html=<p>Some htmlcode here<p><div>more htmlcode </div>";
saveProject(str);
function saveProject(str) {
if (str=="") {
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
console.log(xmlhttp.responseText);
}
}
xmlhttp.open("POST","../demo.asp",true);
xmlhttp.send(str);
}
and the ASP file:
<%
response.expires=-1
x = Request.Form("html")
response.write x
%>
I need to fetch the str passed to xmlhttp.send() method and do some useful stuffs, but it looks like I'm missing something. The response is (an empty string). Any help is a appreciate!

Adding the request header solve the problem.
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Related

Cant detect the file in ajax

Hey guys am new to ajax I have a php file and a ajax file. I just want to detect the php file from the ajax so I have send a request in ajax like
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
} else {
console.log('file not fetched');
}
xmlhttp.open("GET","first.php?m=babe",true);
xmlhttp.send();
}
}
loadXMLDoc();
</script>
</head>
<body>
</body>
</html>
My php file
<?php
include("ajax.html");
$p = $_REQUEST['m'];
if($p == 'babe') {
echo true;
}
When I run the ajax.html on localhost it doesn't show me any message in the window nor in the console.
Can you guys tell me why is it like this?
Thanx for the help
Some of your brackets were wrong:
function loadXMLDoc(){
var xmlhttp;
if(window.XMLHttpRequest){ // This bracket was missing
xmlhttp=new XMLHttpRequest();
}
else{ // This bracket was missing
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
else{
console.log('file not fetched');
}
} // This bracket was on the wrong place (it enclosed the .open() and .send())
xmlhttp.open("GET","first.php?m=babe",true);
xmlhttp.send();
}
loadXMLDoc();
Also, a simpler way of defining the callback function is:
xmlhttp.onload=function(){
if(xmlhttp.status==200){
alert(xmlhttp.responseText);
}
else{
console.log('file not fetched');
}
}

Ajax response to xml page to get title elements doesn't work

Can anyone tell me why I can't get the elements from an XML document? It doesn't print anything when I press the et Title button that i have implemented in the body section. Here's my code:
function MyF () {
var xmlhttp;
var txt,x,i=0;
var xx;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
xx = x[i].getElementsByTagName("TITLE");
document.getElementById("test").innerHTML=xx;
}
}
xmlhttp.open("GET","cd_catalog.xml",true);
}
xmlhttp.responseXML.documentElement is the problem of your troubles. Just use xmlhttp.responseXML.getElementsByTagName and you should be fine.

Handel response HTTP object in ajax

I have a ajax code which is making a call to server in js, in response the server writes a pdf. can anybody tell me how to save this content.
Below is the content which i have been using:
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var url ="some url";
xmlhttp.open("GET",url,true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function () {
onDownloaded(this);
};
xmlhttp.send();

Multiple ajax requests not working after a while

I have my page which loads live stock data from server continuously (every second) making request to a php file named data.php. Also I have a Ganns square of 9 calculator that passes value to a PHP file (getdata.php) using ajax through a OnKeyUp function of a textbox and returns some output.
The issue is-
As the page loads both work perfectly. Live data as well as calculator can be used. But after a while the calculator doesn't work. On writing value into the textbox the request must be processed and value must be returned through ajax call, but it doesn't happen.
Live Stock data code (refreshes every sec):
<script>
function showPort(t)
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("portfo").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","data.php",true);
xmlhttp.send();
setTimeout(showPort,t);
}
</script>
It runs using on page load-
<body onload="JavaScript:showPort(2000);">
Ganns square calculator code which runs onkeyup event of textbox:
<script>
function showData(str)
{
if (str.length==0)
{
document.getElementById("txtData").innerHTML="";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtData").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdata.php?a="+str,false);
xmlhttp.send();
}
</script>
Runs onKeyUp event of textbox-
<input type="text" placeholder="Last traded Price" name="str" onKeyUp="showData(this.value)">
I tried searching for similar questions but did not get my answer. Thus, posting this issue as a new question here.
The first script:
function showPort(t)
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("portfo").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","data.php",true);
xmlhttp.send();
setTimeout(showPort,t);
}
Can be converted this way:
$(document).ready(function(){
setInterval(function(){
$.get("data.php", function(data){
$("#portfo").html(data);
});
}, 2000);
});
And the next one:
function showData(str)
{
if (str.length==0)
{
document.getElementById("txtData").innerHTML="";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtData").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdata.php?a="+str,false);
xmlhttp.send();
}
Can be rewritten as:
function showData(str)
{
if (str.length==0)
{
$("#txtData").html("");
return;
}
$.get("getdata.php?a="+str, function(data){
$("#txtData").html(data);
});
}
Can you please try executing the above code and see if it works? Don't forget to include jQuery this way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

Using JSON to parse xmlhttp.responseText for populating textboxes

How can JSON be used to parse xmlhttp.responseText? I can't seem to get textboxes populated using the parsed data. I tried using .value and .innerHTML with the dot notation with b.first and b.second used with json_encode from the loadTextBox.php file (see below), but the textboxes won't populate.
Main page code:
function loadDoc()
{
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
//code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var doc = window.document.createElement("doc");
var a = xmlhttp.responseText;
var b = JSON.parse(a);
document.getElementById("textbox").innerHTML=b.first;
document.getElementById("textbox2").innerHTML=b.second;
}
}
xmlhttp.open("GET","loadTextBox.php?id=4",true);
xmlhttp.send();
}
loadTextBox.php code:
<?php
---Placeholder for correct DB login info---
$result = $mysql->query("SELECT column_one FROM table_one");
while ($row = $result->fetch_object())
{
$queryResult[] = $row->present_tense;
}
$textboxValue = $queryResult[0];
$textboxValue2 = $queryResult[2];
echo json_encode(array('first'=>$textboxValue,'second'=>$textboxValue2));
?>
This is fully tested and works. Use as a starting point to accomplish what you are trying to do:
var url = "YOUR.php"
var ajax = new XMLHttpRequest();
ajax.open("GET", url, true);
ajax.send(null);
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && (ajax.status == 200)) {
console.log("ready")
var Data = JSON.parse(ajax.responseText);
console.log(Data);
console.log(Data.first);
} else {
console.log("not ready yet")
}
}
This assumes your JSON output is properly formatted as you stated:
{"first":"radim","second":"radi"}
I have figured out the underlying problem. Extra tags were being sent because I had unnecessary tags in my DB info file. Those tags were being sent in the responseText with {"first":"radim","second":"radi"}. So the code pertaining to ---Placeholder for correct DB login info--- was wrong. I also changed .innerHTML to .value and now it works as intended.
Main page code updated:
function loadDoc()
{
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var a = JSON.parse(xmlhttp.responseText);
document.getElementById("textbox").value=a.first;
document.getElementById("textbox2").value=a.second;
}
}
xmlhttp.open("GET","loadTextBox.php?id=4",true);
xmlhttp.send();
}

Categories