Explore synchronous and asynchronous, Ajax, callback functions, Promise

Table of Contents

1. Introduction to Ajax

1. The concept of asynchronous and synchronized

2. Why is it said that synchronous requests will “reload the entire page”, while asynchronous requests “will only load part of the page”. What does this mean?

3. Functions and advantages of Ajax

Function

Advantage

4.Why is Ajax called asynchronous javascript and xml?

2.Ajax operation process

ask

response

3. Quick Start

Interpretation

Functions of the XMLHttpRequest object

4. Axios asynchronous library

Interpretation

1.Callback function

2. Callback Hell

3.Promise

(1) Promise objects have the following two characteristics:

(2) Return value of Promise object

(3) Calling method after asynchronous execution of Promise object

1. Introduction to Ajax

AJAX(Asynchronous JavaScript And XML) : Asynchronous JavaScript and XML

1. The concept of asynchronous and synchronized

Synchronization: After executing a function or method, it waits for the system to return a value or message. At this time, the program is blocked and will only continue after receiving the returned value or message. Execute other commands.

As soon as the server receives the client’s request, it responds immediately, so that the client can get the result in the shortest time. However, if there are multiple clients, or if one client sends frequent requests, the server cannot process them synchronously, which will cause Chungsai.

Asynchronous: After executing the function or method, there is no need to wait blockingly for the return value or message. You only need to delegate an asynchronous process to the system. Then when the system receives the return value or message, the system The asynchronous process of delegation will be automatically triggered to complete a complete process.

In an asynchronous request, when the server receives the request, it does not process it immediately. Instead, it puts the request into the task queue (or message queue) to wait for processing. This queuing operation does not process the request directly, but queues the request to wait for server resources and processing power. When the server is idle, the request will be taken out of the queue through the event loop or other mechanisms for actual processing. The processing of asynchronous requests is deferred and non-blocking.

?How to understand the bottom layer?

Similar to multi-threading, multiple threads run at the same time to compete for CPU resources, but what is different from multi-threading here is that there is a priority

Synchronous request>Asynchronous request

As long as a synchronous request is initiated, asynchronous requests will never be executed. The CPU will not issue thread resources to asynchronous, and synchronization will only use the main thread. Therefore, multiple synchronous requests will be executed in the same thread in order. Yes According to the request order, there are not multiple synchronous requests competing for resources concurrently, but simple single-thread execution.

And if there are multiple asynchronous requests issued at the same time, the CPU will allocate thread resources to each request, including the main thread, for true parallel processing. When the CPU resources are insufficient, there will be concurrent competition for thread resources.

2. Why is it said that synchronous requests will “reload the entire page”, And asynchronously “only part of the page will be loaded”, what does this mean?

In fact, when you open a page in the browser, the page is continuously rendered and loaded in the background, with the same priority as mentioned above.

Synchronous request>Rendering

As long as a synchronous request is initiated, rendering will not be performed (thread resources will not be allocated to the rendering operation), so in this case the rendering will stop, so you will feel the “loading” feeling. When the synchronous request process ends, the rendering will continue. ,At this time, there are new response resources, different pages are displayed, and asynchronous will not stop the rendering, which is equivalent to them being “level”. Under normal circumstances, asynchronous requests will not compete for the resources of the rendering thread. , when the asynchronous request ends, a new response resource is returned, and a different page is displayed.

At this time you may ask: Doesn’t this mean that the synchronous request will not reload, but will re-render the page and cause the page to be reloaded? But aren’t asynchronous requests always rendering? So why does it say that the entire page cannot be reloaded asynchronously?

In fact, these statements confuse the concepts of rendering and reloading the page. Rendering and reloading the page are two different concepts. Rendering the page is a continuous process. During the process, from the initial loading of the page to the user’s interaction with the page, operations such as partial refresh and asynchronous requests may be performed, but the entire page will not be completely reloaded. Reloading the page means reloading the entire page content, including re-obtaining resources, re-parsing HTML, re-calculating styles, re-laying out elements, and re-drawing. Generally, it will not be reloaded. So in this case, both synchronous requests and asynchronous requests are not actually reloading the page but re-rendering!

In fact, if you want to reload the page, both synchronous and asynchronous requests can be updated through JavaScript to jump to other web pages to reload the page, or you can use the reload page method in JavaScript to load this web page.So whether it is a synchronous request Both asynchronous requests and JavaScript can be used to load part or the entire page. Because asynchronous requests can be executed in parallel, they are often used to update part of the page, resulting in a better user experience. If they are all synchronous requests, it’s like if I shoot CF, I can only shoot without moving, or I can only move without shooting, just like a personal computer.

3. Functions and advantages of Ajax

function

1. Initiate an asynchronous request: It is often used to exchange data with the server and update part of the web page without reloading the entire page, such as: searching for Lenovo, verifying whether the user name is available, etc. wait…

2. Receive response data and update HTML through JavaScript code

Advantages

1. No plug-in support is required, the original js can be used.
2. Good user experience (You can update data without refreshing)
3. Reduce the burden on the server
4. Disadvantages: Search engine support is not enough, because the data is not on the page and cannot be searched by search engines.

4. Why is Ajax called asynchronous javascript and xml

AJAX mainly provides an asynchronous communication mechanism (that is, the function of initiating asynchronous requests and transmitting data), and how to process the data is completed by JavaScript. XML is a commonly used data format used to transmit and exchange data. However, it is now more commonly used to use JSON (JavaScript Object Notation) as the data exchange format because JSON is more lightweight and easier to process.

So why is Ajax called asynchronous javascript and xml? Ajax just initiates asynchronous requests and transmits data. Data processing is still javascript, and the transmission data type is json or xml. This definition does not mean that Ajax replaces the functions of javascript and xml, but the request Has the method been changed to asynchronous?

This understanding is incorrect

AJAX does not mean the realization of “asynchronous JavaScript and XML”, but a technology that uses JavaScript and XML or other formats to realize the entire asynchronous communication process. I call Ajax an asynchronous communication tool, in which the data processing and operation logic is composed of JavaScript takes care of that, and the data transfer format can be XML, JSON, or other formats.

2.Ajax operation process

request

1. The front end sends the data submitted by the user in JSON format through Ajax and sends an asynchronous request to the background

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1. Create core object
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2. Send request
    xhttp.open("GET", "http://localhost/Ajax_Demo/ajax_test1");
    xhttp.send();

    //3. Get response
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 & amp; & amp; this.status == 200) {
            alert(this.responseText);
        }
    };

</script>
</body>
</html>

xhttp.open("GET", "http://localhost/Ajax_Demo/ajax_test1");

xhttp.send();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--Introducing the js file of axios-->
<script src="js/axios-0.18.0.js"></script>
<script>
    //1.get request method
    axios({
        method:"get",
        url:"http://localhost/Ajax_Demo/ajax_test3?username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    })

    //2.post request method
    axios({
        method:"post",
        url:"http://localhost/Ajax_Demo/ajax_test3",
        data:"username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    })

    //1.get simplified
    axios.get("http://localhost/Ajax_Demo/ajax_test3?username=zhangsan").then(function (resp){
        alert(resp.data);
    })
    //2.post simplification
    axios.post("http://localhost/Ajax_Demo/ajax_test3","username=zhangsan").then(function (resp){
        alert(resp.data);
    })

</script>
</body>
</html>

function makeAjaxRequest(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { // Request completed
      if (xhr.status === 200) { // Response received successfully
        //Call the callback function and pass the returned data
        callback(null, xhr.responseText);
      } else {
        // If the response is not successfully received, call the callback function and pass the error message
        callback(new Error('Request failed'));
      }
    }
  };
  xhr.open('GET', url, true);
  xhr.send();
}

function handleResponse(error, response) {
  if (error) {
    console.error('Request failed:', error);
  } else {
    console.log('Request successful, data returned:', response);
  }
}

//Initiate an Ajax request and pass the callback function
makeAjaxRequest('https://api.example.com/data', handleResponse);

getUserInfo(function(userInfo) {
  getOrders(userInfo.id, function(orders) {
    getOrderDetails(orders[0].id, function(orderDetails) {
      processOrder(orderDetails, function(processedOrder) {
        saveOrder(processedOrder, function(savedOrder) {
          console.log("Order saved:", savedOrder);
        });
      });
    });
  });
});

var promise = new Promise(function(resolve, reject) {
    //Asynchronous processing
    // After processing, call resolve or reject
});

promise.then(function(data)){

}.catch(function(data)){

});

//When the execution is successful, the returned response data is placed in data,

getUserInfo()
  .then(function(userInfo) {
    return getOrders(userInfo.id);
  })
  .then(function(orders) {
    return getOrderDetails(orders[0].id);
  })
  .then(function(orderDetails) {
    return processOrder(orderDetails);
  })
  .then(function(processedOrder) {
    return saveOrder(processedOrder);
  })
  .then(function(savedOrder) {
    console.log("Order saved:", savedOrder);
  })
  .catch(function(error) {
    console.error(error);
  });