Today JS practicing, want to encapsulate an AJAX request to send the object, of course, is to be compatible with the full browser. The code is as follows:
Copy Code code as follows:
var Ajax = {
Xhr:null,
Callback:null,
Xmlhttp:function () {
var xmlhttp;
Standard browser
if (window. XMLHttpRequest) {
try {
XMLHTTP = new XMLHttpRequest ();
}
catch (e) {
Alert (' Unknown Ajax Error ');
Console.log (' Unknown Ajax Error ');
}
}
IE browser
else {
if (window. ActiveXObject) {
try {
XMLHTTP = new ActiveXObject (' microsoft.xmlhttp ');
}
catch (e) {
try {
XMLHTTP = new ActiveXObject (' MSXML2. XMLHTTP ');
}
catch (e) {
Alert (' Unknown Ajax Error ');
Console.log (' Unknown Ajax Error ');
}
}
}
}
return XMLHTTP;
},
Connect:function (paramsobj) {
var PO = paramsobj;
Judging the legality of reference
if (!) ( PO instanceof Object)) {
Alert (' Ajax params illegal ');
Console.log (' Ajax params illegal ');
return false;
}
else if (! ( Po.url&&po.method&&po.callback)) {
return false;
}
Initializing internal parameters
THIS.XHR = this. XMLHttp ();
This.callback = Po.callback;
Traversing the params object and generating URL parameters
var requestparams = ';
if (po.params) {
For (key in Po.params) {
Requestparams + + ' & ' + key + ' = ' + Params[key];
}
Requestparams = REQUESTPARAMS.SUBSTR (1);
}
Initiate an AJAX request
try {
var xhr = this.xhr;
Xhr.onreadystatechange = This.response;
POST request Processing
if (PO.method.toLowerCase () = = ' Post ') {
Xhr.open (' POST ', po.url,true);
Xhr.send (Requestparams);
}
GET request Processing
else if (PO.method.toLowerCase () = = ' Get ') {
Xhr.open (' Get ', po.url+ '? ') +requestparams,true);
Xhr.send (NULL);
}
}
catch (e) {
This.callback (null,-1);
}
},
Response:function () {
This code is tested through all browsers
if (ajax.xhr.readystate==4) {
if (ajax.xhr.status== ' 200 ') {
Ajax.callback (Ajax.xhr.responseText);
// }
else {
Ajax.callback (Null,ajax.xhr.status);
// }
// }
//
The following code is invalid under IE (no error, the request has a corresponding, but no return results), other browsers do not have this problem
if (this.readystate==4) {
if (this.status== ' 200 ') {
Ajax.callback (This.responsetext);
}
else {
Ajax.callback (Null,this.status);
}
}
}
};
Ajax instances
Ajax.connect ({
URL: ' test.html ',
Method: ' Get ',
Callback:function (Data,err) {
if (data!=null) {
alert (data);
Console.log (data);
}
else {
alert (ERR);
Console.log (ERR);
}
}
});
Description of the problem: Let's take a look at my code there is a comment out of the code, that block of code is tested in full browser. The code that is not commented out is problematic code, specific performance:
Under the Chrome,firefox,opera,safari test Pass, in IE6, 7 (ie8+ no test) under the performance is: no error, no return results.
Comparing the two pieces of code, I think there are two possible, one is this point to the problem, one is IE under the onreadystatechange function of the context of the implementation of different browsers. But now can not determine the problem, IE6, 7 JS debugging is very difficult (tried the firebug-lite, but did not imagine the easy to use, and this Ajax object in the Firebug-lite cut down with success, a bit confused)
Resolution process:
In fact, the test method is very simple. Mainly is the brain a fever unexpectedly, ate a meal to come back to realize suddenly.
In fact, JS when dealing with this point to an unknown problem, you can try to use this Instanceof object to understand what kind of variables it is pointing to. You can use This===window to determine if it is a global call. That's the way I use it here.
In the piece where the code is problematic, we can try inserting a paragraph:
Alert (this instanceof Object);
It turns out that, under IE6, it returns to false! Glance! It is possible to have such a strange return value under IE! Prove what? This means that the execution context of the function is not an Object! In this way, in IE can only think of window objects, to know that IE has always been a wonderful flower. Your standard browser says that window objects are objects and I don't recognize them. Are you still doubting my opinion? Why don't you try it?
alert (This===window);
The result is true!. What do you think? You got nothing to say? So the question becomes clear:
In IE, when Ajax requests are answered, the callback function onreadystatechange is invoked in the global context. In standard browsers, the execution context is the XMLHttpRequest object. So it caused me this "accident".
