What are the workflows of AJAX? Introduction to ajax workflow (with examples)

This article mainly talks about the workflow of ajax, as well as the principle of ajax and the introduction of some commonly used attributes. Now let us read this article together

AJAX stands for "Asynchronous JavaScript and XML".

is a web development technology for creating interactive web applications. It:
Uses XHTML CSS to represent information;
Uses JavaScript to operate DOM (Document Object Model) for dynamic display and interaction;
Uses XML and XSLT for data exchange and related operations;
Uses the XMLHttpRequest object Asynchronous data exchange with the web server;
Use JavaScript to bind everything together.
AJAX principle:
AJAX does not refer to a single technology, but organically utilizes a series of related technologies. Its core is the JavaScript object XmlHttpRequest, which allows us to use JavaScript to make requests to the server and process responses without blocking the user. AJAX uses an asynchronous interaction process, which introduces an intermediary between the user and the server, thereby eliminating the processing-waiting-processing-waiting shortcomings in the network interaction process. The user's browser loads the AJAX engine when performing tasks. The AJAX engine is written in JavaScript and is usually hidden in a hidden frame. It is responsible for compiling the user interface and interacting with the server. The AJAX engine allows the interaction process between the user and the application software to proceed asynchronously, independent of the communication between the user and the network server. Now, you can use Javascript to call the AJAX engine instead of generating an HTTP user action. In-memory data editing, page navigation, and data verification, which do not require reloading the entire page, can be executed by AJAX. Using AJAX, you can Bringing visible convenience to JSP, developers, and end users.
Since the core of Ajax is the XmlHttpRequest object, it must be introduced:
Commonly used attributes:
Onreadystatechange specifies the event processing function when the readyState attribute changes. Just write
readyState to indicate the current status of the Ajax request. Read only Its value is represented by a number.
            0 means not initialized. The open method has not been called yet
        1 means loading. The open method has been called, but the send method has not been called yet
        2 means that it has been loaded. send has been called. The request has started
        3 means the interaction is in progress. The server is sending a response
        4 means complete. The response is sent
Every time the readyState value changes, the readystatechange event will be triggered.
responseText Returns the response information as a string. Read-only. It's either HTML, XML or plain text, depending on what the server is sending. The responseText property is only available when the readyState property value becomes 4, indicating that the Ajax request has ended.
responseXML Format the response information into an Xml Document object and return it, read-only. The responseXML attribute is available only when the server sends data with correct header information. MIME type must be text/xml
status Returns the http status code of the current request. Read-only
Common status codes and their meanings:
404 Page not found (not found)
                                                                                                                                                                                                                                       . The file has not been Modification)
In the XMLHttpRequest object, the status codes sent by the server are stored in the status attribute. By comparing this value with 200 or 304, you can ensure whether the server has sent a successful response
(If you want to know more, go to the PHP Chinese website
AJAX Development Manual
column to learn)

Common methods:
Open creates a new http request and specifies the request method, URL and verification information
Send Sends the request to the http server and receives the response. If the request is get, it will not be sent. Any data
setRequestHeader individually specifies a certain http header of the request
AJAX workflow:
1 Object initialization

function   createXmlHttpRequest(){
   var xmlHttp;
   try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
    }catch (e){
           try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                  try{
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){}  
           }
    }
   return xmlHttp;
 }

2 Send request
Call The open and send methods of the XMLHttpRequest object are, in order, called after the open call is completed.

xmlHttp.open("get","../servlet/RegisterServlet?timeStamp="+new Date().getTime(),true)
xmlHttp.send(null);

If the parameter of send is sent in Post mode, it can be any content that you want to pass to the server, but you must first call the setRequestHeader method and modify the MIME category:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3 The server receives and processes the data and returns it, and specifies the event handler to process the return information
Each time the readyState attribute Changes will trigger the readystatechange event. Just assign the corresponding handler function name to the onreadystatechange attribute of the XMLHttpRequest object.

 xmlHttp.onreadystatechange = function(){            if (xmlHttp.readystate == 4) { 
  if (xmlHttp.status == 200 || xmlHttp.status == 304) {//XMLHttpRequest对成功返回的信息有两种处理方式：//responseText：
  将传回的信息当字符串使用；//responseXML：将传回的信息当XML文档使用，可以用DOM处理。 
        }            }        };

4 Client reception
5 Modify the client page Content

This article ends here (if you want to see more, go to the PHP Chinese websiteAJAX User Manual column to learn), there are questions You can leave a message below to ask questions.

The above is the detailed content of What are the workflows of AJAX? Introduction to ajax workflow (with examples). For more information, please follow other related articles on the PHP Chinese website!