Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about how to solve the problem of AJAX under IE. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Today, when JS is practicing, I want to encapsulate an object that sends an AJAX request. Of course, I want to be compatible with the whole browser. The 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

/ / judge the legality of parameter transmission

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 passed the test in the full 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 fails under IE (no error is reported, the request is corresponding, but no result is returned). 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 instance

Ajax.connect ({

Url: 'test.html'

Method: 'GET'

Callback: function (data,err) {

If (datastats null) {

Alert (data)

/ / console.log (data)

}

Else {

Alert (err)

/ / console.log (err)

}

}

});

Problem description: let's take a look at a commented out piece of code in my code, which passed the test in the full browser. The code that is not commented out is the problematic code, as shown in:

The test passed under Chrome,Firefox,Opera,Safari, and the performance under IE6 and 7 (IE8+ did not test) was: no error was reported and no result was returned.

Comparing the difference between the two pieces of code, I think there are two possibilities, one is the problem pointed to by this, and the other is that the context of onreadystatechange function execution under IE is different from that of other browsers. But now it is impossible to determine the problem, and it is very difficult to debug JS under IE6 and 7 (tried firebug-lite, but not as good as expected, and the Ajax object was successfully called in firebug-lite, a little confused)

Resolution process:

In fact, the test method is very simple. The main reason is that as soon as I got hot in my head, I suddenly realized when I came back from dinner.

In fact, JS can try to use judgments such as this instanceof Object to understand what type of variable it points to when dealing with problems where this points to an unknown. For determining 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 with the code, we can try to insert a paragraph:

Alert (this instanceof Object)

It turns out that under IE6, it is returned as false! Be manifest at a glance! It is only possible to have such a weird return value under IE! Prove what? That is to say, the execution context of a function is not an object! In this way, you can only think of window objects under IE, since IE has always been weird. Your standard browsers say that window objects are objects, but I don't recognize them. Are you still doubting my opinion? Then why not try it?

Alert (this===window)

It turned out to be true! How's it going? Have you got nothing to say? So in this way, the question becomes clear:

Under IE, after the AJAX request is answered, the callback function onreadystatechange is called in the global environment. In a standard browser, the execution context is the XMLHttpRequest object. Therefore, it caused my "accident".

The above is the editor for you to share how to solve the problem of AJAX under IE, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.