The principle of AJAX—how to achieve asynchronous and partial refresh

How to achieve asynchronous and partial refresh? The editor below will bring you an article on the principles of AJAX—how to achieve asynchronous and partial refresh. Now I share it with you and give it as a reference.

Overriew: If onReadyStateChange is assigned a value by the callback function, it can be called asynchronously. If the callback function directly operates the DOM, it can achieve partial refresh. So how does XMLHttpRequest's onReadyStateChange know that the service is ready? How does the state change (observer mode)? This is achieved through the client's status inquiry (periodic polling) of the service.

Detailed explanation:

1. XMLHttpRequest is responsible for communication with the server, and there are Many important attributes: readyStatus=4, status=200, etc. When the overall status of XMLHttpRequest is guaranteed to be completed (readyStatus=4), the data has been sent. Then query the request status according to the server's settings (similar to the client polling the server's return status, still an http short connection, not a long connection server-side push). If everything is ready (status=200), then execute required operation.

The operation is generally to directly operate the DOM, so AJAX can achieve the so-called "no refresh" user experience.

document.getElementById("user1").innerHTML = "数据正在加载...";
      if (xmlhttp.status == 200) {
        document.write(xmlhttp.responseText);
      }

2. So how to do it asynchronously on the AJAX client? In fact, it is the role of the Javascript callback function.

Provides a callback JavaScript function. Once the server response is available, the function is executed.

Business function:

function castVote(rank) {
 var url = "/ajax-demo/static-article-ranking.html";
 var callback = processAjaxResponse;
 executeXhr(callback, url);
}
需要异步通讯的函数： 


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)

First line defines a JavaScript callback function that is automatically executed once the response is ready, and the "true" flag specified in the req.open() method indicates that you want to execute the request asynchronously.

Once the server has processed the XmlHttpRequest and returned it to the browser, the callback method set using the req.onreadystatechange assignment will be automatically called.

Callback function:

function processAjaxResponse() {
 if (req.readyState == 4) {
  // only if "OK"
  if (req.status == 200) {
   document.getElementById("user1").innerHTML = req.responseText;
  } else {
   alert("There was a problem retrieving the XML data:
" + req.statusText);
  }
 }
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

In-depth analysis of Nginx implementation of AJAX cross-domain request issues

How to use the Rating control of AjaxToolKit

Implementing file upload with progress bar based on Ajax technology

The above is the detailed content of The principle of AJAX—how to achieve asynchronous and partial refresh. For more information, please follow other related articles on the PHP Chinese website!