? ? ? ? ?AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML）。是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)。

AJAX = 異步 JavaScript和XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集）。ajax是一種用于創(chuàng)建高速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。

? ? ? ? 通過在后臺(tái)與server進(jìn)行少量數(shù)據(jù)交換，AJAX 能夠使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著能夠在不又一次載入整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。從今天開始nie。小編開始和小伙伴們一起學(xué)習(xí)ajax的相關(guān)知識(shí)，這篇博文。小編主要簡(jiǎn)單的和大家介紹介紹XMLHttpRequset對(duì)象的使用，首先我們來看一下這個(gè)對(duì)象的屬性還有方法。首先，我們來看屬性，例如以下表所看到的：

? ? ? ??

? ? ? ? 接著，我們來看方法。例如以下表所看到的：

? ? ? ? ?

? ? ? ? ?XMLHttpRequest的縮寫為XHR。中文名字叫做可擴(kuò)展超文本傳輸請(qǐng)求，Xml可擴(kuò)展標(biāo)記語(yǔ)言。Http超文本傳輸協(xié)議，Request請(qǐng)求。

XMLHttpRequest對(duì)象能夠在不向server提交整個(gè)頁(yè)面的情況下，實(shí)現(xiàn)局部更新網(wǎng)頁(yè)。當(dāng)頁(yè)面所有載入完畢后。client通過該對(duì)象向server請(qǐng)求數(shù)據(jù)，server端接受數(shù)據(jù)并處理后。向client反饋數(shù)據(jù)。

XMLHttpRequest 對(duì)象提供了對(duì) HTTP 協(xié)議的全然的訪問，包含做出 POST 和 HEAD 請(qǐng)求以及普通的 GET 請(qǐng)求的能力。XMLHttpRequest 能夠同步或異步返回 Web server的響應(yīng)。而且能以文本或者一個(gè) DOM 文檔形式返回內(nèi)容。雖然名為 XMLHttpRequest，它并不限于和 XML 文檔一起使用：它能夠接收不論什么形式的文本文檔。XMLHttpRequest 對(duì)象是名為 AJAX 的 Web 應(yīng)用程序架構(gòu)的一項(xiàng)關(guān)鍵功能。上面的兩張圖片對(duì)XHR有了一定的了解。接下來，就到了實(shí)戰(zhàn)的時(shí)候了，我們這里用經(jīng)典的五步法來介紹一下：

? ? ? ? 第一步、創(chuàng)建XHR對(duì)象。代碼例如以下所看到的：

? ? ? ??

var xmlhttprequest; if(window.XMLHttpRequest){ xmlhttprequest=new XMLHttpRequest(); if(xmlhttprequest.overrideMimeType){ xmlhttprequest.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i=0;i<activeName.length;i++){ try{ xmlhttprequest=new ActiveXObject(activeName[i]); break; }catch(e){ } } } if(xmlhttprequest==undefined || xmlhttprequest==null){ alert("XMLHttpRequest對(duì)象創(chuàng)建失敗！

！"); }else{ this.xmlhttp=xmlhttprequest; }

? ? ? ? 第二步、注冊(cè)回調(diào)方法：

? ? ? ? ?

<span style="font-size:18px;">xmlhttp.onreadystatechange=callback; </span> ? ? ? ? ?第三步、設(shè)置和server交互的對(duì)應(yīng)參數(shù)：

<span style="font-size:18px;"> xmlhttp.open("GET","ajax?name=" +userName,true); </span>? ? ? ? ?第四步、設(shè)置向server端發(fā)送的數(shù)據(jù)，啟動(dòng)和server端的交互：
<span style="font-size:18px;"> xmlhttp.send(null);</span> ? ? ? ? ?第五步、推斷和server端的交互是否完畢。還要推斷server端是否返回正確的數(shù)據(jù)：

<span style="font-size:18px;">//根基實(shí)際條件寫callback的功能代碼 function callback(){ if（xmlhttp.readState==4）{ //表示server的對(duì)應(yīng)代碼是200；正確返回了數(shù)據(jù) if(xmlhttp.status==200){ //純文本數(shù)據(jù)的接受方法 var message=xmlhttp.responseText; //使用的前提是。server端須要設(shè)置content-type為text/xml //var domXml=xmlhttp.responseXML; //其他代碼 } } } </span> ? ? ? ??? ?通過這五步XMLHttpRequest基本上就創(chuàng)建好，能夠正常使用了，如上面所看到的的，代碼量有點(diǎn)多。導(dǎo)致每次創(chuàng)建的時(shí)候，我們都須要寫如此多的代碼，所以，我們能夠?qū)⑼瑯拥牟糠殖橄蟪鰜怼Ｊ怪蔀橐粋€(gè)獨(dú)立的類，以下的是小編從網(wǎng)上搜索的一個(gè)，供小伙伴們參考一下`(*∩_∩*)′。不用客氣！代碼例如以下所看到的：

//類的構(gòu)建定義，主要職責(zé)就是新建XMLHttpRequest對(duì)象 var MyXMLHttpRequest=function(){ var xmlhttprequest; if(window.XMLHttpRequest){ xmlhttprequest=new XMLHttpRequest(); if(xmlhttprequest.overrideMimeType){ xmlhttprequest.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i=0;i<activeName.length;i++){ try{ xmlhttprequest=new ActiveXObject(activeName[i]); break; }catch(e){ } } } if(xmlhttprequest == undefined || xmlhttprequest == null){ alert("XMLHttpRequest對(duì)象創(chuàng)建失敗！！

"); }else{ this.xmlhttp=xmlhttprequest; } //用戶發(fā)送請(qǐng)求的方法 MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){ if(this.xmlhttp!=undefined && this.xmlhttp!=null){ method=method.toUpperCase(); if(method!="GET" && method!="POST"){ alert("HTTP的請(qǐng)求方法必須為GET或POST!!!"); return; } if(url==null || url==undefined){ alert("HTTP的請(qǐng)求地址必須設(shè)置！

"); return ; } var tempxmlhttp=this.xmlhttp; this.xmlhttp.onreadystatechange=function(){ if(tempxmlhttp.readyState==4){ if(temxmlhttp.status==200){ var responseText=temxmlhttp.responseText; var responseXML=temxmlhttp.reponseXML; if(callback==undefined || callback==null){ alert("沒有設(shè)置處理數(shù)據(jù)正確返回的方法"); alert("返回的數(shù)據(jù)：" + responseText); }else{ callback(responseText,responseXML); } }else{ if(failback==undefined ||failback==null){ alert("沒有設(shè)置處理數(shù)據(jù)返回失敗的處理方法！

"); alert("HTTP的響應(yīng)碼：" + tempxmlhttp.status + ",響應(yīng)碼的文本信息：" + tempxmlhttp.statusText); }else{ failback(tempxmlhttp.status,tempxmlhttp.statusText); } } } } //解決緩存的轉(zhuǎn)換 if(url.indexOf("?")>=0){ url=url + "&t=" + (new Date()).valueOf(); }else{ url=url+"?+="+(new Date()).valueOf(); } //解決跨域的問題 if(url.indexOf("http://")>=0){ url.replace("?

","&"); url="Proxy?

url=" +url; } this.xmlhttp.open(method,url,true); //假設(shè)是POST方式，須要設(shè)置請(qǐng)求頭 if(method=="POST"){ this.xmlhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded"); } this.xmlhttp.send(data); }else{ alert("XMLHttpRequest對(duì)象創(chuàng)建失敗，無法發(fā)送數(shù)據(jù)！

"); } MyXMLHttpRequest.prototype.abort=function(){ this.xmlhttp.abort(); } } }

? ? ? ? 小編寄語(yǔ)：這篇博客，小編主要簡(jiǎn)單的介紹了一下XHR對(duì)象的一些方法和屬性。還有經(jīng)典的五步法。對(duì)于這些基礎(chǔ)的知識(shí)。還須要小伙伴們?cè)谌粘５膶W(xué)習(xí)中，多多動(dòng)手實(shí)踐。實(shí)習(xí)第二個(gè)月，精彩未完待續(xù)。

總結(jié)

以上是生活随笔為你收集整理的ajax核心技术1---XMLHttpRequset对象的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。