原生JavaScript實現Ajax

function ajax(){
    var xhr = null;

    //實例化XMLHttpRequest對象
    if(window.ActiveXObject){//ie5、ie6
        xhr = new Active XObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }

    //通過open方法初始化XMLHttpRequest對象,指定請求的method、url、async參數,true表示異步加載(默認),false為同步
    xhr.open("GET","test.php",true);

    //注冊回調事件處理器,當XMLHttpRequest.readuyState發生變化時,激發readystatechange事件,從而調用這里注冊的處理器ajaxCallBack
    xhr.onreadystatechange = ajaxCallBack;

    //發送請求
    //GET請求
    xhr.send(null);

    //POST請求,添加請求的HTTP頭
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    //POST請求,參數為發送給服務器的請求數據
    xhr.send('String');
}

function ajaxCallBack(){
    if(xhr.readyState == 4){//請求完成加載
        if(xhr.status == 200){//響應已經成功
            console.log(xhr.responseText);//打印響應內容

            //在實際開發中,這里的響應內容一般為JSON格式數據,所以我們要先將JSON數據進行解析
            var res = xhr.responseText;
            var data = JSON.parse(res);

            if(data.status == 0){
                //進行數據操作
            }
            else{
                //打印后臺給的錯誤信息
                console.log(data.info);
            }
        }
    }
}

`

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容