load()
1.載入HTML文檔
load()方法是jQuery中最為簡單和常用的Ajax方法，能載入遠程HTML代碼並插入DOM中。
它的結構為：
load(url [,data][,callback])
| 參數名稱 | 類型 | 說明 |
| url | String | 請求HTML頁面的URL地址 |
| data(可選) | Object | 發送至服務器的key/value數據 |
| callback(可選) | Function | 請求完成時的回調函數，無論請求成功或失敗 |
首先創建一個test.html文件，用於被load()方法加載並追加到頁面中。
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div class="comment"> <h6>張三:</h6> <p class="para">沙發.</p> </div> <div class="comment"> <h6>李四:</h6> <p class="para">板凳.</p> </div> <div class="comment"> <h6>王五:</h6> <p class="para">地板.</p> </div> </body> </html>
然后再建一個demo1.html，在上面添加兩個元素：<button>用來觸發Ajax事件，id為”resText”的元素用來顯示追加的HTML內容。HTML代碼如下：
demo1.html- 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <!-- 引入jQuery --> <script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script> <script language="javascript" type="text/javascript"> $(function(){ $("#send").click(function(){ $("#resText").load("test.html"); }) }) </script> </head> <body> <input type="button" id="send" value="Ajax獲取" /> <div class="comment"> 已有評論： </div> <div id="resText" ></div> </body> </html>
顯然，load()方法完成了原本很繁瑣的工作。開發人員只需要使用jQuery選擇器為HTML片段指定目標位置，然后將要加載的文件的URL作為參數傳遞給load()方法即可。當單擊按鈕后，test.html頁面的HTML內ring就會被加載並插入主頁面<div id="resText"></div>的元素中。
2.篩選載入的HTML文檔
上面的例子是將test.html頁面中的內容都加載到id為"resText"的元素里。如果只需要加載test.html頁面內的某些元素，那么可以使用load()方法的URL參數來達到目的。通過為URL參數指定選擇符，就可以很方便地從加載過來的HTML文檔里篩選出所需要的內容。
load()方法的URL參數的語法結構為：“url selector”。注意，URL和選擇器之間有一個空格。
例如只需要加載test.html頁面中class為”para”的內容，可以將demo1.html中的
$("#resText").load("test.html");- 1
改為
$("#resText").load("test.html .para");- 1
3.傳遞方法
load()方法的傳遞方式根據參數data來自動指定。如果沒有參數傳遞，則采用GET方式傳遞；反之，則會自動轉換為POST方法。
//無參數傳遞，則是GET方式
$('#resText').load('test.php',function(){ //... });
//有參數傳遞，則是POST方式
$('#resText').load('test.php',{name:'rain',age:'22'}，function(){ //... });
4.回調函數
對於必須在加載完成后才能繼續的操作，load()方法提供了回調函數(callback)，該函數有3個參數，分別代表請求返回的內容、請求狀態和XMLHttpRequest對象，jQuery代碼如下：
$("#resText").load("test.html",function (responseText, textStatus, XMLHttpRequest){ alert(responseText); //請求返回的內容 alert(textStatus); //請求狀態：success，error alert(XMLHttpRequest); //XMLHttpRequest對象 });
在load()方法中，無論Ajax請求是否成功，只要當請求完成(complete)后，回調函數(callback)就被觸發。
load()方法通常用來從Web服務器上獲取靜態的數據文件，然后這並不能體現Ajax的全部價值。在項目中，如果需要傳遞一些參數給服務器中的頁面，那么可以使用$.get()或者$.post()或者$.ajax()方法。
$.get()
$.get()方法使用GET方式來進行異步請求。
它的結構為：
$.get(url[,data][,callback][,type])- 1
| 參數名稱 | 類型 | 說明 |
|---|---|---|
| url | String | 請求的HTML頁的URL地址 |
| data(可選) | Object | 發送至服務器的key/value數據會作為QueryString附加到請求URL中 |
| callback(可選) | Function | 載入成功時回調函數(只有當Response的返回狀態是success才調用該方法)自動將請求結果和狀態傳遞給該方法 |
| type(可選) | String | 服務器端返回內容的樣式，包括xml、html、script、json、text和_default |
我們用$.get()來實現評論的功能：
get1.html- 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <!-- 引入jQuery --> <script src="../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("#send").click(function(){ $.get("get1.php", { username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ $("#resText").html(data); // 把返回的數據添加到頁面上 } ); }) }) //]]> </script> </head> <body> <form id="form1" action="#"> <p>評論:</p> <p>姓名: <input type="text" name="username" id="username" /></p> <p>內容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p> <p><input type="button" id="send" value="提交"/></p> </form> <div class='comment'>已有評論：</div> <div id="resText" > </div> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
get1.html向get1.php發送get請求，服務器端get1.php的代碼如下：
<?php header("Content-Type:text/html; charset=utf-8"); echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>"; ?>
由於服務器端get1.php返回的數據格式是一段HTML片段，因此並不需要經過處理就可以將新的HTML數據插入到主頁面中。
我們再來看一下get.html中的核心代碼jQuery是如何完成get請求的：
$(function(){ $("#send").click(function(){ $.get("get1.php", { username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ $("#resText").html(data); // 把返回的數據添加到頁面上 } ); }) })
我們可以看到在回調函數中，我們直接將返回回來的data（也就是HTML片段）直接在html中使用。
HTML片段實現起來只需要很少的工作量，但這種固定的數據結構並不一定能夠在其他的Web應用程序中得到重用。
XML文檔
服務器端是如何接收數據然后返回XML的呢？
代碼如下：
get2.php- 1
<?php header("Content-Type:text/xml; charset=utf-8"); echo "<?xml version='1.0' encoding='utf-8'?>". "<comments>". "<comment username='{$_REQUEST['username'] }' >". "<content>{$_REQUEST['content']}</content>". "</comment>". "</comments>"; ?>
注意：由於服務器端返回的數據格式是XML文檔，因此需要在服務端設置Content-Type類型，代碼如下：
header("Content-Type:text/xml; charset=utf-8");- 1
對於服務器端返回的數據是XML格式的情況，我們需要對返回的數據進行處理，才能應用到HTML中，jQuery有強大的DOM處理能力，處理XML文檔與處理HTML文檔一樣，也可以使用常規的attr()、find()、filter()以及其他方法。jQuery代碼如下：
$(function(){ $("#send").click(function(){ $.get("get2.php", { username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ var username = $(data).find("comment").attr("username"); var content = $(data).find("comment content").text(); var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>"; $("#resText").html(txtHtml); // 把返回的數據添加到頁面上 },'XML'); }); })
返回數據格式為XML文檔的過程實現起來比HTML片段要稍微復雜些，但XML文檔的可移植性是其他數據格式無法比擬的，因此以這種格式提供的數據的重要性將極大提高。不過，XML文檔體積相對較大，與其他文件格式相比，解析和操作它們的速度要慢一些。
JSON文件
之所以會出現這種數據格式的文件，很大程度上是因為XML文檔體積大和難以解析。JSON文件和XML文檔一樣，也可以方便的被重用。而且，JSON文件非常簡潔，也容易閱讀。
服務器端是如何接收數據然后返回JSON的呢？
代碼如下：
get3.php- 1
<?php
header("Content-Type:text/html; charset=utf-8"); echo "{ \"username\" : \"{$_REQUEST['username']}\" , \"content\" : \"{$_REQUEST['content']}\"}" ?>
JSON的格式還是比較嚴格的，所以格式不能寫錯了。
由於服務器端返回的數據格式是JSON文件，因此需要對返回的數據進行處理之后，才可以將新的HTML數據添加到主頁面中。HTML文件其他部分還是一樣，要修改的地方是jQuery部分，jQuery代碼如下：
$(function(){ $("#send").click(function(){ $.get("get3.php", { username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ var username = data.username; var content = data.content; var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>"; $("#resText").html(txtHtml); // 把返回的數據添加到頁面上 },"json"); }); })
在上面的代碼中，將$.get()方法的第4個參數(type)設置為”json”來代表期待服務器返回的數據格式。
對於服務器端返回HTML片段、XML數據、JSON數據的優缺點進行分析，可以的得知在不需要與其他應用程序共享數據的時候，使用HTML片段來提供返回數據一般來說是最簡單的；如果數據需要重用，那么JSON文件是不錯的選擇，它在性能和文件大小方面具有優勢，它是Web服務器領域的“世界語”，我們推薦使用JSON。
$.post()
它與$.get()方法的結構和使用方式都相同，不過它們之間仍然有以下區別。
- GET請求會將參數跟在URL后進行傳遞，而POST請求則是作為HTPP消息的實體內容發送給Web服務器。當然，在Ajax請求中，這種區別對用戶是不可見的
- GET方式對傳輸的數據有大小限制(通常不能大於2KB)，而使用POST方式傳遞的數據量要比GET方式大得多（理論上不受限制）
- GET方式請求的數據會被瀏覽器緩存起來，因此其他人就可以從瀏覽器的歷史記錄中讀取到這些數據，例如賬號和密碼等。在某種情況下，GET方式會帶來嚴重的安全性問題，而POST方式相對來說就可以避免這些問題。
- GET方式和POST方式傳遞的數據在服務器端的獲取也不相同。在PHP中，GET方式的數據可以用$_GET[]獲取，而POST方式可以用$_POST[]獲取。兩種方式都可以用$_REQUEST[]來獲取。
由於POST和GET方式提交的所有數據都可以通過$_REQUEST[]來獲取，因此只需要改變jQuery函數，就可以將程序在GET請求和POST請求之間切換。
代碼如下：
$(function(){ $("#send").click(function(){ $.post("post1.php", { username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ $("#resText").html(data); // 把返回的數據添加到頁面上 }); }) })
load()、$.get()和$.post()，我們可以發現，$.get()和$.post()方法是jQuery中的全局函數，而在此之前講的load()是對jQuery對象進行操作的。
上面使用load()、$.get()和$.post()方法完成了一些常規的Ajax程序，如果還需要編寫一些復雜的Ajax程序，那么就要用到jQuery中的$.ajax()方法。$.ajax()方法不僅能實現與load()、$.get()和$.post()方法同樣的功能，而且還可以設定beforeSend()、error()、success()以及complete()回調函數，通過這些函數，可以給用戶更多的Ajax提示信息。另外，還有一些參數，可以設置Ajax請求的超時時間或者頁面的”最后更改”狀態等。關於$.ajax()方法將在下一篇博客中講解。