這篇文章主要講述了關於如何自己創建一個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('超时了');
oAjax.abort(); //终止加载
},options.timeout);
}
}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中文網其他相關文章！
