源生js封裝ajax
阿新 • • 發佈:2019-02-07
封裝源生ajax程式碼:
var data = {type: "get",url:"",data:null,async:true,success:null,error:null}; function ajax(data){ // 第一步:建立XMLHttpRequest物件 var xhr = null; if(window.XMLHttpRequest){ // 標準瀏覽器 xhr = new XMLHttpRequest(); } else{ // 早期的IE瀏覽器 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // 定義一些引數 var type = data.type == "get" ? "get" : "post"; var async = data.type ? true : false; // 第二步:準備傳送請求,配置傳送請求的一些行為 xhr.open(type,data.url,async); // 第三步:執行傳送的動作,如果是post,要設定請求頭 if(type === "post"){ xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } xhr.send(data.data); // 第四步:指定一些回撥函式 xhr.onreadystatechange = function(){ // xhr.readyState返回值:0 XMLHttpRequest 物件建立完成 // 1 初始化完成open,表示傳送請求的動作準備好了,但是還沒有開始傳送 // 2 傳送請求end,表示已經發送完成 // 3 伺服器已經返回資料了,正在接收資料 // 4 接收資料完成 if(xhr.readyState == 4){ if(xhr.status == 200){ if(typeof data.success == "function"){ // 呼叫回撥函式,傳入伺服器返回的結果 data.success(xhr.responseText); } else if(typeof data.error == "function"){ data.error(); } } } } // 呼叫 ajax(data);