XMLHttpRequest object creation and browser compatibility issues

The Mlhttprequest object is the core of AJAX functionality, and the development of an AJAX program must begin with an understanding of the XMLHttpRequest object.

Understanding the XMLHttpRequest object begins with creating a XMLHttpRequest object, using different methods for creating XMLHttpRequest objects in different browsers:

First look at the way IE creates XMLHttpRequest objects (Method 1):

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

var xmlhttp=activexobject ("Microsoft.XMLHTTP");//The older version of IE creates Microsoft.XMLHTTP objects

Mozilla, Opera, Safari, and most non-IE browsers use the following method (Method 2) to create the XMLHttpRequest object:

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, XMLHttpRequest object). IE7 started using the XMLHttpRequest object as well.

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

The first method:

var xmlhttp=false;//creates a new variable and assigns a value of false, using false as a condition to tell that the XMLHttpRequest object has not been created

function Createxmlhttp () {

try{

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

}catch (e) {

try{

xmlhttp=activexobject ("msxml12.xmlhttp");//Use a newer version of IE to create an IE-compatible object (msxml2.xmlhttp).

}catch (e) {

try{

xmlhttp=activexobject ("Microsoft.XMLHTTP");//Use an older version of IE to create an IE-compatible object (Microsoft.XMLHTTP).

}catch (failed) {

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

}

}

}

return XMLHTTP;

}

Examples of whether or not to judge success:

if (!xmlhttp) {

Failed to create XMLHTTP

}else{

Create XMLHTTP Success

}

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 XMLHttpRequest objects

var xmlhttp=new xmlhttprequest ();

After creating the XMLHTTP success, then take a look at some of its properties and methods, as well as the most important onreadystatechange event handle

Method:

Open () initializes the HTTP request parameters, including the URL and HTTP method, but does not send the request;

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

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

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

Send () sends an HTTP request using the arguments 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.

Property:

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

0 indicates no initialization;

1 indicates the Read

2 indicates read

3 in interaction (accepted)

4 Complete

)

ResponseText indicates that the server receives a response body, and returns an empty string if no data is received;

Responsexml indicates that the response to the request is parsed into XML and returned with the Document object;

Status describes the state of the HTTP request;

StatusText indicates that the HTTP request status is not in numeric form but with a name;

onReadyStateChange is a function that invokes an event when the 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 XMLHttpRequest who will handle this change when the object state changes use two methods: One is anonymous method Xmlhttp.onreadystatechange=function () {handles changed code} Another method: Specify the method: Xmlhttp.onreadystatechange=getresult;
function GetResult () {Processing the changed code}
Xmlhttp.send ();
function GetResult () {
if (xmlhttp.readystate==4) {//when the status of ReadyState equals 4 means that data is received
if (xmlhttp.status==200) {//This time you need to use the Status property, which is the HTTP status code returned by the server. Xmlhttp.status equals 200 indicates that the transfer process is complete without errors
alert (Xmlhttp.responsetext);
}
}
}

XMLHttpRequest object creation and browser compatibility issues