About AJAX in IE

Today, JavaScript developers want to encapsulate an object that sends AJAX requests. Of course, they want to be compatible with all browsers. The Code is as follows:
Copy codeThe Code is 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;
// Determine the validity of parameter passing
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;
}
// Initialize internal parameters
This. xhr = this. XMLHttp ();
This. callback = PO. callback;
// Traverse the params object and generate 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 successfully tested in the whole browser.
// If (Ajax. xhr. readyState = 4 ){
// If (Ajax. xhr. status = '000000 '){
// Ajax. callback (Ajax. xhr. responseText );
//}
// Else {
// Ajax. callback (null, Ajax. xhr. status );
//}
//}
//
// The following code is invalid in IE (no error is reported, the request has a corresponding result, but no result is returned). other browsers do not have this problem.
If (this. readyState = 4 ){
If (this. status = '20140901 '){
Ajax. callback (this. responseText );
}
Else {
Ajax. callback (null, this. status );
}
}
}
};

// Ajax instance
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 );
}
}
});

Problem description: Let's take a look at the code that has been commented out in my code. The code is tested in a full browser. The code that has not been commented out is problematic. The specific performance is as follows:

The test passed in Chrome, Firefox, Opera, and Safari. in IE6 and 7 (IE8 + not tested), the result is: no error is reported, and no result is returned.

The differences between the two pieces of code are as follows: I think there are two possibilities: one is the question that this points to, and the other is that the Context Environment of onreadystatechange function execution under IE is different from other browsers. But now I cannot determine the problem. JS debugging in IE6 and 7 is quite difficult (I tried firebug-lite, but it was not as easy as I thought, besides, this Ajax object is successfully called under firebug-lite, which is a bit confusing)
Solution Process:

In fact, the test method is very simple. The main reason was that my mind was so hot that I suddenly realized it after a meal.

In fact, JS can try to use this instanceof Object to identify the type of variable it points to when dealing with this unknown issue. You can use this = window to determine whether the call is global. Here I use this method.

In the code that has a problem, we can try to insert a section:

Alert (this instanceof Object );

In IE6, the returned value is false! Easy to understand! This strange return value may appear in IE! Prove what? That is to say, the execution context of the function is not an object! In this way, you can only think of window objects in IE. You must know that IE has always been a wonderful thing. If your standard browser says that the window object is an object, I will not recognize it. Are you still wondering what I think? Why not try it?

Alert (this = window );

The result is true! How is it? Nothing to say, right? So the problem becomes clear:

In IE, after an AJAX request is responded, the onreadystatechange callback function is called in a global environment. In a standard browser, the execution context is the XMLHttpRequest object. This caused my "accident ".