概念

ajax是前端常用技術，今天用原生js封裝了一個ajax函數，類似于jquery庫的$.ajax()函數，大家如果對jquery的ajax函數原理不太理解，可以參考這篇。

定義

var ajax=window.XMLHttpRequest? new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");

方法

1.open(method url async) 定義請求的方式 數據 同步異步
2.send(data) 發送數據
3.setsetRequestHeader() 設置請求頭部

事件

onreadystatechange 服務端對請求的響應

屬性

1.readyState 服務器對請求的處理進度
2.status 服務器對請求的響應
3.responseXML 獲得字符串形式的響應數據
4.responseText 獲得 XML 形式的響應數據

封裝函數

       var param = {
                    url:"response.json", 
                    data:{"user":"wang","pswd": "123"},
                    type:"get",
                    dataType:"json",
                    success:function(data){console.log(data)},
                    error:function(){} }
function ajaxsend(obj){
var ajax=window.XMLHttpRequest    ///創建ajax對象
var url = obj.url; 
var type = obj.type;
var dataType = obj.dataType;
var data ="";                       
for(i in obj.data){
    data="&"+i+"="+obj.data[i]
    }
data.replace("&","");                   ///處理傳送數據的data格式
if(type == "get"){
    ajax.open("GET",url+"?"+data,true); ///發送數據
    ajax.send(null);
}else if(type == "post"){
    ajax.open("POST",url,true);
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded") ;
    ajax.send(data);
    }//發送數據之后 ，我們需要監聽服務器返回的數據 
ajax.onreadystatechange = function(){
    if(ajax.readyState == 4 ){
        console.log(ajax.status)
        if(ajax.status ===200 ){
            var result = JSON.parse(ajax.responseText);
            obj.success.call(this,result);
            obj.success(result);
                }else if(ajax.status ===404){
                    console.log("頁面未找到")
                }   
            }else{
                console.log(ajax.readyState);
            }
        }
    }
ajaxsend(param);