How does ajax work (with diagram)

This article mainly tells you about the working principle of ajax. It has certain reference value. Interested friends can learn about it. I hope it will be helpful to you.

Ajax refers to Asynchronous JavaScript and XML (asynchronous JavaScript and XML). The biggest advantage is that it can exchange data with the server and update part of the web page content without reloading the entire page. The basic principle of implementation is: the web page DOM object can accurately operate part of the content in the web page. XML, as a pure data storage carrier, allows the client and the server to exchange only the data of the web page content without additional information such as web page styles. , XMLHttpRequest is a request object that interacts with the server independently from the built-in request of the browser itself.

The abstract process of web application Ajax interacting with the server is as follows:

Detailed process explanation:

1: To use Ajax technology, the basics The basis is to create an XMLHttpRequest object, without which there is no possibility of asynchronous transmission:

var xmlhttp;
if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest(); 
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

2: Bind asynchronous operations in response to certain events in the web page: transmit through the xmlhttp object created above Request and carry data. Before making a request, you must first define the method of the request object, which file to submit to the server for request processing, what data to carry, and whether it is asynchronous.

Among them, like ordinary request submission data, there are two methods here: GET/POST

 xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",);
 xmlhttp.send();

xmlhttp.open("POST","/try/ajax/demo_post2.php","Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

3: After the server receives the request, it passes the attached data as input for processing The requested file, for example here: pass fname=Henry&lname=Ford as input to the file /try/ajax/demo_get2.php. Then the file is processed according to the incoming data, and the result is finally returned and sent back through the response object. The client obtains the response content based on the xmlhttp object, and then calls the DOM object to partially modify the web page content based on the response content.

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)//请求处理完毕且状态为成功
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//用response内容来修改DOM中的元素的内容
    }

Among them, there are two types of response: string type and XML text. The difference between the two responses is extracted as follows:

responseText attribute returns the response in the form of a string:

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

If the response from the server is XML, needs to be parsed as an XML object, use responseXML ：

xmlDoc=xmlhttp.responseXML; //获取服务器响应的XML文本并转换得到XMLDOM对象
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");//通过XMLDOM对象调用方法来获取XML对象中的内容
for (i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br>"; }
 
document.getElementById("myDiv").innerHTML=txt;//把获取到的内容通过document对象更新到网页内容去容去

Related tutorials:ajax video tutorial　

The above is the detailed content of How does ajax work (with diagram). For more information, please follow other related articles on the PHP Chinese website!