Ajax,Promise以及结合

Ajax：只刷新局部页面，异步操作，XMLHttpRequest对象，发送请求到服务器并返回结果

创建一个对象

 var xmlHttp;  // 保存  XMLHttpRequest保存对象
        //创建对象
        function createXMLHttpRequest() {
            if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();//网景浏览器创建方式
            } else if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE
            }

        }

  //当窗口一加载
        window.onload = function () {
            getTime();

        }

        function getTime() {
            createXMLHttpRequest();//创建请求对象
            xmlHttp.onreadystatechange = handleStateChange;//绑定回调函数，当服务器有响应时，自动调用此函数
            xmlHttp.open("GET", "tools.action?op=date");//打开请求
            xmlHttp.send();//发送
        }

        function handleStateChange() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var jsonObject = eval("(" + xmlHttp.responseText + ")");
                if (jsonObject.code == 1) {
                    document.getElementById("time").innerHTML = "当前系统时间为：" + jsonObject.data;
                }
            }
        }

readyState状态： 

0没初始化  open()

1开始发送请求 send(content) //如果是post 里面就是post的请求参数

 2发送请求完成 

3读取响应 

4读取响应结束 

只有当readyState到达4的时候 才表示请求和响应成功

status是http状态码：200 服务器正常 4xx都是没有资源 5xx表示服务器内部错 3xx 302重定向 服务器要求客户端重新发一个请求到另一个地址取数据

Promise：

Ajax是异步请求的，即主程序再跑的同时我们需要发送一个请求给服务器完成操作，但是不能影响到主程序的运行。但是关于异步调用，如果有多个异步请求且保证顺序，就得用嵌套调用，那样就很麻烦也很难维护，这时候Promise登场 

  var a = new Promise(function (resolve, reject) {
        //resolve(1);//成功时候调用resolve
        reject(100);//失败调用reject
    });
    console.log(a);//这个时候a还没有执行
    
    a.then(function (value) {//开始执行 如果传的是resolve就走这里
        console.log("成功:"+value);
        return value;    //必须要有返回值 不然链式调用就会中断，后面没有值来运行
    },function(errorvalue){        //如果传的是reject就走这里
        console.log("失败:"+errorvalue);
        return errorvalue;        //把值递给下面一个then
    }).then(function (value) {        //拿到了100
        console.log(value * 2);       //200
        
    }).then(function (value) {//没有返回值 这段就undefined了
        console.log(value);
    })
    
    console.log(a);

一个异步完成后return一个新的异步请求继续调用就把Ajax和Promise结合起来

创建一个promise对象里面是ajax的请求操作

function promiseAjax(method, url, params) {
            var pp = new Promise(function (resolve, reject) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState != 4) return;
                    if (xhr.status == 200) {
                        resolve(xhr.responseText);
                    } else {
                        reject("出错了")
                    }
                }
                xhr.open(method, url);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(params);
            });
            return pp;
        }

 创建一个op为date的promise对象 then激活后打印并且返回出一个op为number的一个新的promise对象继续发送请求 如果是resolve 就打印 如果是reject就弹框出错误信息

 //版本三 链式调用
        promiseAjax("POST", "tools.action?op=date", null).then(function (data) {
            var jsonObject = eval("(" + data + ")");
            document.getElementById("time").innerHTML = "当前系统时间为：" + jsonObject.data;
            return promiseAjax("POST", "tools.action", "op=number");
        }, function (info) {
            console.log("错误信息" + info);
        }).then(function (data) {
            var jsonObject = eval("(" + data + ")");
            if (jsonObject.code == 1) {
                document.getElementById("userid").innerHTML = jsonObject.data;
            } else {
                alert("生成id错误" + jsonObject.msg);
            }

        });