• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

How does Ajax work?

  1. An event occurs in a web page (e.g. page load, button click)
  2. The XMLHttpRequest object is created by JavaScript
  3. The XMLHttpRequest object sends a request to the Web server
  4. The server issued the request
  5. The server returns the response to the web page
  6. The response is read by JS
  7. The correct action is performed by JS

At the heart of Ajax is the XMLHttpRequest object

To create an XMLHttpRequest object:

variable = new XMLHttpRequest()
Copy the code

Cross-domain access: For security reasons, modern browsers do not allow cross-domain access, which means that the web page you are trying to load must be on the same server as the XML file.

XMLHttpRequest object method:

  • Open (method, url, async, user, PSW) : regulations request
  • Method: Request type GET or POST
  • Url: file location
  • Async: true (asynchronous) or false (synchronous)
  • User: Optional user name
  • PSW: Optional password
  • Send () : Sends requests to the server for GET requests
  • Send () : Sends requests to the server for POST requests

XMLHttpRequest object properties:

Onreadystatechange: Defines the function to be called when the readyState property changes

ReadyState: Saves XMLHttpRequest state:

  • 0: The request is not initialized
  • 1: The server connection is established
  • 2: Request received
  • 3: The request is being processed
  • 4: Request completed and response ready

Status: Returns the status number of the request

Send a request to the server

GET or POST?

GET is simpler and faster than POST and can be used in most situations. However, always use POST when:

  • Caching files is not an option (updating files or databases on the server)
  • Sending large amounts of data to the server (POST has no size limit)
  • POST is more powerful and secure than GET by sending user input (which can contain unknown characters)

Asynchronous requests: The async parameter of the open() method is set to true

By sending asynchronously, instead of waiting for a server response, JS can:

  • Execute additional scripts while waiting for a server response
  • Process the response when it is ready
The onReadyStatechange property defines the function http.onReadyStatechange = function(){if(this.readyState == 4 && this.status == 200) {... }}Copy the code

Synchronous requests: The async parameter of the open() method is set to false

The onreadyStatechange function is not needed because the code will wait for the server to complete

Server response

The onreadystatechange property:

  • The readyState property preserves the state of the XMLHttpRequest
  • The status and statusText attributes persist the state of the XMLHttpRequest object
  • When readyState is 4 and status is 200, the response is ready

Use the callback function

If you have multiple Ajax tasks on your site, you should create a function that executes the XMLHttpRequest object and a callback function for each Ajax task that should contain the URL and the function to call when the response is ready.

Server Response properties

  • ResponseText: Gets the response data as a string and returns the server response as a JS string.
  • ResponseXML: Gets the response data in XML data format and returns the server response as an XML DOM object. Use this property to parse the response as an XML DOM object.

Server response method

  • GetResponseHeader () – Returns specific header information from the server, returns specific header information from the server response.
  • GetAllResponseHeaders () – Returns all headers from the server and all headers from the server response (with arguments).

​