自己如何創建ajax？建立ajax的步驟詳解（附實例解析）

這篇文章主要講述了關於如何自己創建一個ajax的案例，現在就讓我們一起來看看這篇文章吧

學習ajax一段時間了，現在來總結一下ajax的建置與功能。

ajax的用處是向後台請求資料的，其特點是異步請求資料(無刷新讀取資料)，在ajax沒有出現之前，如果填寫一個項目比較多的表單對用戶來說簡直是一個噩夢，如果中間哪一個環節填錯了，則在最終提交的時候出現報錯，然後就是需要重新填寫，經過幾次填寫後用戶就失去了填寫的慾望了。然後在ajax出現後這一問題得到了很好地解決，每填一個項目則會通過伺服器驗證結果並返回結果，在一定程度上提高了效率，並給用戶帶來了更好的體驗。 （想看更多就到PHP中文網AJAX開發手冊欄位中學習）

現在就來講解使用ajax中所存在的一些問題：首先，在IE下面資料更新不及時(快取引起的)，用一個URL只讀取一次，所以需要在每次刷新的時候更改URL，然而在網域的？後的參數不會影響頁面的獲取，而因為URL的不同瀏覽器會重新載入頁面，這樣就解決了頁面的快取的問題。可以傳url '?t=' new Date().getTime();或用Math.random()也是可以的；其次接收的資料格式有問題，這是就需要統一編碼；再一次就是ajax讀取任何東西，回傳的都是字符，這時就需要我們自己對資料進行解析。接下來就自己寫一個ajax：

#1.建立ajax物件var oAjax=new XMLHttpRequest() ~高版本瀏覽器或new ActiveXObject('Microsoft. XMLHTTP')~IE

2.建立連線   oAjax.open(方式,位址,非同步)

3.傳送請求   oAjax.send();

4.接受    onreadystatechange讀取狀態改變時

# oAjax.readyState 狀態碼

0.  ajax物件剛被建立出來(new 了一個ajax物件)

#1.與伺服器連線上(open方法剛執行)

2.  傳送完成

#3.  接收完成(檔案頭部)

4. 接收完成(身體),內容請求失敗也會有4

#其中http狀態碼：

oAjax.status      200<=n<300或n==304     表示發送成功

oAjax.responseText 返回數據

 encodeURIComponent(str)           字串作為URI 元件進行編

#ajax：

#

//data 	后台要的数据
//options	=	url,data,type,timeout,success,error
function ajax(options){	
	options=options||{};
	options.data=options.data||{};
	options.type=options.type||'get';
	options.timeout=options.timeout||0;	
	//整理data数据
	options.data.t=Math.random();//给data创建一个t 键
	var arr=[];
	for(var key in options.data){
		arr.push(key+'='+encodeURIComponent(options.data[key]));	
	}
	var str=arr.join('&');	
	if(window.XMLHttpRequest){//1
		var oAjax=new XMLHttpRequest();	
	}else{
		var oAjax=new ActiveXObject('Microsoft.XMLHTTP');	
	}	
	if(options.type=='get'){
		oAjax.open('get',options.url+'?'+str,true);//2	
		oAjax.send();//3
	}else{//post
		oAjax.open('post',options.url,true);
			
		//设定ajax的头信息
		oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');		
		oAjax.send(str);		
	}
	
	oAjax.onreadystatechange=function(){//4
		if(oAjax.readyState==4){
			if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
				clearInterval(timer);
				options.success && options.success(oAjax.responseText)
			}else{
				options.error && options.error(oAjax.status);
			}
		}
	};
	if(options.timeout){
		var timer=setTimeout(function(){
			alert(&#39;超时了&#39;);	
			oAjax.abort();	//终止加载	
		},options.timeout);
	}	
}

1.建立ajax函數，因為ajax中的各個參數不定，排列位置也不同，所以要用到json做數據，傳入參數options，其中options為可選項，如果傳了就用傳了的數據，沒有傳的話就用默認的參數，其中有發送的方式type和超時時間設定以及data。

2.其中url需要在後面加入一些隨機的變量，所以可以先為data加上一個鍵options.data.t=Math.random() ;然後對url進行編碼，再對資料進行處理。

3.然後就判斷瀏覽器，對於chrome以及ff都支援window.XMLHttpRequest，而對於IE瀏覽器只支援ActiveXObject('Microsoft.XMLHTTP' )，然後判斷其發送的類型，如果為get方式，則需要在url後面加上剛才設置的隨機數，然後就可以發送數據了oAjax.send()；然而對於post方式還需要設定ajax的頭訊息oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');然後再傳送資料

####

4.对状态改变时进行判断oAjax.onreadystatechange当oAjax.readyState==4时表明接收完成此时再判断状态码oAjax.status>=200 && oAjax.status<300 || oAjax.status==304时表明成功了此时进行成功时的回调函数，否则就是失败了，此时返回状态码，告诉用户。

5.在这中间可以设置一个定时器，当在设定的时间内还没有获取成功则表明超时了，此时需要终止加载oAjax.abort()，并且告诉用户超时了，如果在设置的时间内加载成功了，则清除定时器。

此时ajax就封装完毕了，调用时就简单了

ajax({
		data:	{a:3,b:5},
		url:	'php/php_get.php',
		success:function(str){
			alert(str);	
		}
	});	

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

以上是自己如何創建ajax？建立ajax的步驟詳解（附實例解析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！