Does anyone know how to make ajax request function that works cross-browser WITHOUT using a javascript framework like jQuery, etc.?
-
I think it's all over the web. I'm afraid to mention w3school, but it's on the first result on google!! search for ajax tutorialsSufendy– Sufendy2011-05-06 06:52:24 +00:00Commented May 6, 2011 at 6:52
-
1i'm trying to make embedable js code, so it need to be small and portableRizky Ramadhan– Rizky Ramadhan2011-05-06 07:30:00 +00:00Commented May 6, 2011 at 7:30
-
3"Also, try google." Hey, that's how I got here. I guess it worked!jeremyjjbrown– jeremyjjbrown2013-04-07 03:51:44 +00:00Commented Apr 7, 2013 at 3:51
-
Practically every tutorial out there is using some sort of framework, usually JQuery. I don't want to include an entire library just to do a simple AJAX request!ndm13– ndm132017-02-16 01:37:24 +00:00Commented Feb 16, 2017 at 1:37
Add a comment
|
2 Answers
The XMLHttpRequest object isn't actually all that complicated to use. To be broadly compatible, you have to play a bit of a game to create the object, but after that it's fairly straightforward for simple operations.
Microsoft has examples on the MSDN page for XMLHttpRequest, including a function for creating the object in a cross-browser way that supports early versions of IE. Here's their example:
function getXMLHttpRequest()
{
if (window.XMLHttpRequest) {
return new window.XMLHttpRequest;
}
else {
try {
return new ActiveXObject("MSXML2.XMLHTTP.3.0");
}
catch(ex) {
return null;
}
}
}
function handler()
{
if (oReq.readyState == 4 /* complete */) {
if (oReq.status == 200) {
alert(oReq.responseText);
}
}
}
var oReq = getXMLHttpRequest();
if (oReq != null) {
oReq.open("GET", "http://localhost/test.xml", true);
oReq.onreadystatechange = handler;
oReq.send();
}
else {
window.alert("AJAX (XMLHTTP) not supported.");
}
I'm not suggesting the above exemplifies best practices (Microsoft seems to have their MSDN examples largely written by very, very inexperienced engineers), but it gives you a starting point. For instance, the above requires that the response status be 200 for success, where of course the HTTP specification is clear that anything the 200 <= n <= 299 range is "success".
1 Comment
Nathan
+1. Really, Microsoft needs to work on the quality of the code used in their MSDN examples, but this is a good starting point.
i often use this method for sending and receiving only json in modern browsers (no old-ie's)
function aj(method, url, data, cb){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = readystatechange;
xhr.open(method, url);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(data && JSON.stringify(data));
function readystatechange(){
if(this.readyState === this.DONE) {
switch(this.status){
case 200:
if(this.getResponseHeader('Content-Type').split(';')[0] !== 'application/json'){
return cb("unexpected Content-Type: '" + this.getResponseHeader('Content-Type') + "'", null);
}
return cb(null, JSON.parse(this.response));
case 401:
location.href = '/authentication/login';
return;
default:
return cb("unexpected status: " + this.status + "", null);
}
}
}//readystatechange
}
