Discussion on Ajax under IE

Time:2021-6-22

When practicing JS today, I want to encapsulate an object that sends Ajax requests. Of course, I 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’);
}
}
//Internet Explorer
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;
//Judge the legitimacy of the combination of biography and biography
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 the URL parameter
var requestParams = ”;
if(PO.params) {
for(key in Po.params) {
requestParams += ‘&’ + key + ‘=’ + params[key];
}
requestParams = requestParams.substr(1);
}
//Initiate 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 passed the test in the whole browser
// 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 in IE (no error, request has corresponding, but no result is returned). Other browsers have no such problem
if(this.readyState==4) {
if(this.status==’200′) {
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 my code. There is a commented code, which passed the test in the whole browser. The code that has not been commented is problematic code

It passed the test in chrome, Firefox, opera and safari, and did not report an error or return a result in IE6 and IE7 (IE8 + was not tested).

Comparing the differences between the upper and lower codes, I think there are two possibilities. One is the problem of this pointing, and the other is that the context of the onreadystatechange function in IE is different from other browsers. But now we can’t determine the problem, and JS debugging under IE6 and IE7 is very difficult (tried firebug Lite, but it doesn’t work as expected, and the Ajax object was successfully used in firebug Lite, a little confused)
Solution process:

In fact, the test method is very simple. The main reason is that as soon as I have a fever, I didn’t expect to come back after a meal.

In fact, JS can try to use this instance of object to find out what type of variable it points to when dealing with the problem of this pointing to unknown. For judging whether it is a global call, you can use this = = window. This is the method I use here.

In the part where there is a problem in the code, we can try to insert a paragraph:

alert(this instanceof Object);

The result shows that in IE6, the return is false! stick out a mile! Only in IE can there be such a strange return value! Prove what? That is to say, the execution context of a function is not an object! In this way, under ie, you can only think of window objects. You should know that IE has always been a wonderful flower. Your standard browser says that window objects are objects, but I don’t think so. Are you still doubting my opinion? Why don’t you try?

alert(this===window);

The result is true! What about? No more words? In this way, the problem becomes clear

In ie, after the Ajax request is responded, the callback function onreadystatechange is called in the global environment. In standard browsers, the execution context is the XMLHttpRequest object. So it caused my “accident”.