What is the AJAX

• AJAX stands for asynchronous JS and XML, and JSON is commonly used instead of XML
• AJAX is mainly used to send requests and receive responses to the browser without refreshing the page, and then partially update the page
• At the heart of the technology is the XMLHttpRequest object, which makes HTTP requests and listens for readyState changes for responses
• The advantage is that you can send requests and receive responses without refreshing
• The disadvantage is that browser restrictions do not cross domains

Implementation steps

1. Create an XMLHTTPRequest object. 2. Set request parameters 3. Listen for status changes after the request succeeds. 4. Send the request

let request = new XMLHttpRequest()
request.open('GET'.'/style.css')
request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.response)
  }
  request.send()
};
Copy the code

A life of one request

The request has different readyStates at different stages, which makes it easier to understand the onreadyStateChange event

Different stages of a request	readyState
let request = new XMLHttpRequest()	0
request.open(‘GET’, ‘/style.css’)	1
request.send()	2
The first response message appears in the browser	3
All responses have been downloaded	4
# to load a CSS

getCSS.onclick = () = > {
    const request = new XMLHttpRequest()
    request.open('GET'.'/style.css')
    request.onreadystatechange = () = > {
        // If the request succeeds
        // Download completed, but do not know whether 200 completed or 404 completed
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                // Request sent successfully
                // Write the CSS content to the style tag and insert the head
                const style = document.createElement('style')
                // How to get the corresponding content? request.response
                style.innerHTML = request.response
                document.head.appendChild(style)
            } else {
                // The request failed
                alert("Failed to load CSS");
            }
        }

    }
    request.send()
}
Copy the code

The focus is on what to do with the received response: generate the style tag

To load the JS

The focus is on what to do with the received response: generate a script tag

getJS.onclick = () = > {
    console.log('111')
    const request = new XMLHttpRequest()
    request.open('GET'.'/2.js')
    request.onreadystatechange = () = > {
        // Download completed, but do not know whether 200 completed or 404 completed
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                // Request sent successfully
                // Write the js contents to the script tag and insert the head
                const script = document.createElement('script')
                // How to get the corresponding content? request.response
                script.innerHTML = request.response
                document.body.appendChild(script)
            } else {
                // The request failed
                alert("Failed to load JS");
            }
        }
    }
    request.send()
}
Copy the code

Load the HTML

getHTML.onclick = () = > {
    const request = new XMLHttpRequest()
    request.open('GET'.'/3.html')
    request.onload = () = > {
        const div = document.createElement('div')
        div.innerHTML = request.response
        document.body.appendChild(div)
    }
    request.onerror = () = > {
    }
    request.send()

}
Copy the code

Loading JSON

Json. parse converts JSON syntax strings to jSON-typed data. Json. stringify converts JS data to JSON strings

getJSON.onclick = () = > {
    const request = new XMLHttpRequest()
    request.open('GET'.'/5.json')
    request.onreadystatechange = () = > {
        if (request.readyState === 4) {
            if (request.status === 200) {
                // The request succeeded
                // How to parse JSON? Json. parse: String -> JS object
               
                const obj = JSON.parse(request.response);
            

            }
        }
    }

    request.send()
}
Copy the code