Ajax

什么是Ajax？——就是 JS 这个语言和 服务端 交互的手段，是无刷新的浏览器http请求技术。在请求的时候性能略好于表单(局部刷新)，页面不会重新渲染，可以实现前后端分离。Ajax是异步的。

发送 Ajax 请求：

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

　　2. 配置请求信息 xhr.open(‘GET’, ‘./test.php’, true)

　　3. 发送请求 xhr.send()

　　4. 接受响应 xhr.onload = function () { console.log(xhr.responseText) }

　　　　　　　　xhr.onreadystatechange = function() { console.log(xhr.responseText) }

　　　　　　　　onload：状态码为4的时候会执行

　　　　　　　　onreadystatechange ：状态码改变的时候会执行

　　　　　　　　xhr.readyState：状态码

　　　　　　　　xhr.responseText：响应结果

　　　　　　　　xhr.status：http状态码

 

 

        //1. 获取 请求发送对象
        var xhr = new XMLHttpRequest();
        // 2. 配置 xhr 对象
        // xhr.open("请求方式" , "请求地址")
        // 请求地址 : 1. 相对路径; 当前路径下进行拼接
        //           2. 绝对路径; http://  https://  指向服务器位置; 在开发之中常用的方式
        xhr.open("GET" , "./03_data.php");
        // 3. 发送请求
        xhr.send( null );
        // 4. 响应接收
        // 用事件接受 : level1 => 原始版本的ajax , level2 => 进阶版本的ajax; 事件可能触发 3 ~ 4 次;状态码 是 0 1 2 3 4 ;4 表示成功
        xhr.onreadystatechange = function(){
            // 只要判定成功状态即可，其他的情况不考虑
            if( xhr.readyState === 4){
                //数据请求成功;取出相应数据
                console.log(xhr.responseText)
            }
        }

Ajax携带数据的请求发送：

            var xhr = new XMLHttpRequest();
            // GET 发送数据 数据的拼接规则;
            // url + ? : 表示后面都是需要传递的数据;
            //        key=value : 一组数据;   username=ele.value;
            //                 &key2=value : 第二组数据; 可用& 去链接多条数据;
            var url = "./03_data.php";
            url += "?"; //表示后面全部都是数据了;
            url += "username=" + username_ele.value;
            url += "&"; // 两条数据之间必须用 & 进行分割;
            url += "password=" + password_ele.value;

            xhr.open("GET" , url);
            xhr.send( null );
            xhr.onreadystatechange = function(){
                if( xhr.readyState === 4 ){
                    // console.log(xhr.responseText);
                    console.log(xhr.responseText);
                }
            }

Ajax数据响应的格式：

var res = JSON.parse(xhr.responseText);

 

完整代码：

　　链接：https://pan.baidu.com/s/126s15BT6dgi8BZRsiM7B6g 

　　提取码：1234

 

Ajax的状态码：

　　0 => 创建 ajax 对象成功

　　1 => 配置请求信息成功

　　2 => 响应已经回到浏览器

　　3 => 浏览器正在解析响应体

　　4 => 响应体解析完毕可以使用了

Ajax的兼容处理：

        // 兼容: 1. xhr 的创建
        //         2. 响应接受的事件处理函数
        var xhr = null;
        if(typeof XMLHttpRequest === "function"){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");　　//老版本IE
        }
        xhr.open("GET","./data.php");
        xhr.send(null);
        xhr.onreadystatechange =  function(){
            // 判定：1. readyState 无论请求成功与否 最终的状态码都会变成4   
　　　　　　　　　　　　2.stauts  http状态码 (2系列都表示成功)
            if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.stauts)){
                console.log(请求成功);
            }
        }

Ajax的封装：

完整代码：

　　链接：https://pan.baidu.com/s/1kARXv0jT28-LZuZk4Cg4Qg 

　　提取码：1234