jQuery與AJAX整理自《鋒利的jquery》第二版 第六章

1.ajax的優勢與不足

1.1ajax的優勢

• 不需要外掛支援。 ajax不需要任何瀏覽器外掛，就可以被絕大多數主流瀏覽器支援，使用者只需要允許js在瀏覽器上執行即可。
• 優秀的使用者體驗 這是ajax技術的最大優點，能在不重新整理整個頁面的前提下更新資料，這使得web應用程式能更為迅速得迴應使用者的操作。
• 提高web程式的效能 與傳統模式相比，ajax模式在效能上最大的差別就是傳輸資料的方式，在傳統模式中，資料提交是通過表單（Form）來實現的，而資料獲取是靠全頁面重新整理來重新獲取整頁內容。ajax模式只是通過XMLHttpRequest物件向伺服器提交希望提交的資料，即按需傳送。
• 減輕伺服器和頻寬的負擔 ajax的工作原理相當於在使用者和伺服器之間附加了一箇中間層，使使用者操作與伺服器響非同步化。它在客戶端建立ajax引擎，把傳統模式下的一些伺服器負擔的工作轉移到客戶端，便於客戶端資源來處理，減輕伺服器和頻寬的負擔。

1.2 ajax的不足

• 瀏覽器對XMLHttpRequest物件的支援還不夠 ajax的不足之一首先來自瀏覽器。IE5.0版本之後才支援ajax（現在都是IE6.0以上了，哈哈）。編寫ajax要相容瀏覽器。（看在估計不需要相容了）
• 破壞瀏覽器前進，後退按鈕的正常功能 當用戶單機一個按鈕觸發一個ajax互動後，又覺得不想這樣做，接著就習慣性的單擊“後退”按鈕，結果發生了最不願意看到的結果，瀏覽器後退到了先前的一個介面，通過ajax互動得到的內容完全消失了。
• 對搜尋引擎的支援不足 通常搜尋引擎都是通過爬蟲程式來對網際網路上的數以億計的海量資料來進行搜尋整理，然而爬蟲現在還不能理解那些奇怪的js程式碼和因此引起的頁面內容的變化。

• 開發和除錯工具的缺乏缺少很好的js開發和除錯工具。（chrome 開發者工具不是嗎？好吧我也不懂。）

  2.ajax的XMLHttpRequest物件

  XMLHttpRequest是ajax的關鍵：傳送非同步請求，接受響應和執行回撥。
  下面是用原生js編寫的一個ajax例子

//建立一個XMLHttpRequest物件
var xmlHttpReq=null;
//相容IE瀏覽器
if(window.ActiveXObject){
    xmlHttpReq=new
 
 ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
    xmlHttpReq=new XMLHttpRequest();
}
//例項化成功後，使用open()方法來初始化XMLHttpRequest物件，指定http方法和要使用的伺服器URL
xmlHttpReq.open('GET','test.php',true);
//非同步回撥時，註冊非同步回撥事件處理器
xmlHttpReq.onreadystatechange=RequestCallBack;
//傳送請求
xmlHttpReq.send(null);
function RequestCallBack(){
    //請求完成載入
    if(xmlHttpReq.readyState==4){
        //http狀態值為200，表示已經響應成功
        if(xmlHttpReq.status==200){
       //將xmlHttpReq.responseText的值複製給某標籤   
         docuemnte.getElementById("ss").innerHTML=xmlHttpReq.responseText;
        }
    }
}

xmlHttpReq.open('GET','test.php',true);

這一句有三個引數

• 第一個引數指定http方法。GET方法和POST方法兩種
• 第二個引數是指定的目的url
• 第三個引數是async，負責指定ajax請求是非同步還是同步。false是同步，true是非同步。

GET和POST方法的比較

• GET請求會將引數跟在URL後面進行傳遞，而POST請求則是作為HTTP訊息的實體內容傳送給web伺服器。
• GET請求對傳輸的資料大小是有限制的（通常為2KB以內），而POST方式傳輸的資料無大小限制。
• GET請求的資料會被瀏覽器快取起來，因而其他人可以從瀏覽器的歷史紀錄中讀取到這些資料，例如賬號和密碼等。GET方式有安全性問題，而POST方式沒有。
• GET方式和POST方式在伺服器端的獲取方式也不同。php中$_GET()和$_POST()兩種方式。
• GET對資料進行查詢，POST主要對資料進行增刪改！簡單說，GET是隻讀，POST是寫。

為什麼GET方式不如POST方式安全？既然這樣發明GET方式幹嘛？
HTTP POST GET 本質區別詳解

裡面提到了GET方式可能發生CSRF攻擊。

if(xmlHttpReq.readyState==4){

這裡的readystate共有5種訊號的可能，也就是說判斷到readystate=4時，onreadystatechange函式已經觸發了五次。
0: 請求未初始化
1: 伺服器連線已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

3.jquery中的ajax

jquery對ajax進行了三層封裝

• 第一層：$.ajax()方法
• 第二層：load(),$.get(),$.post()方法

• 第三層：$.getScript(),$.getJSON()方法

  3.1 load方法

load(url[,data][.callback])

載入遠端HTML程式碼並插入到DOM中
引數：

• url：請求HTML頁面的url地址，語法結構為url selector。注意url與選擇器之間有一個空格
• data（可選）：傳送至伺服器的key/value值

• callback(可選)：請求完成時的回撥，無論請求或失敗。callback函式有三個引數，分別是請求返回的內容，請求狀態和XMLHttpRequest物件。

  例：

//沒有引數傳遞，則使用GET方式傳遞
$("#aa").load("test.html .param",function(){
    ///
})
//有引數傳遞，則使用POST方式傳遞
$("#aa").load("test.html .param",{name:"rain",age:"2"},function(){
    ///
})
//callback帶引數
$("#aa").load("test.html .param",{name:"rain",age:"2"},function(responseTest,textStatus,XMLHttpRequest){
    //responseTest：請問返回內容
    //textStatus 請求狀態：success,error,notmodified,timeout
    //XMLHttpRequest XMLHttpRequest物件
})

3.2 $.get()和$.post()方法

$.get()和$.post()方法是jquery中的全域性函式，而load方法是針對jquery物件進行操作的。

3.2.1$.get()方法

$.get(url[,data][,callback][,type])

$.get()方法使用GET方式來進行非同步請求

引數：

• url：請求的url地址
• data（可選）“傳送至伺服器的key/value資料會作為QueryString附加到請求URL中（GET方式的特點）
• callback（可選）：回撥。只有response的返回狀態為success時返回，自動將請求結果和狀態傳遞給該方法
• type（可選）：伺服器端返回內容的格式，包括xml,html,script,json,text等

$("#ss").click(function(){
    $.get('get.php',{
        username:$('#username').val(),
        content:$('#content').val()
    }),function(data,textStatus){
        $("#res").html(data);//將返回的資料新增到頁面上
    }
})

關於返回資料data的格式，可以是html格式，xml格式或者json格式

• 不需要與其他應工程式共享資料時，可以使用html片段
• 資料需要重用時，json格式，因為體積小，速度快。
• 遠端應用程式未知時，使用xml格式，xml是web服務領域的世界語。

3.2.2 $.post()方法

$("#ss").click(function(){
    $.post('post.php',{
        username:$('#username').val(),
        content:$('#content').val()
    }),function(data,textStatus){
        $("#res").html(data);//將返回的資料新增到頁面上
    }
})

load,get,post函式可以完成常規的ajax操作，如果要編寫複雜的ajax程式，需要$.ajax()方法。

3.3 $.getScript()和$.getJson()方法

3.3.1 $.getScript()函式

$.getScript('test.js',callback)

動態載入js標籤。callback可以制定載入js檔案後的動作

3.3.2 $.getJson()函式

$.getJson('test.json',function(data){
    //data: 返回的資料
})

動態載入json檔案，在callback函式裡返回的資料

3.3.3 $.ajax()函式

$.ajax(options)

只有一個引數。那怎麼使用捏

$.ajax({
    type:"GET",
    url:"test.js",
    dataType:"script"
})

只要引數合適，可以構建前面的load，get，post等幾個方法了。
options引數集包括：

• url ： 請求地址
• type ：GET還是POST傳送型別
• timeout ：設定請求超時事件
• data ：傳送資料
• dataType ：返回資料型別
• beforeSend ：傳送請求前可以修改XMLHttpRequest物件，例如新增http頭
• complete：請求完成回撥（成功和失敗都呼叫）
• success：請求成功回撥
• error：失敗回撥
• global：是否出發全域性ajax事件，預設為true

4. 序列化元素

4.1 serialize()方法

$("#form").serialize()
$(":checkbox,:radio").serialize()

可以將dom元素序列化為字串。
自己實測了一下，必須是input元素這種輸入元素才能獲得表單

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="">
    First name: <input type="text" name="FirstName" value="Bill" /><br />
    Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>
<script src="jquery-2.1.3.js"></script>
<script>
   console.log($('form').serialize());
</script>
</body>
</html>

4.2 serializeArray()方法

哇，這個更棒了，這個將dom元素序列化之後返回JSON格式

4.3 param()方法

serialize()方法的核心，一個數組或物件按照key/value進行序列化。

 var obj={a:1,b:2,c:3};
    var k= $.param(obj);
    console.log(k);

5.jquery中的ajax全域性事件

ajax全域性事件有什麼用？
舉個例子。
為了使用者體驗友好，現在希望ajax非同步載入圖片的過程中顯示正在載入中，作用於所有的ajax請求。
這裡有一個全域性的ajaxStart函式和ajaxStop函式，是全域性函式，在每一個ajax請求開始時和結束時分別觸發。
我們只需新增以下程式碼

<div id="loading">載入中</div>

$("#loading").ajaxStart(function(){
    $('this').show();
})
$("#loading").ajaxStop(function(){
    $('this').hide();
})

這樣輕鬆實現了需求。

以下列舉幾個全域性函式

• ajaxComplete ：請求完成時執行
• ajaxError：請求發生錯誤時執行
• ajaxSend：傳送之前時執行
• ajaxSuccess：請求成功時執行

6.小小感想

學了jquery之後才發現，前端有一種追求極致的感覺，強迫我們使用者體驗良好，程式還能安全簡單。感覺收穫蠻大的呢。