ajax 底層源碼解析
阿新 • • 發佈:2017-06-15
源碼 不同 操作 cati 數據 t對象 增長 asc orm
對象: 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 Document var 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 底層源碼解析