Ajax in action

In the past, main.js and style. CSS were directly referenced in index. HTML, but now they are referenced in ajax. New Example: Now request CSS in main.js: Load CSS

getCSS.onclick=()=>{ const request = new XMLHttpRequest(); request.open('GET','/style.css'); Request.onload =()=>{// listen for its success // reflect the effect of the tag in the style to the HTML. Const style = document.creatElement('style')// Create the style tag style.innerhtml ==request.respone// Fill in the style content Document. The head. The appendChild (style) / / the style inserted into the head inside}; Console. log(' succeeded ')} request.onerror=()=>{listen for his failure console.log(' failed ')} request.send // send this request};Copy the code

Add a button to index.html

<body>
<h1>
</h1>
</body>

Copy the code

Challenge 2: Use this method before loading JS:

Const string = fs.readfilesync (‘public/ index.httmL ‘)// Declare a string response.write(string)// Directly respond to the string

Let’s start with XMLHttpRequest

XMLHttpRequest to send HTTP requests to implement data exchange between the web site and the server.

Ajax implementation involves the following steps

  1. Create an implementation of XMLHttpRequest;
  2. Make an HTTP request;
  3. Receive data returned by the server
  4. Update web data

That is, AJAX makes HTTP requests through native XMLHttpRequest objects, gets the data returned by the server, and then processes it. XMLHttpRequest is itself a constructor that generates instances using the new command. He doesn’t have any parameters.

var xhr = newXMLHttpRequest(); Once you create an instance, you can use the open () method to make HTTP requests. xhr.open('GET'.'http://www.baidu.com'.true); The code above makes a GET request to the specified server url.Copy the code

Whenever the instance object changes state during communication, its readyState property changes value. Each time this value changes, the readyStateChange event is triggered.

The use of the readyState

var xhr = new XMLHttpRequest();
if (xhr.readyState === 4) {
  // The request ends, processing the data returned by the server
} else {
  // "Loading......" is displayed.
}
Copy the code

In the code above, when xhr.readyState is equal to 4, the HTTP request made by the script has been successful. In other cases, the HTTP request is still in progress.

XMLHttpRequest. ReadyState returns an integer, represent the current state of the instance objects. This property is read-only. It may return the following values.0, indicating that the XMLHttpRequest instance has been generated, but the instance's open() method has not yet been called.1, the open() method has been called, but the send() method of the instance has not been called. You can still use the setRequestHeader() method of the instance to set the HTTP request header.2, indicating that the instance's send() method has been called and that the header and status code returned by the server have been received.3Is receiving the body part of the data from the server. At this point, if the responseType property of the instance is equal to text or an empty string, the responseText property contains some of the information that was received.4"Indicates that the data returned by the server has been received completely or the receiving fails.Copy the code

3.XMLHttpRequest.onreadystatechange

You then specify a callback function that listens for changes in communication state (the readyState property). ajax.onreadystatechange = handleStateChange; function handleStateChange(){ //….. } In the code above, the listener function handleStateChange is called whenever the state of the XMLHttpRequest instance changes. Once you get the data back from the server, AJAX doesn’t refresh the entire web page, but updates only the relevant parts of the web page without interrupting what the user is doing.

XMLHttpRequest.readyState