1. 程式人生 > >ajax 底層源碼解析

ajax 底層源碼解析

源碼 不同 操作 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 底層源碼解析