前言

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

什么是Ajax？

Ajax有哪些重點概念？

Ajax如何運用？

聽說JQuery與Ajax更配？

一、Ajax簡介。

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

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

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

4、同步和異步：

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

如果錯誤，再次請求，等待，響應(yīng)；需要對整個頁面解析重新載入，很多時候等待的時間很長，讓人很抓狂。

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

二、Ajax概念

1、XMLHttpRequest對象

IE5、IE6支持Active X對象。

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

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

function createXHR(){
    if(typeof XMLHttpRequest !="undefined"){
//如果瀏覽器不支持XMLHttpRequest對象，就使用IE5、IE6對象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");
    }
}

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

2、HTTP請求

在運用Ajax之前，我認為先了解HTTP更有助于理解Ajax方法。

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

HTTP請求過程：

1>建立TCP連接

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

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

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

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

6>Web服務(wù)器向瀏覽器發(fā)送數(shù)據(jù)

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

HTTP狀態(tài)碼：

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

3、XHR用法

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

發(fā)送請求：

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

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

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

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

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

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

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

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

② 異步下檢測XHR對象的readyState屬性，請求過程中的活動階段：

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

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

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

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

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

readyState改變就會觸發(fā)一次readyStatechange事件，可以利用這個事件來檢測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);

默認情況下，在發(fā)送XHR請求的同時，還會發(fā)送一些默認的頭部信息。

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

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

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

③ get請求、post請求

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

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

• post請求
  下列情況使用：
  ->無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
  ->向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
  ->發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠
  如果需要像 HTML 表單那樣 POST 數(shù)據(jù)；首先使用 setRequestHeader() 來設(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() 方法用于通過 HTTP GET 或 POST 請求從服務(wù)器請求數(shù)據(jù)。

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

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

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

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

總結(jié)

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

最新評論