ajax 底層源碼解析

標籤：eth   stat   encode   function   type   字串   客戶   非同步   doc   

對象: XMLHttpRequest

屬性:
readyState
請求狀態，開始請求時值為0直到請求完成這個值增長到4

responseText
目前為止接收到的響應體,readyState<3此屬性為空白字串，=3為當前響應體，=4則為完整響應體

responseXML
伺服器端相應，解析為xml並作為Document對象返回

status
伺服器端返回的狀態代碼，=200成功，=404表示“Not Found”

statusText
用名稱表示的伺服器端返回狀態，對於“OK”為200，“Not Found”為400

方法:
 
setRequestHeader()
向一個開啟但是未發生的請求設定頭資訊

open()
初始化請求參數但是不發送

send()
發送Http請求

abort()
取消當前相應

getAllResponseHeaders()
把http相應頭作為未解析的字串返回

getResponseHeader()
返回http相應頭的值

 

事件控制代碼: 

onreadystatechange
每次readyState改變時調用該事件控制代碼，但是當readyState=3有可能調用多次

// JavaScript Documentvar ajax={post:function(url,data,func){//匯入3個參數//建立ajax對象var xhr=null;if(window.ActiveXObject){//處理相容問題xhr = new ActiveXObject("Msxml2.XMLHTTP")||new ActiveXObject("Microsoft.XMLHTTP");}else{xhr = new XMLHttpRequset();}//建立串連xhr.open("post",url,true);//method  url true=非同步//發送請求xhr.setRequsetHeader("Content-Type","application/x-www-form-urlencoded");xhr.send(data);//擷取響應xhr.onreadystatechange = function(){//判斷 需滿足兩個條件if(xhr.readyState==4){if(xhr.status==200){var str = xhr.responseText;//str 為json資料if(typeof func=="function"){//判斷func是否為函數，為函數時調用func(str);//回呼函數}}}}},//","必須添加get:function(url,func){//匯入兩個參數//建立ajax對象var xhr = null;if(window.ActiveXObject){xhr = new ActiveXObject("Msxml2.XMLHTTP")||new ActiveXObject("Microsoft.XMLHTTP");}else{xhr = new XMLHttpRequset();}//建立串連xhr.open("get",url,true);//發送請求xhr.send();//擷取響應xhr.onreadystatechange = function(){if(xhr.readyState==4&&xhr.status==200){var str = xhr.responseText;if(typeof func == "function"){func(str);}}}}}

 從代碼我們看出：首先我們建立一個 XMLHttpRequest 對象（由於瀏覽器不同需要 相應判斷處理），設定相應的請求資訊（通過open來做，例如請求地址等 設定 ）；然後我們綁定 onreadystatechange 事件，在這個事件中我們根 據伺服器返回狀態的不同來做出不同處理，這其中主要是請求成功後接收相應的傳回值來通過 javascript 對用戶端做出相應操作（我 們只是使顯示有關資訊）；最後我們發送這個請 求（通過send方法）。 

ajax 底層源碼解析