1, What is it

Full name of AJAX (Async Javascript and XML)

Asynchronous JavaScript   And XML is a web development technology for creating interactive web applications. It can exchange data with the server and update some web pages without reloading the whole web page

The principle of Ajax is simply to send an asynchronous request to the server through the XmlHttpRequest object, obtain data from the server, and then use JavaScript to operate the DOM to update the page

The flow chart is as follows:

Here is an example:

When the leader wanted to report to Xiao Li, he entrusted the Secretary to call Xiao Li and then did other things until the secretary told him that Xiao Li had arrived. Finally, Xiao Li reported to the leader

The Ajax request data process is similar to "the leader wants to report to Xiao Li". The above secretary is equivalent to the XMLHttpRequest object, the leader is equivalent to the browser, and the response data is equivalent to Xiao Li

After sending the HTTP request, the browser can do other things, and then operate after receiving the data returned by XHR

2, Implementation process

realization   Ajax asynchronous interaction requires the cooperation of server logic. The following steps need to be completed:

• establish   The core object of Ajax   XMLHttpRequest object

• adopt   XMLHttpRequest   Object   open()   Method to establish a connection with the server

• Build the data content required by the request and use XMLHttpRequest   Object   send()   Method is sent to the server

• adopt   XMLHttpRequest   Object provided   onreadystatechange   The event monitors your communication status on the server side

• Accept and process the data results responded by the server to the client

• Update processing results to   In HTML pages

Create XMLHttpRequest object

Via XMLHttpRequest()   Constructor to initialize a   XMLHttpRequest   Instance object

const xhr = new XMLHttpRequest();

Establish a connection with the server

adopt   XMLHttpRequest   Object   open()   Method to establish a connection with the server

xhr.open(method, url, [async][, user][, password])

Parameter Description:

• Method: indicates the current request method. Common methods include GET and POST

• url: server address

• async: Boolean value indicating whether to execute the operation asynchronously. The default value is true

• User: optional user name for authentication purposes; Default to ` null

• Password: optional password for authentication purposes. The default value is ` null

Send data to the server

adopt   XMLHttpRequest   Object   send()   Method to send the data of the client page to the server

xhr.send([body])

Body: Yes   XHR   The data body to be sent in the request; otherwise   null

When sending data using GET request, you should pay attention to the following:

• Add the request data to the url address in the open() method

• The parameter in the send() method in the send request data is set to null

Bind onreadystatechange event

onreadystatechange   Event is used to listen to the communication status of the server. The main listening attribute is XMLHttpRequest.readyState  ,

The XMLHttpRequest.readyState property has five states, as shown in the following figure

as long as   As soon as the readyState property value changes, it will be triggered once   readystatechange   event

The XMLHttpRequest.responseText property is used to receive the server-side response results

for instance:

const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
    if(request.readyState === 4){ //  The entire request process is complete
        if(request.status >= 200 && request.status <= 300){
            console.log(request.responseText) //  Results returned by the server
        }else if(request.status >=400){
            console.log("Error message:" + request.status)
        }
    }
}
request.open('POST','http://xxxx')
request.send()

3, Encapsulation

From the above understanding of the XMLHttpRequest object, let's encapsulate a simple ajax request

//Encapsulate an ajax request
function ajax(options) {
    //Create XMLHttpRequest object
    const xhr = new XMLHttpRequest()


    //Contents of initialization parameters
    options = options || {}
    options.type = (options.type || 'GET').toUpperCase()
    options.dataType = options.dataType || 'json'
    const params = options.data

    //Send request
    if (options.type === 'GET') {
        xhr.open('GET', options.url + '?' + params, true)
        xhr.send(null)
    } else if (options.type === 'POST') {
        xhr.open('POST', options.url, true)
        xhr.send(params)

    //Receive request
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            let status = xhr.status
            if (status >= 200 && status < 300) {
                options.success && options.success(xhr.responseText, xhr.responseXML)
            } else {
                options.fail && options.fail(status)
            }
        }
    }
}

Use as follows

ajax({
    type: 'post',
    dataType: 'json',
    data: {},
    url: 'https://xxxx',
    success: function(text,xml){//Callback function after successful request
        console.log(text)
    },
    fail: function(status){Callback function after request failure
        console.log(status)
    }
})