day 24 Ajax（状态码、请求头、ajax封装）

1、xhr对象的属性

数据的发送

get：send（无参）

post：send（key1=value1&key2=value2...）

xhr.send([参数])

onreadystatechange:readystate的状态码发生改变，触发该事件，只有2,3,4的状态码会发生改变

    // readystate:xhr对象的状态码

    // 0:new了一个对象

    // 1:调用完open方法

    // 2:调用send方法,数据发送了出去

    // 3:数据发送到了服务器

    // 4:服务器解析完成，返回响应

responseText：返回响应内容

status：代表http协议是否通畅

2、AjaxPost

post传参：绝对不允许在open方法中拼接

1.open方法后设置请求头，将参数以from表单的方式发送

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

2.将真正的请求参数传入send

key1=value1&key2=value2

xhr.send("username="+this.value)

3、Ajax返回JSON

php文件中：

方法一：直接通过json字符串返回

echo '{"name":"laowang","age":18}'

方法二：通过php数组返回

$arr=["name"=>"laowang","age"=>6];

//json_encode将数组转换为json字符串

echo json_encode($arr);

3、封装Ajax函数

//功能:发送请求，接收响应
    //参数:
    // type:get/post 支持大小写
    // url:服务器地址
    // isAsyn:是否异步
    // data:请求参数
    // callBack:接收响应的回调函数

    function ajaxFun(type, url, isAsyn, data, callBack) {

        //1.创建对象
        let xhr = new XMLHttpRequest();

        type = type.toLowerCase();

        if (type == "get") {
            let urlParams = url;
            if (data != "") {
                //"6.ajaxFun?name=laowang&pwd=666"
                urlParams += "?" + data;
            }
            //2.
            xhr.open(type, urlParams, isAsyn);
            //3.
            xhr.send();
        } else if (type == "post") {
            xhr.open(type, url, isAsyn);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
        } else {
            console.log("类型错误");
        }

        //4.状态码事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //5.
                callBack(xhr.responseText);
            }
        }
    }

4、promise

    // promise作用:将函数嵌套调用的方式，改为平级调用，避免回调地狱问题。

    // 换而言之，功能未发生改变，换种语法传递回调函数。

    //promise语法:

    // 1.promise是一个对象

    // 2.promise通常放在一个函数体内

    // 3.将promise对象作为函数的返回值返回

//then是promise对象的一个方法

    //通过then方法把原来的回调函数传进去

    //Promise对象.then(callBack1,[callBack2]);

<script>    
// promise作用:将函数嵌套调用的方式，改为平级调用，避免回调地狱问题。
    // 换而言之，功能未发生改变，换种语法传递回调函数。

    //promise语法:
    // 1.promise是一个对象
    // 2.promise通常放在一个函数体内
    // 3.将promise对象作为函数的返回值返回

    function f1() {
        console.log("f1");
        let p = new Promise(function(callBack1) {
            callBack1();
        });

        return p;
    }

    function f2() {
        console.log("f2");
        let p = new Promise(function(callBack1) {
            callBack1();
        });

        return p;
    }

    function f3() {
        console.log("f3");
        let p = new Promise(function(callBack1) {
            callBack1();
        });

        return p;
    }

    function f4() {
        console.log("f4");
    }
    //then是promise对象的一个方法
    //通过then方法把原来的回调函数传进去
    //Promise对象.then(callBack1,[callBack2]);
    f1().then(f2).then(f3).then(f4); //f1(f2);
</script>