2020.6.30：ajax 四个步骤、JSON.parse转换对象、封装ajax、JQuery-ajax

今日学习内容：

# ajax 的四个步骤

1. 创建 XMLHttpRequest 这个对象，这个步骤中需要注意兼容处理

var xhr = null;
if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
} else {
// IE6浏览器
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. 准备发送（请求的方式，请求的地址，同步还是异步：true异步、false同步）

// xhr.open("get", "checkUsername.php?username=" + username, true);
xhr.open("post", "checkUsername.php", true);

3. 执行发送

// xhr.send(null);
var param = "username=" + username;
// 对于 post 请求来说的话，我们的参数应该放在请求体中
// 设置 xhr 的请求头信息，这个步骤仅仅是针对于 post 请求才有的
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(param);

 4.  设置回调函数

// 4.  设置回调函数
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            // 得到数据
            // xhr.responseXML
            var result = xhr.responseText;
            console.log(result);
            document.getElementById("result").innerText = result;
        }
    }
};

 # json 数据类型转换：

1. 把字符串转换成对象：

 result = JSON.parse(result);

 # 封装 ajax 函数 （类似于 JQuery.ajax();）

function myAjax2(obj) {

    var defaults = {
        type: "get",
        url: "#",
        dataType: "json",
        async: true,
        data: {},
        success: function (result) {
            console.log(result);
        }
    };

    // obj 中的属性，覆盖到 defaults 中的属性
    // 1. 如果有一些属性值尺寸在 obj 中，会给 defaults 中增加属性
    // 2. 如果有一些属性在 obj 和 defaults 中都存在，会将 defaults 中的默认值覆盖
    // 3. 如果有一些属性只在 defaults 中存在，在 obj 中不存在，这时候 defaults 中将保留预定义的默认值
    for (var key in obj) {
        defaults[key] = obj[key];
    }

    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 得到 params
    // data: {
    //     uname: "zhangsan",
    //         age: "18"
    // }
    // name = zhangsan & age =18
    var params = "";
    for (var attr in defaults.data) {
        params += attr + "=" + defaults.data[attr] + "&";
    }
    if (params) {
        params = params.substring(0, params.length - 1);
    }
    if (defaults.type == "get") {
        defaults.url += "?" + params;
    }
    xhr.open(defaults.type, defaults.url, defaults.async);

    if (defaults.type == "get") {
        xhr.send(null);
    } else if (defaults.type == "post") {
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }

    if (defaults.async) {
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var result = null;
                    if (defaults.dataType == "json") {
                        result = xhr.responseText;
                        result = JSON.parse(result);
                    } else if (defaults.dataType == "xml") {
                        result = xhr.responseXML;
                    } else {
                        result = xhr.responseText;
                    }
                    defaults.success(result);
                }
            }
        }
    } else {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var result = null;
                if (defaults.dataType == "json") {
                    result = xhr.responseText;
                    result = JSON.parse(result);
                } else if (defaults.dataType == "xml") {
                    result = xhr.responseXML;
                } else {
                    result = xhr.responseText;
                }
                defaults.success(result);
            }
        }
    }
};

调用：

window.onload = function () {
            var username = document.querySelector("#username");
            username.onblur = function () {
                var usernameValue = username.value;
                var type = "get";
                var url = "./server/checkUsername.php";
                var params = "uname=" + usernameValue;
                var dataType = "text";
                myAjax2({
                    url: url,
                    data: { uname: usernameValue },
                    dataType: "text",
                    success: function (result) {
                        var username_result = document.querySelector("#username_result");
                        if (result == "ok") {
                            username_result.innerText = "用户名可以使用";
                        } else {
                            username_result.innerText = "用户名已经被注册";
                        }
                    },
                    async: false
                });
            };
        };

# JQuery 关于 Ajax 的三个方法:

1. $.ajax()：主要使用这个

$.ajax({
        url: url,
        type: type,
        data: {
            uname: usernameValue
        },
        async: true,
        dataType: "text",
        success: function (result) {
            var username_result = document.querySelector("#username_result");
            if (result == "ok") {
                username_result.innerText = "用户名可以使用";
            } else {
                username_result.innerText = "用户名已经被注册";
            }
        }
    });


2. $.get()：

  $.get(url + "?" + params, function (result) {
                    console.log(result);
   });


3. $.post()：

$.post(url, { e: emailValue }, function (result) {
                    console.log(result);
        });