ajax

            xhr.onreadystatechange = function(){
            //当xhr的readystate属性发生了改变，则触发事件。
            //readystate状态，
            //0表示=》xhr对象已经创建，但是没有初始化，相当于new了一个对象，但是没有open();
            //1表示，xhr已经调用open(),
            //2表示，xhr已经发出了ajax请求，调用了send()的时候。
            //3表示，数据已经返回了部分
            //4表示，数据已经全部返回
                if(xhr.readyState !== 4){
                    return;
                }
                if(xhr.status >= 200 && xhr.status <= 300){
                    //数据存放在了xhr.responseText的属性中(String)
                    document.querySelector("h1").innerHTML = xhr.responseText;
                }else{
                    console.error("请求出错");
                }
            }

        xhr.onreadystatechange = function(){
            if(xhr.readyState !== 4){
                return;
            }
            if(xhr.status >= 200 && xhr.status <= 300){
                //我们需要一个JOSN的对象，
                var resp = JSON.parse(xhr.responseText);
                if(resp.result){
                    console.log("ok");
                }else{
                    console.log("error");
                }
            }else{
                console.error("请求出错");
            }
        }

        x= getDate();
        y = getMoreDate();
        z = getMoreDate();
        //如果当x还在数据传输中，没有完成数据返回，就被y调用，就会出现错误。
        //如果使用一层一层的回调，会导致回调层级特别深，开发维护成本高，所以在es6中提出了promise对象。
        getDate(function(x){
            getMoreDate(x,function(y){
                getMoreDate(y,function(z){
                    process z;
                })
            })
        })

            var prom = new Promise(function(resolve,reject){
                setTimeout(function(){
                    var num = Math.floor(Math.random() * 100);
                    if(num % 2 === 0){
                        resolve(num);
                    }else{
                        reject(num);
                    }
                },3000)
                
            });
            //使用promise的一个回调,成功的时候会调用then函数，失败的时候调用catch函数。
            prom.then(function(num){
                console.log("resolve:" + num);
            }).catch(function(num){
                console.log("reject:" + num);
            });

            var article = "";
            $.get("../para/p1.txt",function(p1){
                article += p1 + "<br />";
                $.get("../para/p2.txt",function(p2){
                    article += p2 + "<br />";
                    $.get("../para/p3.txt",function(p3){
                        article += p3 + "<br />";
                        $.get("../para/p4.txt",function(p4){
                            article += p4 + "<br />";
                            $("h1").html(article);
                        })
                    })
                })
            })

        function getDate1(){
            return new Promise(function(resolve,reject){
                $.get("../para/p1.txt",function(p1){
                    resolve(p1);
                })
            })
        }    
        function getDate2(){
            return new Promise(function(resolve,reject){
                $.get("../para/p2.txt",function(p2){
                    resolve(p2);
                })
            })
        }    
        function getDate3(){
            return new Promise(function(resolve,reject){
                $.get("../para/p3.txt",function(p3){
                    resolve(p3);
                })
            })
        }    
        function getDate4(){
            return new Promise(function(resolve,reject){
                $.get("../para/p4.txt",function(p4){
                    resolve(p4);
                })
            })
        }        
        var article = "";
        //getDate返回了一个promise对象，所以可以调用then方法
        getDate1().then(function(p1){
            article += p1 + "<br />";
            return getDate2();
        }).then(function(p2){
            article += p2 + "<br />";
            return getDate3();
        }).then(function(p3){
            article += p3 + "<br />";
            return getDate4();
        }).then(function(p4){
            article += p4 + "<br />";
            $("h1").html(article);
        });

            //这个方法不受同源策略的限制。也可以用js生成方法名，比较灵活
                function getData(da1){
                    console.log(da1);
                }
                var script = document.createElement("script");
                script.id = "JSONP";
                script.src = "../js/JSONP.js";
                document.body.appendChild(script);

            function getData(data){
                var script = document.querySelector("#JSONP");//选择刚创建的jsonp
                script.parentNode.removeChild(script);//因为input的keyup事件，所以每次输入都清除掉上一次的结果
                $("ul").html("");//同时也清楚掉ul里面的结果。
                for(var i = 0;i < data.g.length;i++){//因为返回的是对象，遍历对象
                    for(var index in data.g[i]){//用for in 方法遍历对象
                        var p1 = data.g[i][index]; //将对象的值写入p1
                        var p2 = index;}
                        $("<li>"+ p1 + "--" + p2 +"</li>").appendTo("ul");
                    }
            }
            function getList(wd){
                var script = document.createElement("script");//创建一个script
                script.id = "JSONP";//id
                script.src = "https://www.baidu.com/sugrec?&prod=pc&cb=getData&wd=" + wd;
                document.body.appendChild(script);//将jsonp文件放入树中；
            }
            $("input").keyup(function(){
                var wd = $(this).val();
                getList(wd);
            });

            $.get("http://localhost/cors/cors.php",function(data){
                console.log(data);
            })