Front and rear end separation

Posted by Welling on Sun, 02 Jan 2022 17:09:46 +0100

How to send HTTP requests with js

ajax (Asynchronous Javascript And Xml), commonly known as ajax, refers to sending HTTP requests through js and processing the resulting responses

There are many kinds of ajax, and we can use one of them: XMLHttpRequest object for processing

var xhr = new XMLHttpRequest();
xhr.open("GET". " /user-list.json");//Send GET or POST
xhr.send(); /Send request

For security, ajax is only allowed to be sent under the same domain page by default, such as www.baidu.com COM / Hello, only available at www.baidu.com Send ajax on the page of COM

How to process the received response

XMLHttpRequest provides several events, but only cares about the load event

oReq.addEventListener("load", reqListener);
oReq.onload = reqListener;

When the response is successful:

xhr.onload = function(){...}

xhr. Bind processing logic for XHR's load event before send()

xhr.onload = function() {
xhr.responseText;//Get response body
this.responseText;//Get response body
//xhr == this;
};

Advantages of JSON
In js, you can directly get js objects, arrays and other types of data through text in json format

JSON.parse(json text);//Parse JSON text to get js data

xhr.onload = function () { 
    var r = JSON.parse(this.responseText); 
    console.log(r); 
}

Array style

Combined with the function of modifying DOM + ajax of JS, we can use js to obtain data from the back end and modify the effect of page display!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>send out ajax</title>
</head>
<body>
  <table border="1">
      <thead>
          <tr>
              <th>ID</th>
              <th>full name</th>
              <th>Age</th>
          </tr>
      </thead>
      <tbody>

      </tbody>
  </table>

  <script>
      var tbody=document.querySelector("tbody");
      alert("Next, initiate a request to the backend");
      //Ready to send get / user list JSON request
      var xhr=new XMLHttpRequest();
      xhr.open("GET","/user-list.json");
      xhr.onload=function(){
          alert("The server responded successfully. Next, modify DOM structure");
          var userList=JSON.parse(this.responseText);
          console.log(userList);

          //Traverse userList
          for(var i in userList){
              var user=userList[i];
              console.log(user);
              alert("Click to add a new user to table in");

              //When you modify the DOM tree, the browser is not guaranteed to see the modification immediately
              var html=`<tr><td>${user.uid}</td><td>${user.name}</td><td>${user.age}</td></tr>`
              tbody.innerHTML+=html;
          }
          alert("All users have been added to table In, the utilization is realized js Effect of dynamically generating web content");
      }
      xhr.send();
  </script>
</body>
</html>