This is the 24th day of my participation in the August More Text Challenge

AJAX

  • Ajax full name async javascript and XML
  • It’s the ability to interact front and back
  • That is, the tool that our client sends the message to the server, and the tool that receives the response
  • Is a function of the default asynchronous execution mechanism

The advantage of AJAX

  1. Native JS can be used without plug-in support
  2. Good user experience (data can be updated without page refresh)
  3. Reduce the burden on the server and bandwidth
  4. Disadvantages: Search engine support is not enough, because the data is not on the page, the search engine can not search

The use of AJAX

  • There are built-in constructors in JS to create Ajax objects
  • Once the Ajax objects are created, we use ajax object methods to send requests and receive responses

Create an Ajax object

// IE9 < const XHR = new ActiveXObject(‘ mricosof.xmlhttp ‘)

  • So you have an Ajax object up there
  • We can use this XHR object to send ajax requests

Configuring Link Information

Const XHR = new XMLHttpRequest() // The open method in the XHR object is used to configure the request information. // The first parameter is the request method for this request. // The second parameter is the url of the request. // The third parameter is whether the request is asynchronous. Xhr.open (‘get’, ‘./data.php’)

  • After the above code is executed, the basic configuration information for this request is written

Send the request

Const XHR = new XMLHttpRequest() xhr.open(‘get’, ‘./data.php’) // Use the send method in the XHR object to send the request xhr.send()

  • The code above sends the configured Ajax object to the server

A basic Ajax request

  • One of the most basic Ajax requests is the above three steps
  • But with the above three steps, we can actually send the request to the server
  • If the server is healthy, the response can also go back to the client
  • But we can’t get a response
  • If we want to get a response, we have two conditions
    1. The HTTP request was successful, that is, the HTTP status code is 200 ~ 299
    2. The Ajax object also has its own status code that represents the stages of the Ajax request

Ajax status code

  • Ajax status code – xhr.readyState
  • Is used to represent a state in the entire course of an Ajax request
    • ReadyState === 0: indicates that initialization is not complete, that is, the open method has not been executed
    • ReadyState === 1: indicates that the configuration information is complete, that is, after the open command is executed
    • ReadyState === 2: The send method has been executed
    • ReadyState === 3: the response content is being parsed
    • ReadyState === 4: indicates that the response content is parsed and can be used on the client
  • At this point we’ll see that we can only use the data from the server if readyState === 4 throughout an Ajax request
  • Therefore, the HTTP status code ranges from 200 to 299
    • An Ajax object has a member called xhr.status
    • This member records the HTTP status code for this request
  • The request is completed only when both conditions are met
readyStateChange
  • There is an event in the Ajax object called the readyStateChange event
  • This event is specifically used to listen for changes in the behavior of the Ajax object’s readyState value
  • This means that the event is triggered whenever the readyState value changes
  • So we’re going to listen for ajax readyState to be 4 in this event

const xhr = new XMLHttpRequest() xhr.open(‘get’, ‘./data.php’)

Xhr.send () xhr.onReadyStatechange = function () {// This event is raised every time readyState changes HTTP status code is 200-299 the if (XHR. ReadyState = = = 4 && / ^ 2 \ d {2 | $/. The test (XHR. Status)) {/ / here said validation by / / we can take the contents of the service side to give us response}}

responseText
  • ResponseText member in the Ajax object
  • It is used to record the contents of the response body that the server gives us
  • So we just use this member to get the response body content

const xhr = new XMLHttpRequest() xhr.open(‘get’, ‘./data.php’) xhr.send() xhr.onreadyStateChange = function () { if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) Console. log(xhr.responseText)}}

You use Ajax to send requests with parameters

  • We can also use Ajax to send requests with parameters
  • Parameters are the information given to the background when interacting with it
  • But there are differences between get and POST that take parameters

Send a GET request with parameters

  • The parameters of the GET request are concatenated directly after the URL

Const XHR = new XMLHttpRequest() Xhr.open (‘get’, ‘./data.php? a=100&b=200’) xhr.send()

    • This allows the server to accept two parameters
    • One is a, and the value is 100
    • One is B, and the value is 200

Send a POST request with parameters

  • The parameters of the POST request are carried in the request body, so they do not need to be concatenated after the URL

Const XHR = new XMLHttpRequest() xhr.open(‘get’, ‘./data.php’) // If an Ajax object sends a POST request, Xhr.setrequestheader (‘content-type’, ‘Application /x-www-form-urlencoded’) // Request body will be coded in () // No question mark, Xhr. send(‘a=100&b=200’) xhr.send(‘a=100&b=200’)

    • Application/X-www-form-urlencoded data format is key= Value&key =value

Encapsulation AJAX

  • Ajax is too cumbersome to use because you have to write a lot of code each time
  • So let’s encapsulate an Ajax method to make it easier to use

Be sure to use it

  • Since there are some things we can leave unpassed, we can use the default values, so we choose how the object passes the parameters

// Async: “, // async: “, // whether async: “, // dataType: Parse success: function () {} parse success: function () {})

    • Once you’ve decided how to use it, you start writing the wrapper function