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);
            }
        }
    }