Easy to understand AJAX of JavaScript

Summary

AJAX technology is one of the necessary skills for web page construction. This article hopes to help everyone learn this technology easily

1. What is ajax?

ajax (asynchronous javascript xml) can refresh local web page data instead of reloading the entire web page.

2. How do I use ajax?

Step 1: Create an xmlhttprequest object

Create an xmlhttprequest object, and an XMLHttpRequest object is used to exchange data with the server.

var xmlhttp =new XMLHttpRequest();

Step 2: Register the callback function

onreadystatechange function, when the server responds to the request and returns data, we need to use onreadystatechange function when we want the client to process these data. Every time readyState of xmlhttprequest object changes, onreadystatechange function will be triggered. readyState will be described in detail in the next chapter.

 xmlHttp.onreadystatechange= callback;
  function callback(){}

Step 3: Configure and send the request

Use the open () and send () methods of the xmlhttprequest object to configure and send resource requests to the server.

xmlhttp. open (method, url, async) method includes get and post, url is mainly the path of files or resources, and async parameter is true (for asynchronous) or false (for synchronous)

xmlhttp. send (); Send the request to the server using the get method.

xmlhttp. send (string); Send the request to the server using the post method.

The post form data requires an HTTP header to be added using the setRequestHeader method of the xmlhttprequest object.

When will the post send request be available?

(1) When updating a file or database.

(2) Send a large amount of data to the server because post requests have no character limit.

(3) Send the encrypted data entered by the user.

xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

Step 4: Processing the response data

Use the responseText or responseXML property of the xmlhttprequest object to get the server's response.

Use responseText attribute to get string data of server response, and use responseXML attribute to get XML data of server response.

In the callback function, readyState==4 and status==200 are used to judge whether the interaction is over and the response is correct, and the data returned by the server is obtained as needed to update the page content.

function callback(){
  if(xmlHttp.readyState == 4){
   // Determine whether the interaction was successful 
   if(xmlHttp.status == 200){
    // Get the data returned by the server 
    // Get plain text data 
    var responseText =xmlHttp.responseText;
    document.getElementById("info").innerHTML = responseText;
   }
  }
}

3. Five states during the operation of AJAX (readyState)

In the actual operation of AJAX, the access to XMLHttpRequest (XHR) is not completed once, but the result obtained after experiencing various states. There are five kinds of states in AJAX, which are set by AJAX engine switching.

0: XHR is defined but not initialized

1: Calling the send () method, sending the request, and waiting to receive the response after the request is sent

2: Response Receive Complete

3: Parsing response content

4: The response content is parsed and returned to the client for calling

For the above states, the "0" state is an automatic state value after definition, while for the successful access state (getting information), we mostly use "4" to judge.

It is worth noting that the onreadystatechange event is triggered every time the state is switched, so the onreadystatechange event is triggered five times during the whole process

4. Advantages and disadvantages of AJAX

Advantages

1. The biggest point is that the page has no refresh, communicates with the server in the page, does not need to interrupt the user's operation, and has a faster response ability, which gives the user a very good experience.

2. Reduce the burden on the server. The principle of ajax is "take data on demand", which can minimize the burden on the server caused by redundant requests and responses.

Disadvantages

1. ajax kills the back button, which destroys the browser's backward mechanism.

2. The support for search engines is weak.