How does javascript-AJAX implement Asynchronization?

Source: Internet
Author: User
I have seen the source code of the AJAX method, that is, the AJAX method calls a callback and executes the callback first. What is the difference between this and the common reference function? So where is the AJAX asynchronous callback experience? I have read the AJAX method source code, that is, call a callback in the AJAX method. Execute the AJAX method before executing the callback, what is the difference between this and common reference functions? So where is the AJAX asynchronous callback experience;

Reply content:

I have seen the source code of the AJAX method, that is, the AJAX method calls a callback and executes the callback first. What is the difference between this and the common reference function? So where is the AJAX asynchronous callback experience;

The above ones are really not correct.
First, the browser's js engine is single-threaded, and execution of a time-consuming operation will inevitably hinder the subsequent code execution of the thread (such as waiting for the response of the network request ). Some languages use the method of opening a subthread and putting time-consuming operations into the subthread for execution to solve this problem.
The js engine itself does not support multithreading, but the browser basically has three threads: js engine thread, event trigger thread, and http request thread. After the next two threads are triggered, the corresponding callback function will be put into the execution queue of the js engine thread for queuing and waiting. As long as the js engine thread is idle, the callback function added to the queue will be executed in turn. Of course, the execution of these callback functions still hinders the thread.

The page does not refresh the new data request, and the returned data uses JavaScript to operate the DOM. the user experience is good. The js function is called only for front-end operations without interaction with the server. AJAX is a combination technology, to improve the user experience, you do not need to refresh the entire page every time you request it, that is, the js operation dom performs a partial refresh

In my opinion, there is no difference in nature. One is an input function, and the other is similar to the object-oriented method of multi-state overwriting (execution of default or custom overwriting)

  1. Upload reference
    For example:
    // Obtain user data
    Function getDate (){
    }

    // Login
    Function login (cb ){

    // Login logic... // after successful login, execute callback reference if (cb & typeof cb === 'function') {cb ();}

    }

    Login (getDate );

  2. Ajax may be implemented internally (not sure, just simulate)

    Function XMLHttpRequest (){
    }

    // Either the default or none can be found. You just need to judge it when the send callback is executed.
    XMLHttpRequest. prototype. onreadystatechange = function (){};

    XMLHttpRequest. prototype. get = function (url ){

       this.url = url;

    };

    XMLHttpRequest. prototype. send = function (){

    // Send an http request, modify readyState, and so on // from this. url to obtain data // call onreadystatechange in a timely manner. if (this. onreadystatechange & typeof this. onreadystatechange === 'function') {this. onreadystatechange ();}

    };

    Var ajax = new XMLHttpRequest ();
    Ajax. get (url );
    Ajax. onreadystatechange = function (){

    // Overwrite the default one, or redefine it if no default one exists.

    };
    Ajax. send ();

You can switch to a 2G network to see the difference. When the request is slow, the following code will continue to be executed. If you use synchronization, just wait.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.