This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact

preface

Today we’re going to revisit AJAX and talk about the five steps of AJAX

Introduction to the

AJAX = asynchronous JavaScript and XML

AJAX is a technique for updating parts of a web page without having to reload the entire page.

The five department of AJAX

  1. Create an asynchronous object XMLHTTP
var xmlhttp= new XMLHttpRequest(); 
Copy the code

The XMLHttpRequest object has three important properties:

  • Onreadystatechange: Request status change event
  • ReadyState: request status code
  • Status: indicates the HTTP status code
  • ResponseText: Gets the response data as a string
  • ResponseXML: or response data in XML form
  1. Set the request mode and address

Open (method, URL,async) via asynchronous objects

The first parameter: method: the type of the request; GET or POST

The second argument: URL: the location of the file on the server

The third argument: async: true or false, which will always be true, because the whole point of AJAX is to make asynchronous requests.

xmlhttp.open("GET"."01-ajax-get.php".true);
Copy the code
  1. Send the request

Send requests via send() of asynchronous objects

xmlhttp.send();
Copy the code
  1. Listen for state changes

Listen for sent state changes via the onReadyStatechange event of the asynchronous object:

When a request is sent, the client needs to determine when the request will be completed, so the XMLHttpRequest object provides an onReadyStatechange event mechanism to capture the status of the request and implement the response.

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

The onReadyStatechange event is emitted whenever readyState changes.

ReadyState Holds the state of XMLHttpRequest. There are 5 states in total: change from 0 to 4:

  • 0: The request is not initialized and open() has not been called.
  • 1: The server connection has been established **, but has not yet been sent. Send () has not been called.
  • 2: The request has been received and is being processed (you can usually now get the content header from the response).
  • 3: Request processing, usually the response has some data available, not all completed.
  • 4: Request completed and response ready

When the state is 4, this phase confirms that all data has been parsed into a format available to the client and that parsing is complete. A value of 4 indicates that the data has been parsed and can be retrieved through the properties of the XMLHttpRequest object.

  1. Process the returned results

Process the returned result based on the state change, but before processing the result, we need to determine whether our request was successful. Status, another attribute of the asynchronous object, represents the HTTP status code, through which the request is judged to be successful, and when successful, the result returned successfully is processed

//4. Listen for status changes
xmlhttp.onreadystatechange = function(){
 // Determine whether the current state change is the request completion state
 if (xmlhttp.readyState === 4) {
	if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304) {
		// 5. Process the returned result;
		//console.log(" successfully received data from server ");
       // Get the string returned by the server via the responseText property of the asynchronous object
       console.log(xmlhttp.responseText);
	}else{
		console.log("Unsuccessful!); }}}Copy the code

END

That’s all for this article

If you have any questions, please leave a comment