Parsing Ajax core XMLHttpRequest object creation is related to browser compatibility issues _ajax

The Mlhttprequest object is the core of AJAX functionality, and developing AJAX programs must start with understanding the XMLHttpRequest object.

Understanding the XMLHttpRequest object starts with creating the XMLHttpRequest object and uses different methods to create XMLHttpRequest objects in different browsers:

Let's take a look at IE's method of creating XMLHttpRequest objects (Method 1):

var xmlhttp=activexobject ("Msxml12.xmlhttp");//newer IE version Create Msxml12.xmlhttp object

var xmlhttp=activexobject ("Microsoft.XMLHTTP")//older IE version Create Microsoft.XMLHTTP object

Mozilla, Opera, Safari, and most non-IE browsers use this method (method 2) to create XMLHttpRequest objects:

var xmlhttp=new xmlhttprequest ();

Note: In fact, Internet Explorer uses an object named XMLHttp instead of a XMLHttpRequest object, while Mozilla, Opera, Safari, and most non-Microsoft browsers use the latter (collectively, hereinafter XMLHttpRequest object). IE7 started using XMLHttpRequest objects, too.

So we need to create a XMLHttpRequest object that is compatible with multiple browsers:

The first method:

var xmlhttp=false; //Create a new variable and assign false to use false as a condition to determine that the XMLHttpRequest object has not yet been created

function createxmlhttp () {

try{

xmlhttp=new XMLHttpRequest ( ); // try to create a XMLHttpRequest object that is supported by browsers other than IE.

}catch (e) {

try{

xmlhttp=activexobject ("msxml12.xmlhttp"); // use the newer version of IE to create IE-compatible objects (MSXML2.XMLHTTP).

}catch (e) {

try{

xmlhttp=activexobject ("Microsoft.XMLHTTP"); // use older versions of IE to create IE-compatible objects (MICROSOFT.XMLHTTP).

}catch (failed) {

xmlhttp=false;//If it fails, keep it false.

}

}

}

return XMLHTTP;

}

Examples of whether success is judged:

if (!xmlhttp) {

failed to create XMLHTTP

}else{

Create xmlhttp successful

}

The second method:
if (typeof (XMLHttpRequest) = = "undefined" && window. ActiveXObject) {

function XMLHttpRequest () {

var xmlhttp_arr=["MSXML2. XMLHTTP "," Microsoft.XMLHTTP "];

var xmlhttp;

for (i=0;i<xmlhttp_arr.length;i++) {

if (xmlhttp=new activexobject (xmlhttp_arr[i ))

break;

}

return XMLHTTP;

}

}

This is a browser other than IE to create a XMLHttpRequest object

var xmlhttp=new xmlhttprequest ();

After you create the XMLHTTP, then look at some of its properties and methods, and the most important onreadystatechange event handle

Method:

Open () initializes HTTP request parameters, including URLs and HTTP methods, but does not send requests;

Abort () cancels the current response, closes the connection, and disconnects all activities that are not closed by the network;

getAllResponseHeaders () returns the HTTP response head as an unresolved string;

getresponseheaders) Returns the value of the specified HTTP response header;

Send () sends an HTTP request using an argument passed to the open () method, and an optional request body that passes the method;

Setresponseheader () Sets or adds an HTTP request to a request that is open but not sent.

Properties:

ReadyState describes the status of the HTTP request; (5 states are

0 indicates no initialization;

1 means read in

2 means read

3 Interactions (in-accepted)

4 Complete

)

responsetext Description for the server received the response body, if not received data to return an empty string;

Responsexml The response to the request resolves to XML and returns with the Document object;

Status describes the state of the HTTP request;

statustext states that the HTTP request status is not in digital form but by name;

onreadystatechange is a function that invokes an event when a readysate state changes.

The following is a XMLHttpRequest object that sends the request data and returns the result;

generate a XMLHttpRequest object

var xmlhttp=creatxmlhttp ();


Xmlhttp.open ("Get", "Http://www.jb51.net/jaryle", true);


Xmlhttp.onreadystatechange=getresult;


// how to tell a XMLHttpRequest object's state change who is going to handle the change? There are two ways to do this: an anonymous method Xmlhttp.onreadystatechange=function () {Process changes code}
Another method: Specify a method: Xmlhttp.onreadystatechange=getresult;
      function GetResult () {Handling changes code}
  xmlhttp.send ();
  function GetResult () {
  if (xmlhttp.readystate==4) {//when the status of ReadyState is equal to 4 to receive data
  The Status property, the HTTP status code returned by the server, is required at this time for if (xmlhttp.status==200) {//. Xmlhttp.status equals 200 means that the transport process is complete without errors
  alert (xmlhttp.responsetext);
}
}
  }

Note: so we should follow the above procedure to remember: Create XMLHttpRequest object-> Specify send address and send method-> Specify state change Processing Method- > Sends a request, the specified processing method is automatically invoked when the status changes after the request is sent.