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