preface

When you walk through the front door, walk past HTML, look at CSS, flip over JavaScript, the next thing you know, it’s Ajax.

This is also necessary for the front end to interact with the back end, which is very important. Hence the title, which is an indispensable link in the chain of knowledge at the front end.

What is Ajax?

At the heart of Ajax is the JavaScript object XmlHttpRequest. XmlHttp allows us to use JavaScript to make a request to the server and process the response without blocking the user.

With the XMLHttpRequest object, the front-end developer can perform operations such as local updates to the page after it has loaded.

What does Ajax do?

  • The asynchronous mode improves user experience
  • Improved user experience by not using form submission (which can jump)
  • Instead of updating the entire page, traditional web pages (which do not apply Ajax) have to reload the entire page to update the content.

This allows web applications to be more responsive to user actions, avoiding sending duplicate data to the server multiple times.

Detail the Ajax request creation steps

A GET request

The steps are as follows:

  • Create an object
  • Setting request parameters
  • Send the request
  • Listen for status changes after a successful request
	var request = new XMLHttpRequest()
	request.open("GET"."url")
	request.send()
	request.onreadystatechange = function() {
  		if (this.readyState == 4 && this.status == 200) {
    		console.log(request.responseText)
  		}
	}
Copy the code

  • open()

    The open() method creates an HTTP request. It takes three arguments. The first argument specifies whether the request should be submitted by POST or GET, the second argument specifies the address to be submitted, and the third argument specifies whether asynchronous or synchronous (true or false).

  • send()

    The send() method sends the request without any parameters

  • Listen for status changes after a successful request

    Onreadystatechange: Listens for changes in the request state. This method is called when readyState changes. It is typically used to specify callback functions

    ReadyState: There are five states

    • 0: uninitialized
    • 1: after the open method is successfully invoked
    • 2: The server has granted the client’s request
    • 3: During the interaction, the HTTP header is received but the response data is not received
    • 4: complete

    ResponseText: The text content returned by the server. The default is a string

    Status: indicates the status code returned by the server

    StatusText: indicates the status code text returned by the server

A POST request

The steps are as follows:

  • Create an object
  • Setting request parameters
  • Setting the request header
  • Send the request
  • Listen for status changes after a successful request

As you can see, post requests have one more step to set the request header than GET requests. Please remember this step!

let XHR = new XMLHttpRequest(); XHR.open("POST", "url"); XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded"); XHR.send(data); XHR.onreadystatechange = function () { if (XHR.readyState == 4 && XHR.status == 200) { console.log(XHR.responseText); XHR = null; }}}}}}}}}Copy the code

  • Send () : Explain why there is a data in send. This is when we send a set of data to the server via Ajax post request.

  • SetRequestHeader () : Sets the request header

  • ReadyState Value description:

    • 0. Initialization,XHR object has been created, open has not been executed
    • 1. Load, the open method has been called, but the request has not been sent
    • 2. The load is complete. The request has been sent
    • 3. Interaction: Partial data can be received
    • 4. All data is returned

  • Status Value description:

    • 200: success
    • 404: No file, query, or URL found
    • 500: an internal server error occurs

Differences between GET and POST requests in Ajax

  • As we just said, for get requests we don’t have to set the request header, whereas for POST requests we do.
  • With GET requests, the parameters are displayed in the URL, but not with POST.
  • Get requests send a small amount of data, while POST requests send a large amount of data.
  • Get requests can be cached, but POST requests are not. Get requests can be saved in the browser’s history records (passwords and other private data are submitted in GET mode, others can directly see these data when viewing the history records, resulting in data leakage).
  • Get generates one TCP packet, and POST generates two TCP packets.
    • For get, the browser sends the header along with the data, and the server responds with 200 and returns the data.
    • For post, the browser sends a header, the server responds with “Continue”, the browser sends data, the server responds with 200, and the data is returned.

The last

We are a group of people who study hard for their future. I hope that we will be grateful for the environment at that time because we began to spend our time in the first two years and began to struggle for ourselves!

Question of the day: Did you roll today?