JQAjax+Promise封装方法

一、ajax

ajax 全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML） 是指一种创建交互式网页应用的开发技术、改善用户体验，实现无刷新效果。

优点：
a、不需要插件支持
b、页面无刷新，使用异步方式与服务器通信，具有更加迅速的响应能力，优秀的用户体验
c、提高Web程序的性能
d、可以把以前一些服务器负担的工作转到客户端，利用客户端闲置的能力来处理，减轻服务器的负担，由于ajax的原则是“按需取数据”，所以就可以最大程度的减少冗余请求，提高性能。

缺点：
a、破坏浏览器“前进”、“后退”按钮的正常功能，可以通过简单的插件弥补 。
b、对搜索引擎的支持不足。
c、安全问题：ajax暴露了与服务器交互的细节。

二、Promise

Pomise是es6中的一个异步处理对象，从它可以获取异步操作的消息，特点：

1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending(进行中)、fulfilled(已成功)和rejected(已失败）。

2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。

var  param = {
    index_1: 1
};

var ajax = function (methods, url, param) {

    return new Promise(function (resolve, reject) {
        $.ajax({
            type: methods,
            url: url,
            data: param,
            dataType: "json",
            success: function (data) {
                resolve(data);
            },
            error: function (error) {
                reject(error)
            }
        });
    }
    )
};
var con = "";
ajax("GET", 'data.json', param).then(function (res) {  
 // 启动第一个任务
 // 处理第一个异步任务的结果(每次调用then都会返回一个新创建的Promise对象
    // console.dir(res[1].name);

    $.each(res, function (ket, val) {
        con += "<label>姓名：" + val.name + "</label><br/>"
    });
    $("#div1").html(con);

    var param2 = res[0];
    return ajax('GET', 'data2.json', param2);       // 启动第二个任务
}).then(function (data2) {                          //处理第二个异步任务的结果
    // console.log(data2[0].name);
    var name = "<label>姓名：" + data2[0].name + "</label>";

    $("#div2").html(name);
});