這篇文章主要講解了“怎么創(chuàng)建基本的Ajax應(yīng)用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么創(chuàng)建基本的Ajax應(yīng)用”吧！

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出青縣免費(fèi)做網(wǎng)站回饋大家。

創(chuàng)建一個(gè)基本的Ajax應(yīng)用不需要太多的代碼，大概三個(gè)步驟，幾十行代碼即可。

1，創(chuàng)建Ajax的核心對(duì)象XMLHttpRequest

因?yàn)闉g覽器之間的不兼容，IE7之前的版本并沒有原生的XMLHttpRequest對(duì)象卻實(shí)現(xiàn)為ActiveX對(duì)象。
互聯(lián)網(wǎng)及各種書籍中有著多種創(chuàng)建方式，有的復(fù)雜很多行代碼，有的則簡(jiǎn)潔很少代碼。當(dāng)然復(fù)雜的考慮的情形更多一些。如下幾乎將IE中所有的情況都考慮到了。

function cretaeXHR(){   try{ return new XMLHttpRequest();}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}   try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}   try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}   return null;   }

代碼較少的采用對(duì)象特性判斷，

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() :new ActiveXObject('Microsoft.XMLHTTP');

我在這里采用精簡(jiǎn)方式，暫不考慮創(chuàng)建異常的情況。

2，發(fā)送請(qǐng)求

xhr.open   xhr.send

3，處理響應(yīng)

xhr.onreadystatechange = function(){   if(xhr.readyState == 4){   if(xhr.status == 200){//當(dāng)然你可以把200~300之間或304的都理解成響應(yīng)成功   //callback   }   }   }

嗯，到這里沒什么特別的，所有的書籍上都是這么幾個(gè)步驟來(lái)著。對(duì)于初學(xué)者來(lái)說(shuō)，要將這幾個(gè)步驟很好的封裝一下形成一個(gè)良好的模塊還是很困難的。全局變量滿天飛不知道怎么去組織代碼，初學(xué)者開始都是這樣的。現(xiàn)在想想是對(duì)一門語(yǔ)言沒有足夠的掌握，尤其是閉包。

這里采用 單例模式 封裝成一個(gè)對(duì)象，即只有一個(gè)全局的變量將其賦值給Ajax，該對(duì)象有一個(gè)request方法。request有兩個(gè)參數(shù)，***個(gè)為請(qǐng)求的url(必要的)，字符串類型，第二個(gè)opt為配置參數(shù)(可選的)，對(duì)象類型。結(jié)果處理使用內(nèi)部私有的_onStateChange函數(shù)。

完整代碼如下：

/**   * 執(zhí)行基本ajax請(qǐng)求,返回XMLHttpRequest   * Ajax.request(url,{   * async 是否異步 true(默認(rèn))   * method 請(qǐng)求方式 POST or GET(默認(rèn))   * data 請(qǐng)求參數(shù) (鍵值對(duì)字符串)   * success 請(qǐng)求成功后響應(yīng)函數(shù)，參數(shù)為xhr   * failure 請(qǐng)求失敗后響應(yīng)函數(shù)，參數(shù)為xhr   * });    */   Ajax =   function(){   function request(url,opt){   function fn(){}   var async = opt.async !== false,   method = opt.method || 'GET',   data = opt.data || null,   success = opt.success || fn,   failure = opt.failure || fn;   method = method.toUpperCase();   if(method == 'GET' && data){   url += (url.indexOf('?') == -1 ? '?' : '&') + data;   data = null;   }   var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');   xhr.onreadystatechange = function(){   _onStateChange(xhr,success,failure);   };   xhr.open(method,url,async);   if(method == 'POST'){   xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');   }   xhr.send(data);   return xhr;   }   function _onStateChange(xhr,success,failure){   if(xhr.readyState == 4){   var s = xhr.status;   if(s>= 200 && s < 300){   success(xhr);   }else{   failure(xhr);   }   }else{}   }   return {request:request};   }();

如下請(qǐng)求后臺(tái)的一個(gè)servlet，發(fā)送參數(shù)name=jack,age=20，默認(rèn)使用異步，GET方式

Ajax.request('servlet/ServletJSON',{             data : 'name=jack&age=20',            success : function(xhr){                 //to do with xhr            },             failure : function(xhr){                 //to do with xhr    }    }    );

感謝各位的閱讀，以上就是“怎么創(chuàng)建基本的Ajax應(yīng)用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么創(chuàng)建基本的Ajax應(yīng)用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！