Get response from server with Javascript after Javascript request
My Javascript function request to a aspx page. İts Code:
开发者_如何学编程 var xhr = ("XMLHttpRequest" in window) ? new XMLHttpRequest() : new ActiveXObject("Msxml3.XMLHTTP");
xhr.open("GET", = 'http://www.example.net/abc.aspx', true);
xhr.send("");
After this request I want to send a response back from this page and catch it on the client side. How do I do that?
To get the response from XMLHttpRequest
in asynchronous mode (third parameter is true
for the open()
method) you have to set the onreadystatechange
property to a callback function. This function will be called back when the response is ready at the browser:
xhr.open("GET", 'http://www.example.net/abc.aspx', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
var serverResponse = xhr.responseText;
}
};
xhr.send(null);
You may want to check out the following article for further reading on the topic:
- AJAX Patterns: XMLHttpRequest Call
To get the response, add a readystatechange
event handler function. This will get called back when the response is ready to read:
xhr.onreadystatechange= function() {
if (this.readyState!==4) return; // not ready yet
if (this.status===200) { // HTTP 200 OK
alert(this.responseText);
} else {
// server returned an error. Do something with it or ignore it
}
};
xhr.open('GET', 'http://www.example.net/abc.aspx', true);
xhr.send();
Incidentally:
("XMLHttpRequest" in window)
Whilst in
is in general a good way to test whether a property exists, this is one of the very few places where it's not ideal.
The problem is that in IE7+, when the ‘native XMLHttpRequest’ option is turned off, XMLHttpRequest
still exists as a property in window
, but with the unusable value null
. So it's better in this specific case to use a simple truth test, which will allow fallback to ActiveX in the (unlikely) event that this option is disabled:
var xhr= window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('MSXML2.XMLHttp');
You have to do a little more to get it work cross-browser, but once it's done you've got a reusable function, without any library.
// making a call is as simple as this
ajax( "http://www.example.net/abc.aspx", function( data ){
// do something with the server's response
alert(data);
});
///////////////////////////////////////////////////////////////////////////////
function getXmlHttpObject() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (!xmlHttp) {
alert("Your browser does not support AJAX!");
}
return xmlHttp;
}
function ajax(url, onSuccess, onError) {
var xmlHttp = getXmlHttpObject();
xmlHttp.onreadystatechange = function() {
if (this.readyState === 4) {
// onSuccess
if (this.status === 200 && typeof onSuccess == 'function') {
onSuccess(this.responseText);
}
// onError
else if(typeof onError == 'function') {
onError();
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
return xmlHttp;
}
精彩评论