Discussion on the problem of Ajax under IE

Source: Internet
Author: User

  under IE, when Ajax requests are responded to, the callback function onreadystatechange is invoked in the global context, and the execution context is XMLHttpRequest object in standard browsers

Today JS practicing, want to encapsulate an AJAX request to send the object, of course, is to be compatible with the full browser. Code as follows:  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 ERR or '); //console.log (' Unknown Ajax Error '); } } //ie Browser   Else {  if (window. ActiveXObject) {  try {  xmlhttp = new ActiveXObject (' Microsoft.XMLHTTP '); }  catch (E) {  try {& nbsp 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 legitimacy   if (! PO instanceof Object) {  alert (' Ajax params illegal '); //console.log (' ajax params illegal ');  return FAL se; }  else if (!) ( PO.url&&po.method&&po.callback) {  return false; } //initialization internal parameters   THIS.XHR = this. XMLHttp ();  this.callback = po.callback; //Traverse params object and generate URL parameters   var requestparams = ';  if ( Po.params) {  for (key in Po.params) {  Requestparams + + ' & ' + key + ' = ' + params[key]; }  request Params = requestparams.substr (1); } //initiating AJAX request   Try {  var xhr = this.xhr;  Xhr.onreadystatech Ange = 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 in all browsers via  /if (ajax.xhr.readystate==4) { //if (AJAX.XHR . status== ') { //Ajax.callback (Ajax.xhr.responseText); //} /Else { //Ajax.callback (Null,ajax.xhr.status); //} //}&NB Sp  //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); }  nbsp } };   //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); } } });    Description of the problem: Let's take a look at the code I have commented out That piece of code was tested through all browsers. The code that is not commented out is problematic code, specific performance:    under Chrome,firefox,opera,safari test pass, in IE6, 7 (ie8+ no test) under the performance is: no error, no return results.     Contrast between 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 of pasteCoating)   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 such a judgment to understand what kind of variable 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 case of code problems, we can try to insert a:    alert (this instanceof Object);    results found that, under IE6, return 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);    result is true! What do you think? You got nothing to say? So, the problem is clear.:    in IE, when Ajax requests are answered, the callback function onreadystatechange is invoked in the global environment. In standard browsers, the execution context is the XMLHttpRequest object. So it caused me this "accident".  
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.