1. XML is introduced

Historically, Ajax delivered data in XML format, which has been replaced by JSON.

  • XML Extensible Markup Language.
  • XML is designed to transfer and store data.
  • XML is similar to HTML, except that HTML has predefined tags, whereas XML has no predefined tags,

They’re all custom tags that represent some data.

For example, I have a student data: name = "Sun Wukong"; age = 18 ; Gender = "male"; <student> <name> <age>18</age> <gender> male </gender> </student>Copy the code

2. Advantages and disadvantages of AJAX

  1. The advantages of AJAX
    1. You can communicate with the server side without refreshing the page.
    2. Allows you to update parts of the page based on user events.
  2. The disadvantage of AJAX
    1. Cannot rollback without browsing history
    2. Cross-domain problems exist (homologous)
    3. SEO is not friendly

3. The HTTP protocol

The HTTP protocol (Hypertext Transfer Protocol) details the rules for communication between browsers and world Wide Web servers

The request message

The focus is on format and parameters

Line POST/s? Ie = UTF-8 HTTP/1.1 header Host: atguigu.com Cookie: name=guigu Content-Type: application/x-www-form-urlencoded user-agent: Chrome 83 Blank body username= Admin&password =adminCopy the code

The response message

Line HTTP/1.1 200 OK header Content-Type: text/ HTML; Charset = UTF-8 Content-Length: 2048 Content-Encoding: gzip Empty line < HTML > <head> </head> <body> <h1> </body> </ HTML >Copy the code

4. Native ajax

The ajax request is cached in the ie browser, so at the time of the request, we need to add a timestamp request path at http://127.0.0.1:8000/json-server? t=Date.now()

//1. Create objects
const xhr = new XMLHttpRequest();
//2. Initialize the request method and URL
// Set the request header
xhr.setRequestHeader('Content-Type'.'application/x-www-form-urlencoded');
xhr.open('GET'.'http://127.0.0.1:8000/server? a=100&b=200&c=300');
/ / 3. Send
xhr.send();
// If it is a POST request, send can take an argument
xhr.send('a=100&b=200&c=300');
// Timeout setting, if more than 2s, an error
xhr.timeout = 2000
// Timeout callback
xhr.ontimeout = function() {
 alert('Request timed out')}// Network request error
xhr.onerror = function() {
}

xhr.abort() // The request can be cancelled
// If you want to undo the data in JSON format
// Set the type of the response body data
xhr.responseType = 'json';

//4. The event binding processes the result returned by the server
// on when.... when
// ReadyState is an attribute in the XHR object that represents states 0, 1, 2, 3, 4
0=> Not initialized1Call the open method2=> The send method is invoked3=> The server returns some results4=> The server returns all results/ / change change
xhr.onreadystatechange = function(){
    // Check (server returns all results)
    if(xhr.readyState === 4) {// Check the response status code 200 404 403 401 500
        // All status codes starting with 2 are successful, and >=200 and < 300
        if(xhr.status >= 200 && xhr.status < 300) {// Process the result line header with an empty line body
            / / response
            // console.log(xhr.status); / / status code
            // console.log(xhr.statusText); // Status string
            // console.log(xhr.getAllResponseHeaders()); // All response headers
            // console.log(xhr.response); / / response body
            // Set the text of result
            result.innerHTML = xhr.response;
        }else{}}}Copy the code