ajax-原生

ajax 全称为“Asynchronous JavaScript and XML”

ajax 其实指异步 JavaScript 和 XML，是一种创建交互式网页应用的网页开发技术简单来说就是可以使网页实现异步更新

ajax 请求四步骤

• 请求初始化

    let xhr = new XMLHttpRequest();

• 建立连接

    xhr.open(请求方式，地址，true) 默认 true 异步 请求方式 get 传参参数绑在地址后面 post 传参 参数放在 send() 方法中 

• 发送

    xhr.send()     // post  xhr.send( 参数) send 中的参数只能是字符串 

• 监听响应

    xhr.onreadystatechange=()=>{
                //readyState 0: 初始化请求 1: 建立连接 2: 请求发送成功 3: 服务器接收你的请求并处理  4: 服务器返回数据，结束响应
                if(xhr.readyState ===4){
                    //status  状态   200  成功
                    if(xhr.status===200){
                        //xhr.responseText  服务端给你返回的数据
                        // console.log(xhr.responseText)
                    }
                }
            }

注意：如果请求方式是 post，需设置请求头

    xhr.setRequestHeader("content-type","application/json") application/x-www-form-urlencoded

兼容 ie

    function createXml(){
        let xmlHttp;
        if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // 兼容 IE
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlHttp;
    }

ajax 封装

    function ajaxFn(type,url,data){
        // 请求初始化  创建请求体
        let xhr = new XMLHttpRequest();
        // let xhr = createXml();
        // 设置请求方式   请求地址
        xhr.open(type,url);
        if(type==='get'){
            // 发送
            xhr.send();}else if(type === 'post'){
            // 设置请求头   字符串 /json 格式;
            if(typeof data =="object"){xhr.setRequestHeader("content-type","application/json")//JOSN.stringify({a:1,b:2,c:3})
                xhr.send(JSON.stringify(data));
            }else{xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")// a=1&b=2&c=3
                xhr.send(data);
            }    
        }
        // 监听
        xhr.onreadystatechange=()=>{if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.responseText);
            }
        }
    }