Encapsulating Ajax and Promise

encapsulating Ajax and Promise First, Ajax

Ajax is called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML) refers to the development of interactive Web applications to create a technology, improve the user experience, achieve no refresh effect.

Advantages:
A, no plug-in support required
b, the page does not refresh, the use of asynchronous way to communicate with the server, with more rapid response capabilities, excellent user experience
C, improve the performance of the Web program
D, you can put some of the server before the work of the client, the use of idle client capacity to deal with, reduce the burden on the server, because the principle of Ajax is "on-demand data", so you can maximize the reduction of redundant requests, improve performance.

Disadvantages:
A, to destroy the browser "forward", "back" button normal function, you can make up through a simple plug-in.
b, lack of support for search engines.
C, security issues: Ajax exposes the details of interacting with the server. Second, Promise

Pomise is an asynchronous processing object in Es6, from which you can obtain messages for asynchronous operations, characterized by:

1 The state of the object is unaffected by the outside world. The Promise object represents an asynchronous operation with three states: pending (in progress), fulfilled (succeeded), and rejected (failed).

2 Once the state has changed, it will not change, and can get the result at any time. There are only two possible changes in the state of the Promise object: from pending to fulfilled and from pending to rejected. three, Ajax and promise encapsulation

//(native JS) encapsulation Promise object and Ajax process var jsgetajaxpromise = function (param) {return new Pr
            Omise (function (resolve, reject) {var xhr = new XMLHttpRequest ();
            Xhr.open (' Get ', Param.url, true);
            Xhr.onload = resolve;
            Xhr.onerror = Reject;
        Xhr.send ();
    }//Call example var P1 = jsgetajaxpromise ({//Start the first task URL: ' cross-domain1.txt '//file address to obtain});
        P1.then (function (response) {//Process the result of the first asynchronous task (a newly created promise object is returned each time a call to then) Console.log (response);  Return Jsgetajaxpromise ({//Start the second task URL: ' Cross-domain2.txt '})}). Then (function (RESPONSE2) {//
        Processing the results of the second task Console.log (RESPONSE2); Return Jsgetajaxpromise ({//Start the third task URL: ' Cross-domain3.txt '})}). Then (function (RESPONSE3) {/
    /Process The results of the second task Console.log (RESPONSE3);
    ). catch (function (err) {Console.log (err); });

Rewrite as jquery implementation

    (jquery) encapsulates Promise objects and Ajax processes
    var jqgetajaxpromise = function (param) {return
        new Promise (function (Resolve, Reject) {
            $.ajax ({
                url:param.url,
                type: ' Get ',
                Data:param.data | | ',
                success:function (data) {
                    resolve (data);
                },
                error:function (error) {
                    reject (Error)
                }
            });
        });
    };
    Invokes the example
    var P2 = jqgetajaxpromise ({    
        URL: ' cross-domain1.txt '
    });
    P2.then (function (data) {      
        console.log (data);
        Return jqgetajaxpromise ({  
            URL: ' cross-domain2.txt '
        });
    Then (function (data2) {   
        console.log (data2);
    }). catch (function (err) {
        console.log (err);
    });

PS: Because Ajax is involved, all of the code in this article runs on the WAMP server, and the Cross-domain.txt file is a custom file.