• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Ajax

开发技术 开发技术 2周前 (04-30) 10次浏览

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

发送 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) }

        //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");
        }
        xhr.open("GET","./data.php");
        xhr.send(null);
        xhr.onreadystatechange =  function(){
            // 判定:1. readyState 无论请求成功与否 最终的状态码都会变成4   
            2.stauts http状态码 (2系列都表示成功)
if(xhr.readyState === 4 && /^2d{2}$/.test(xhr.stauts)){ console.log(请求成功); } }

Ajax的封装

完整代码:


程序员灯塔
转载请注明原文链接:Ajax
喜欢 (0)