ajax请求解析

ajax

ajax请求执行步骤

   $.ajax({
            url:"",
            type:"post",
            data:{
                userName:a.value,
                passWord:b.value
            },
            success:function(data){
                // 当请求成功，会执行此函数
                //{}
                if(data.status===0){
                    // 请求成功
                }else if(data.status==1){
                    //该用户未注册
                }else if(data.status==2){
                    // 密码输入错误
                }
            }
        })
       

ajax的readState

 // script的src  img的src   link   浏览器的url地址栏； ajax
        // XMLHttpRequest 是一个内置的类；
        //1. 创建了一个ajax的实例；
        let xhr = new XMLHttpRequest;
        console.log(xhr.readyState);
        //2.请求方式，请求路径，同步异步；
        xhr.open("get","11.复习.html",false);
        console.log(xhr.readyState);
        //3.监听readystate发生改变的方法；
        xhr.onreadystatechange=function(){
            // 如果是同步，只输出4；如果是异步会输出2 3 4；
            // 如果是同步，如果请求不完，不会执行这个回调，但是readyState也会发生2-->3-->4的变化，只是不能执行而已；等上面执行完，那么readyState已经变成了4；所以只会输出结果4；
            // readyState不同，说明请求进行到了不同的阶段；
            //console.log(xhr.readyState);
            if(xhr.readyState===4&&/^2\d{2}/.test(xhr.status)){
                // 说明数据已经传输到了客户端
            }
        }
        //4.发送请求
        xhr.send();
        // xhr.readyState : 0 1 2 3 4;代表了ajax不同的实例状态；
        // readyState :代表了该请求进行到了不同的阶段；
        // 0 : 创建ajax实例成功；
        // 1 : 确定好了请求的方式，请求的路径以及同步异步；
        // 2 : 服务器已经接受到了客户端的请求，并且把响应头传给了客户端；
        // 3 : 服务器正在向客户端发送数据
        // 4 ：客户端全部接受到了数据，那么状态变成4； 

ajax的状态码

  let xhr = new XMLHttpRequest;
        console.log(xhr.readyState);
        //2.请求方式，请求路径，同步异步；
        xhr.open("get","11.复习.html",false);
        console.log(xhr.readyState);
        //3.监听readystate发生改变的方法；
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&&/^2\d{2}/.test(xhr.status)){
                
            }
        }
        //4.发送请求
        xhr.send();

        // 1.readyState
        // 2.status ： 都是xhr这个实例上的一个属性名，当这个实例的请求操作进行到不同阶段时，会不断更改readyState;当请求回来以后，这个请求就会更改这个实例的status,来表示该请求的结果；
        // 200 : 成功
        // 301 : 永久重定向 ；将域名重定向一个新的域名上;
        // 304 : 有缓存
        // 307:  临时转移
        // 400 : 报文存在语法错误
        // 401 : 请求需要验证
        // 403 ：没有权限访问
        // 404 : 路径错误
        // 500 : 服务器的未知错误
        // 503： 超负荷；当用户的访问量超过服务器承受的最大用户量；负载均衡【node】

ajax的请求方式

   let xhr = new XMLHttpRequest;
        console.log(xhr.readyState);
        //2.请求方式，请求路径，同步异步；
        xhr.open("post","11.复习.html",false);
        //3.监听readystate发生改变的方法；
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&&/^2\d{2}/.test(xhr.status)){ 
            }
        }
        //4.发送请求
        xhr.send({username:"aaa"});

        // 前端： 请求头请求体
        // 后端： 响应头响应体

        // 笔试题和面试题
        // 1. get : 一般用于获取数据(获取订单、获取所有用户)
        //   1)： get请求传参通过地址栏传参，把数据拼接到url问号的后面
        //   2)： 各个浏览器对地址栏url大小由要求，不可以无限传参；IEurl控制4Kb
        //   3):  直接将数据暴露在地址栏上，安全性较低
        //   4)： get请求会走缓存，如果不想走缓存，在url的后面拼接一个随机的时间戳；
        // 2. post ：一般用于向服务器发送数据（登录，注册，提交订单...）
        //   1) : post传递数据是放到请求体中，传递给服务器
        //   2) ：数据大小没有要求
        //   3) : 存放在请求体中，安全系数高
        //   4) : post请求不走缓存

        // delete : 删除操作
        // head 
        // put 


        $.ajax({
            url:"data.json",
            type:"get",// 如果不传参数，默认会走get请求
            data:{username:11,password:22},
            async:false,// 如果不写，默认是异步
            //cache:false,// 默认会走缓存，如果是false，是不走缓存的
            success:function(data){
                // data: JSON格式的对象；
            },
            error:function(){
                // 如果请求失败，会执行这个函数
            }
        })

ajax的同异步

 let  xhr  = new XMLHttpRequest;
        xhr.open("get","xxx.html",false);// true :异步 false 同步;
        xhr.onreadystatechange=function(){
            console.log(xhr.readyState);
        }
        xhr.send();// 发送请求
        console.log(100);

        // 同步： 4 100；
        // 异步：100 2  3  4；
        // 同步异步的应用场景
        // 1. 异步：
        // 打开首页有十几个请求；如果该请求跟其他请求的数据没有关系，那么一般用异步；
        // 2. 同步： 如果一个请求回来的数据会作为下一个请求的参数，这时第一个请求完成以后再发第二个请求，那么第一个请求应该用同步；

        // JS本身是一个单线程；但是浏览器是多线程；浏览器可以同时发送处理多个请求；
        //能用异步就别用同步；
        $.ajax({
            url:"data.txt",
            async:true,
            success:function(data){
                $.ajax({
                    url:"data.txt",
                    data:a.a,
                    success:function(data){
                        $.ajax({

                        })
                    }   
                })
            }
        })
        $.ajax();// 1s
        $.ajax();// 2s
        $.ajax();// 3s
        // 最终就需要3秒；  
        // promise       
        
        

ajax设置请求头

 // 有些请求需要通过请求头传递给后端一些数据或指责一些请求信息；请求头比请求体要早到达服务器，服务器可以根据请求头的信息，进行相应的处理；
        // 一般情况下，会将请求的cookie放在请求头中，传递给服务器；
        let  xhr  = new XMLHttpRequest;
        xhr.open("get","xxx.html",false);
        xhr.onreadystatechange=function(){
            console.log(xhr.readyState);
        }
        // 当真正的工作中，cookie是后端生成的；
        xhr.setRequestHeader("Cookie","headertest");
        // 在发送请求之前设置这些请求头的信息
        xhr.send();  

jquery的ajax

ajax的参数

   // ajax都可以传递什么参数
    $.ajax({
        url:"data.txt",
        type:"get",
        async:false,// async : 同步异步，如果不写，默认是异步；
        cache:false,// 默认走缓存，true是走缓存，false是不走缓存；
        data:{},
        dataType:"json",// 请求来的数据格式
        success:function(data){
            // 当请求成功执行的回调函数;并且数据传递给这个回调函数的实参；
            // 默认是json格式的对象
        },
        error:function(){
            // 请求失败执行的回调函数
        },
        beforeSend:function(xhr){
            // 在发送请求之前，执行回调；一般用于设置请求头；
            // xhr: 就是ajax的实例
            xhr.setRequestHeader();
        },
        context:document.body,
        complete:function(){
            // 不管成功还是失败，都要调用这个方法；
        },
        timeout:1000,// 设置请求的超时时间；
        username:"",
        password:"",// 请求认证的用户名和密码
        xhr:function(){

        }
    })

    

promise下的ajax

    promise : 解决异步回调地狱的一种方案；
        第二个请求需要等到第一个请求成功以后才能执行，这种无限嵌套的请求就是回调地狱；
        将异步的回调同步的展示出来；
	//1.
        $.ajax({
            url:"/login",
            type:"post",
            success:function(data){
                // data:{statusCode:0}// 这是后端返回的数据
                if(data.statusCode===0){
                    $.ajax({
                        url:"/order",
                        type:"get",
                        success:function(){
                        }
                    });
                }
            }
        });
       
        if(pathname==="/login/list"){
            // 登录
        }
        if(pathname==="/order"){
            // 请求订单
        }
	//2.
        let getJSON=function(str){
            // promise  和  ajax实例
            let promise = new Promise(function(resolve,reject){
                let xhr = new XMLHttpRequest();
                xhr.open("get",str,false);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState===4&&/^2\d{2}/.test(xhr.status)){
                        let val = JSON.parse(xhr.responseText);
                        resolve(val)
                    }else if(xhr.readyState===4){
                        reject()
                    }
                }
                xhr.send();
            })
            return promise;
            // 返回一个promise的实例；
        }
        getJSON("data.txt").then(function(data){
            console.log(data); 
        })
	//3.
        getJSON("/userList").then(function(data){
            // 把promise请求回来的数据，传递给then的回调函数中的参数
            return getJSON("/order")
        }).then(function(data){
            return getJSON("/list")
        }).then(function(data){

        }).catch(function(){
            // 如果有任意一个请求失败，触发catch对应的回调；
        })