The principle of Ajax-how to do asynchronous and local refresh "Implementation code" _AJAX related

Overriew:onreadystatechange is assigned a value by the callback function, it can implement the asynchronous call, the callback function directly manipulate the DOM, you can implement local refresh. So how does XMLHttpRequest onreadystatechange know the service ready? How is the state changed (Observer mode)? is implemented through the client's status inquiry (periodic polling) of the service.

Detailed

1. XMLHttpRequest is responsible for communication with the server side, which has many important attributes: readystatus=4,status=200 and so on. When the overall state of the XMLHttpRequest is ensured it is completed (readystatus=4), that is, the data has been sent. Then according to the server's setup query (similar to the client will poll the server's return status, is still the HTTP short connection, not the long connected server-side push) request status, if everything is ready (status=200), then perform the required action.

Operations are typically directly manipulating the DOM, so Ajax can do what is called a "no refresh" user experience.

document.getElementById ("user1"). InnerHTML = "Data is loading ...";
      if (Xmlhttp.status = =) {
        document.write (xmlhttp.responsetext);
      }

2. How does the AJAX client do the asynchronous? is actually the function of JavaScript's callback function.

Provides a callback JavaScript function that is executed once the server response is available

Business functions:

function Castvote (rank) {
 var url = '/ajax-demo/static-article-ranking.html ';
 var callback = Processajaxresponse;
 EXECUTEXHR (callback, URL);
Functions requiring asynchronous communication: function 


executexhr (callback, URL) {
 //branch for native XMLHttpRequest object
 if (window. XMLHttpRequest) {
  req = new XMLHttpRequest ();
  Req.onreadystatechange = callback;
  Req.open ("Get", url, true);
  Req.send () (null);
 } Branch for Ie/windows ActiveX version
 else if (window. ActiveXObject) {
  req = new ActiveXObject ("Microsoft.XMLHTTP");
  if (req) {
   req.onreadystatechange = callback;
   Req.open ("Get", url, true);
   Req.send () ();
}}} Req.onreadystatechange = callback
req.open ("Get", url, True)

The first line defines the JavaScript callback function, which executes automatically once the response is in place, and the "true" flag specified in the Req.open () method indicates that you want to execute the request asynchronously.

Once the server has finished processing XMLHttpRequest and returns it to the browser, the callback method that is set by using Req.onreadystatechange assignment is automatically invoked.

callback function:

function Processajaxresponse () {
 if (req.readystate = 4) {
  //only if "OK"
  if (Req.status =) {
   docum Ent.getelementbyid ("user1"). InnerHTML = Req.responsetext;
  } else {
   alert ("There was a problem retrieving the XML data:
" + req.statustext);
  }
 }
}

The above Ajax principle-how to do asynchronous and local refresh "Implementation Code" is a small set to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.