How can I get the response from an Ajax request? - javascript

I tried this code :
var xmlHttp = new XMLHttpRequest();
function activecomm(comm_id,a_link_id)
{
var postComm = "id="+encodeURIComponent(comm_id);
var url = 'comments_mgr_proccesser.php';
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleInfo(a_link_id);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", postComm.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(postComm);
}
function handleInfo(a_link_id)
{
if(xmlHttp.readyState == 1)
{
document.getElementById("commactiveresult").innerHTML = 'loading ..';
}
else if(xmlHttp.readyState == 4)
{
var response = xmlHttp.responseText;
document.getElementById("commactiveresult").innerHTML = response;
}
}
When readyState == 1 the contents of the commactiveresult element is updated, but when readyState == 4 nothing is shown in the same element.
Does anyone know what the problem is please?

You're calling the handleInfo function instead of assigning a ready state handler. Try
xmlHttp.onreadystatechange = function (){
handleInfo(a_link_id);
};

Related

What priority does request.status == 200 have on actions?

I have this code to check the users friends, then echo them all in a certain box. The problem is that it deletes the code in the box (the groupchat.innerHTML = '';) but then it doesn't replace it with the this.responseText
Here is the code :
function loadfriends() {
var fullurl = "../backend/friends.php?loadfriends=true";
var request = new XMLHttpRequest();
request.open("GET", fullurl , false);
request.onload = function(){
if(request.status == 200){
groupchat = document.getElementById("leftsmallbox");
groupchat.innerHTML = '';
groupchat.innerHTML = this.responseText;
}
}
request.send();
}
setInterval(loadfriends, 15000);
Thanks
Use request.onreadystatechange = ... instead of onload. And request.open should be called after. See https://www.w3schools.com/xml/xml_http.asp

Timeout method after hitting the url

We have the following method to invoke the URL using ajax.
Currently after hitting the url we are using the response.
So we want to put a timeout for reposne.So when we invoke the url if the response didn't came after 2sec then call one more method and if resp comes within two seconds call other mehtod.
We have tried using the timeout,but unable to made it working with the code.
function ajaxCall(url1) {
var ajaxresp = null;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", url1, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
ajaxresp = xmlhttp.responseText;
//function call
getAdResponse(ajaxresp);
}
}
}
}
Please advice me how to proceed.
Try smth like this
xmlhttp.open("GET",url1,true);
xmlhttp.onreadystatechange= function (){
if (xmlhttp.readyState==4){
if (xmlhttp.status == 200){
ajaxresp = xmlhttp.responseText;
}
}
xmlhttp.send();
setTimeout(function() {
if(ajaxresp) {
dosmth(ajaxresp);
} else {
dosmthelse();
}
}, 2000);

How can I send more than one variable to a php file using ajax and a get request?

I am trying to send an I.D. value and a name value to a php file using ajax. I can send just the I.D. variable just fine but when I try to add the name variable, the function stops working. How can I send both?
This works:
function click() {
var name = clickedelement.getElementsByTagName('input')[0].value;
var id = clickedelement.getElementsByTagName('input')[1].value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("popupBox").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "friends2.php?id="+id, true);
xmlhttp.send();
};
But when I try to add the name variable, it dosnt work.
function click() {
var name = clickedelement.getElementsByTagName('input')[0].value;
var id = clickedelement.getElementsByTagName('input')[1].value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("popupBox").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "friends2.php?id="+id"&name="+name, true);
xmlhttp.send();
};
change to "friends2.php?id="+id+"&name="+name you just have a missing +
"friends2.php?id="+id+"&name="
// missing plus sign here ^

Preload image doesn't always appear

I have created a simple ajax request:
var params = "postdata=" + mydata;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("data").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "data.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
And this is the HTML code:
<div id="data">
<img src="/images/preload.gif" />
<b style="color:#9ca6dc;font-size:12px;">Wait</b>
</div>
The problem is that the preload.gif and "Wait" text appears only sometimes and not always.
Why ? How can I resolve that ?
The only explanation is that AJAX request works too quickly to see the content (as Alessandro Pezzato said). If you don't see it the readyState of XMLHTTP request had to change.
Or you have some other Javascript which runs asynchronously and does changes on the same content.

How can I convert this working JS code to JQUERY

var xmlHttp;
function RefreshORP(eventTarget, eventArgument)
{
xmlHttp = GetXmlHttpObject();
if(xmlHttp == null)
{
return true;
}
xmlHttp.onreadystatechange = StateChanged;
var params = GetFormParam(eventTarget,eventArgument);
xmlHttp.open("POST","/contact.jsp",true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("ajaxcall", "true");
xmlHttp.send(params);
}
In jQuery you have it all done...
$.post("/contact.jsp", $("formID").serialize(), function(data){
// process callback
});
jQuery will also set all appropriate (and somehow standardized) request headers.

Categories

Resources