Ajax entry notes

Ajax =ASynchronousJAvascript +XML,It is a technology that updates some webpages without the need to reload the entire webpage.

By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

XMLHttpRequest is the basis of Ajax. XMLHttpRequest is used to exchange data with the server in the background. This means that you can update a part of a webpage without reloading the entire webpage.

1: Create an XMLHTTPRequest object

To handle all modern browsers, including ie5 and IE6, check whether the browser supports XMLHttpRequest objects. If yes, create an XMLHTTPRequest object. If not, activexobject is created:

var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }

2: send a request to the server

To send requests to the server, use the open () and send () Methods of the XMLHTTPRequest object:

xmlhttp.open("GET","test1.txt",true);xmlhttp.send();

 

Method	Description
Open (Method,URL,Async)	Specifies the request type, URL, and whether to asynchronously process the request. Method: Request type; get or post URL: File location on the server Async: True (asynchronous) or false (synchronous)
Send (String)	Send the request to the server. String: Used only for post requests

 

3: Server Response

To obtain a response from the server, use the responsetext or responsexml attribute of the XMLHTTPRequest object.

Attribute	Description
Responsetext	Obtain response data in string format.
Responsexml	Obtain response data in XML format.

Responsetext attributes

If the response from the server is not XML, use the responsetext attribute.

The responsetext property returns a string-type response, so you can use:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Responsexml attributes

If the response from the server is XML and needs to be parsed as an XML object, use the responsexml attribute:

Request the books. xml file and parse the response:

xmlDoc=xmlhttp.responseXML;txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++)  {  txt=txt + x[i].childNodes[0].nodeValue + "<br />";  }document.getElementById("myDiv").innerHTML=txt;

4: onreadystatechange event

When a request is sent to the server, we need to execute some response-based tasks.

When the readystate changes, the onreadystatechange event is triggered.

The readystate attribute contains the status information of XMLHttpRequest.

The following are three important attributes of the XMLHTTPRequest object:

Attribute	Description
Onreadystatechange	A storage function (or function name) that is called whenever the readystate attribute changes.
Readystate	XMLHttpRequest status. Changes from 0 to 4. 0: the request is not initialized. 1: The server connection has been established. 2: The request has been received 3: The request is being processed 4: The request is complete and the response is ready.
Status	200: "OK" 404: Page not found

In the onreadystatechange event, we specify the tasks executed when the server responds to the prepared tasks.

When readystate is 4 and the status is 200, the response is ready:

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }