前言

沒(méi)有學(xué)Ajax之前，就在想這到底是一門(mén)什么技術(shù)，問(wèn)自己

什么是Ajax？

Ajax有哪些重點(diǎn)概念？

Ajax如何運(yùn)用？

聽(tīng)說(shuō)JQuery與Ajax更配？

一、Ajax簡(jiǎn)介。

1、AJAX全稱：異步的JavaScript和XML

2、AJAX不是編程語(yǔ)言，是一種無(wú)需重新載入整個(gè)頁(yè)面，能夠更新部分網(wǎng)頁(yè)的技術(shù)。

3、要想更新內(nèi)容或者提交一個(gè)表單，就要重新載入整個(gè)頁(yè)面；使用AJAX技術(shù)的頁(yè)面，通過(guò)與后臺(tái)服務(wù)器進(jìn)行少量的數(shù)據(jù)交換，就可以實(shí)現(xiàn)異步局部更新。

4、同步和異步：

同步：需要更新內(nèi)容或者提交表單時(shí)，需要對(duì)整個(gè)頁(yè)面向服務(wù)器請(qǐng)求->服務(wù)器處理、響應(yīng)->頁(yè)面載入

如果錯(cuò)誤，再次請(qǐng)求，等待，響應(yīng)；需要對(duì)整個(gè)頁(yè)面解析重新載入，很多時(shí)候等待的時(shí)間很長(zhǎng)，讓人很抓狂。

異步：針對(duì)頁(yè)面部分內(nèi)容進(jìn)行請(qǐng)求，服務(wù)器處理響應(yīng)，頁(yè)面刷新載入這一部分；這中間不會(huì)影響頁(yè)面其他交互，無(wú)需進(jìn)行等待，提升了用戶體驗(yàn)。

二、Ajax概念

1、XMLHttpRequest對(duì)象

IE5、IE6支持Active X對(duì)象。

所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對(duì)象。

在新瀏覽器上，創(chuàng)建對(duì)象很簡(jiǎn)單，使用構(gòu)造函數(shù)：var xhr=new XMLHttpRequest();老瀏覽器可能不常用，但我們要考慮在里邊，兼容老瀏覽器：

function createXHR(){
    if(typeof XMLHttpRequest !="undefined"){
//如果瀏覽器不支持XMLHttpRequest對(duì)象，就使用IE5、IE6對(duì)象ActiveXObject
        return new XMLHttpRequest();
    }else if(typeof ActiveXobject !="undefined"){
        if(typeof arguments.callee.activeXString !="string"){
            var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
                i,len;
                for(i=0,len=versions.length;i<len;i++){
                    try{
                        new new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    }catch(ex){
                        //
                    }
                }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error("No XHR object available");
    }
}

這個(gè)函數(shù)首先檢測(cè)原生XHR對(duì)象是否存在，如果存在，就返回它的實(shí)例。XHR不存在，檢測(cè)ActiveX對(duì)象；否則，拋出錯(cuò)誤。
創(chuàng)建兼容的XHR對(duì)象就可以使用：var xhr=createXHR();

2、HTTP請(qǐng)求

在運(yùn)用Ajax之前，我認(rèn)為先了解HTTP更有助于理解Ajax方法。

HTTP是一種應(yīng)用進(jìn)程與服務(wù)器之間連接的協(xié)議，無(wú)狀態(tài)協(xié)議，也就是沒(méi)有記憶，每一次請(qǐng)求都需要重新建立連接。

HTTP請(qǐng)求過(guò)程：

1>建立TCP連接

2>Web瀏覽器向Web服務(wù)器發(fā)送請(qǐng)求命令

3>Web瀏覽器發(fā)送請(qǐng)求頭信息

4>Web服務(wù)器應(yīng)答

5>Web服務(wù)器發(fā)送應(yīng)答頭信息

6>Web服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)

7>Web服務(wù)器關(guān)閉TCP連接

HTTP狀態(tài)碼：

• 1XX：信息類，表示收到Web瀏覽器請(qǐng)求，正在進(jìn)一步處理中
• 2XX:成功，表示用戶請(qǐng)求被正確接收，如200
• 3XX:重定向，表示請(qǐng)求沒(méi)有成功，客戶必須采取進(jìn)一步動(dòng)作
• 4XX:客戶端錯(cuò)誤，表示客戶端提交的請(qǐng)求有錯(cuò)誤，例如：404 NOT Found,意味著請(qǐng)求中所引用的文檔不存在
• 5XX:服務(wù)器錯(cuò)誤，表示服務(wù)器不能完成對(duì)請(qǐng)求的處理，如：500

3、XHR用法

向服務(wù)器發(fā)送請(qǐng)求，需要使用XMLHttpRequest對(duì)象的open()和send()方法。

發(fā)送請(qǐng)求：

xhr.open("get","example","false")//同步xhr.send(null);同步：JavaScript 會(huì)等到服務(wù)器響應(yīng)就緒才繼續(xù)執(zhí)行。

異步：在等待服務(wù)器響應(yīng)時(shí)執(zhí)行其他腳本；

當(dāng)響應(yīng)就緒后對(duì)響應(yīng)進(jìn)行處理。

① 當(dāng)服務(wù)器響應(yīng)后會(huì)填充XHR對(duì)象屬性

->responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)。

->responseXML 獲得 XML 形式的響應(yīng)數(shù)據(jù)。

->status 響應(yīng)的HTTP狀態(tài)碼

->statusText HTTP狀態(tài)碼說(shuō)明

② 異步下檢測(cè)XHR對(duì)象的readyState屬性，請(qǐng)求過(guò)程中的活動(dòng)階段：

->0:未初始化，尚未調(diào)用open()方法

->1:啟動(dòng)，已經(jīng)調(diào)用open()方法，但未調(diào)用send()方法

->2:發(fā)送，已經(jīng)調(diào)用send()方法，尚未接到響應(yīng)

->3:接收，已接收部分?jǐn)?shù)據(jù)

->4:完成，已經(jīng)接收全部響應(yīng)數(shù)據(jù)。

readyState改變就會(huì)觸發(fā)一次readyStatechange事件，可以利用這個(gè)事件來(lái)檢測(cè)readyState變化的值。必須在open()之前指定onreadyStatechange事件處理程序。

var xhr=createXHR();
xhr.onreadyStatechange=function(){
  if(xhr.readyState==4){
      if(xhr.status >=200 && xhr.status<300){
            alert(xhr.responseText);
      }else{
            alert("Request was unsuccessful:"+xhr.status);
      }
  }
}
xhr.open("get","example.txt",true);
xhr.send(null);

默認(rèn)情況下，在發(fā)送XHR請(qǐng)求的同時(shí)，還會(huì)發(fā)送一些默認(rèn)的頭部信息。

使用 setRequestHeader() 可以設(shè)置自定義的請(qǐng)求頭部信息：這個(gè)方法接收2個(gè)參數(shù)，頭部字段的名稱和頭部字段的值。

setRequestHeader() 方法必須在open()后，send()前調(diào)用

xhr.open("get","example.txt",true); xhr.setRequestHeader("myheader","myvalue"); xhr.send(null);調(diào)用XHR對(duì)象的getRequestHeader() 方法，并傳入頭部字段名稱可以取得相應(yīng)的響應(yīng)頭部信息。

③ get請(qǐng)求、post請(qǐng)求

• get 請(qǐng)求
• 常用于向服務(wù)器查詢(獲取)某些信息，需要注意傳入的URL格式，查詢的字符串參數(shù)名稱和值都必須經(jīng)過(guò) encodeURIComponent() 進(jìn)行編碼，然后放到URL末尾；而且所有的名稱和值和后一個(gè)需用"&"隔開(kāi)。
• xhr.open("get","example.php?name1=value1&name2=value2",true);可向現(xiàn)有url后添加查詢字符串參數(shù)：

function addURLParam(url,name,value){
    url +=(url.indexOf("?") == -1  ?  "?" : "&");//檢測(cè)url后是否已有參數(shù)
    url +=encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}
//示例
var url="example.php";
//添加參數(shù)
url=addURLParam(url,"name","Nico");
//初始化請(qǐng)求
xhr.open("get",url,true);

• post請(qǐng)求
  下列情況使用：
  ->無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
  ->向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）
  ->發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠
  如果需要像 HTML 表單那樣 POST 數(shù)據(jù)；首先使用 setRequestHeader() 來(lái)設(shè)置 HTTP 頭"Content-type"為"application/x-www-form-urlencoded"，其次以適當(dāng)格式創(chuàng)建字符串。

var xhr=createXHR();
//省略
xhr.open("POST","ajax_test.asp",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var form=document.getElementById("user-info");
xhr.send(serialize(form));

三、jQuery - AJAX

jQuery get() 和 post() 方法用于通過(guò) HTTP GET 或 POST 請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù)。

• jQuery $.get() 方法
  語(yǔ)法：$.get(URL,callback);
  必需的 URL 參數(shù)規(guī)定您希望請(qǐng)求的 URL。
  可選的 callback 參數(shù)是請(qǐng)求成功后所執(zhí)行的函數(shù)名。
  例子：

$("button").click(function(){
    $.get("demo_test.asp",function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
});```
+ jQuery $.post() 方法
語(yǔ)法：$.post(*URL*,*data*,*callback*);
必需的 *URL* 參數(shù)規(guī)定您希望請(qǐng)求的 URL。
可選的 *data* 參數(shù)規(guī)定連同請(qǐng)求發(fā)送的數(shù)據(jù)。
可選的 *callback* 參數(shù)是請(qǐng)求成功后所執(zhí)行的函數(shù)名。
例子：

$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

$.post() 的第一個(gè)參數(shù)是我們希望請(qǐng)求的 URL ("demo_test_post.asp")。
然后我們連同請(qǐng)求（name 和 city）一起發(fā)送數(shù)據(jù)。
"demo_test_post.asp" 中的 ASP 腳本讀取這些參數(shù)，對(duì)它們進(jìn)行處理，然后返回結(jié)果。
第三個(gè)參數(shù)是回調(diào)函數(shù)。第一個(gè)回調(diào)參數(shù)存有被請(qǐng)求頁(yè)面的內(nèi)容，而第二個(gè)參數(shù)存有請(qǐng)求的狀態(tài)。
######四、運(yùn)用Ajax
現(xiàn)在一般都用JQuery-Ajax，學(xué)習(xí)了之后，我還是有疑惑，知識(shí)清楚了之后如何運(yùn)用？用在哪里？
想著給自己出個(gè)demo運(yùn)用剛學(xué)的知識(shí)，等待更新。。。

總結(jié)

到此這篇關(guān)于原生Ajax與JQuery Ajax的文章就介紹到這了,更多相關(guān)原生Ajax與JQuery Ajax內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論