jQuery對Ajax的操作進行了封裝。jQuery中$.ajax()屬於最底層的方法，這個放在後面說，首先看看封裝了$.ajax()的方法。
load()可以遠程載入HTML並插入到DOM中。結構為：
load(url [,data] [,callback])首先構造一個要被load()方法加載的新聞評論頁面，comment.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最新評論</title>
</head>
<body>
<div class="comment">
<p>
<a href="#" class="username">張三</a>
<span class="location">[北京市網友]</span>
</p>
<p class="contentTxt">一樓給度娘</p>
</div>
<div class="comment">
<p>
<a href="#" class="username">李四</a>
<span class="location">[山東省濟南市網友]</span>
</p>
<p class="contentTxt">沒搶到沙發</p>
</div>
<div class="comment">
<p>
<a href="#" class="username">王五</a>
<span class="location">[河南省鄭州市網友]</span>
</p>
<p class="contentTxt">頂頂頂頂頂</p>
</div>
</body>
</html>然後創建load.html，添加一個button按鈕觸發Ajax事件，將加載進來的HTML內容存放到id為“resText”的元素中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
<script type="text/javascript">
$(function () {
// 點擊按鈕，觸發加載動作
$("#btn").click(function () {
// 將comment.html加載進id為“resText”的元素裡
$("#resText").load("comment.html");
});
})
</script>
</head>
<body>
<input type="button" id="btn" value="load評論">
<div>最新評論：</div>
<div id="resText"></div>
</body>
</html>load()的url參數的語法結構為“url selector”，可以加載指定的內容。例如，加載comment.html頁面中class為“contentTxt”的內容：
$("#resText").load("comment.html .contentTxt");load()的傳遞方式根據參數data來自動指定。如果沒有參數，則采用GET方式傳遞，否則，會自動轉換為POST方式。
在load方法中，無論ajax請求是否成功，請求完成(complete)後，回調函數就會被觸發，對應$.ajax()中的complete回調函數。
$("#resText").load("comment.html", function (responseText, textStatus, XMLHttpRequest) {
alert(responseText); // 請求返回的內容
alert(textStatus); // 請求狀態
alert(XMLHttpRequest); // XMLHttpRequest對象
});load()常用來從web服務器上獲取靜態的數據文件。如果要向服務器傳遞參數，可以使用$.get()或$.post()方法。
$.get()使用GET進行異步請求。服務器的狀態和應用的模型數據不受GET操作的影響。無論進行多少次GET操作，返回的結果是完全一致的。$.post()發送到服務器的數據可以用來修改應用的模型狀態。例如，可以添加或刪除信息。
$.get()結構為：
$.get(url [, data] [, callback] [, type])$.get()參數說明：
HTML文檔
下面添加評論的html頁面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
<script type="text/javascript">
$(function () {
$("#send").click(function () {
// 點擊按鈕觸發get請求
$.get("get1.jsp", {
// 向服務器傳遞參數，encodeURI進行完整編碼
username: encodeURI($("#username").val()),
location: encodeURI($("#location").val()),
contentTxt: encodeURI($("#contentTxt").val())
}, function (data, textStatus) {
// alert(textStatus); // 返回請求狀態
// alert(decodeURI(data)); // 返回請求的狀態
// 將返回的數據添加到id為“resText”的元素中
$("#resText").html(decodeURI(data));
})
});
})
</script>
</head>
<body>
<form id="form1">
<p>添加評論:</p>
<p>姓名:<input type="text" name="username" id="username"></p>
<p>位置:<input type="text" name="location" id="location"></p>
<p>內容:<textarea name="contentTxt" id="contentTxt"></textarea></p>
<p><input type="button" id="send" value="提交"></p>
</form>
<div>最新評論：</div>
<div id="resText"></div>
</body>
</html>接下來構造get1.jsp，模擬服務器處理請求並返回數據：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String username = request.getParameter("username");
String location = request.getParameter("location");
String content = request.getParameter("contentTxt");
out.println("<div class='comment'><a href='#' class='username'>" + username + "</a><span class='location'>"+ location +
"</span></p><p class='contentTxt'>"+content+"</p></div>");
%>然後需要將.jsp發布到tomcat等web容器進行訪問。
JSON數據
相對於xml文件而言，json相當簡潔、易讀。接下來看看服務器返回json形式的數據的情況。
客戶端頁面get2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
<script type="text/javascript">
$(function () {
$("#send").click(function () {
$.get("get2.jsp", {
username: encodeURI($("#username").val()),
location: encodeURI($("#location").val()),
contentTxt: encodeURI($("#contentTxt").val())
}, function (data, textStatus) {
alert(textStatus);
var username = data.username;
var location = data.location;
var contentTxt = data.contentTxt;
username = decodeURI(username);
location = decodeURI(location);
contentTxt = decodeURI(contentTxt);
var txtHtml = "<div class='comment'><p><a href='#' class='username'>" + username +
"</a><span class='location'>" + location +
"</span></p><p class='contentTxt'>" + contentTxt + "</p></div>";
$("#resText").html(txtHtml);// 將返回的數據添加到頁面
}, "json");
})
})
</script>
</head>
<body>
<form id="form1">
<p>添加評論:</p>
<p>姓名:<input type="text" name="username" id="username"></p>
<p>位置:<input type="text" name="location" id="location"></p>
<p>內容:<textarea name="contentTxt" id="contentTxt"></textarea></p>
<p><input type="button" id="send" value="get提交"></p>
</form>
<div>最新評論：</div>
<div id="resText"></div>
</body>
</html>上面encodeURI()是用於編碼，否則中文就無法解析，這個希望以後有時間再總結，這裡先記住。回調函數的第4個參數(type)設置為“json”,代表期待服務器返回的數據格式。
需要添加json-lib.jar，用於構造json格式的數據。get2.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="net.sf.json.JSONObject" %>
<%
String username = request.getParameter("username");
String location = request.getParameter("location");
String contentTxt = request.getParameter("contentTxt");
JSONObject json = new JSONObject();
json.put("username", username);
json.put("location", location);
json.put("contentTxt", contentTxt);
out.println(json);
%>json的格式非常嚴格，任何一個括號的不匹配或缺失都會導致頁面的腳本終止運行。上面通過java代碼首先創建了一個json對象。如果通過拼接的方式構造json數據，必須是標准的json格式：
out.println("{\"username\":\""+ username+ "\",\"location\":\"" + location + "\", \"contentTxt\":\""+ contentTxt+"\" }");除了對服務器的狀態和應用的模型數據的影響，$.get()和$.post()還有以下區別：
$.get()和$.post()的結構和使用方式都相同。
$.getScript()用來加載.js文件，與加載一個HTML片段一樣，js文件會自動執行。
將$.load()的comment.html頁面改寫為js文件，將評論添加到id為“resText”的元素中。js1.js:
var comments = [
{
"username": "張三",
"location": "[北京市網友]",
"contentTxt": "一樓獻度娘"
},
{
"username": "李四",
"location": "[山東省濟南市網友]",
"contentTxt": "沒搶到沙發"
},
{
"username": "王五",
"location": "[河南省鄭州市網友]",
"contentTxt": "頂頂頂頂頂"
}
];
var html = '';
$.each(comments, function (index, comment) {
html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
"</a><span class='location'>" + comment['location'] +
"</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
});
$("#resText").html(html);$.getScript()直接加載進js，並自動執行:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
<script type="text/javascript">
$(function () {
// 點擊按鈕加載js1.js文件
$("#send").click(function () {
$.getScript("js1.js");
})
})
</script>
</head>
<body>
<p>
<input type="button" id="send" value="加載script">
</p>
<div class="comment">最新評論：</div>
<div id="resText"></div>
</body>
</html>$.getJSON()用於加載JSON文件，用法與$.getScript()相同。
json數據：
[
{
"username": "張三",
"location": "[北京市網友]",
"contentTxt": "一樓獻度娘"
},
{
"username": "李四",
"location": "[山東省濟南市網友]",
"contentTxt": "沒搶到沙發"
},
{
"username": "王五",
"location": "[河南省鄭州市網友]",
"contentTxt": "頂頂頂頂頂"
}
]jquery代碼：
$(function () {
$("#send").click(function () {
$.getJSON("demo.json", function (data) {
$("#resText").empty();
var html = '';
$.each(data, function (index, comment) {
html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
"</a><span class='location'>" + comment['location'] +
"</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
});
$("#resText").html(html);
});
})
});$.ajax()是jquery最底層的實現。
$.ajax(options)這個方法只包含了1個參數,這個參數裡面包含了$.ajax()所需要的請求設置以及回調函數，參數以key/value形式存在。
$.ajax()參數說明：
complete(Function):請求完成後回調函數(請求成功或失敗後均調用)。
參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。
function(XMLHttpRequest,textStatus){
this; // 調用本次Ajax請求時傳遞的options參數
}success(Function):請求成功回調函數。有2個參數：
參數：由服務器返回，並根據dataType參數進行處理後的數據和描述狀態的字符串。
function(data, textStatus) {
// data 可能是xmlDoc,jsonObj,html,text等
this; // 調用本次Ajax請求時傳遞的options參數
}error(Function):請求失敗時被調用的函數。這個函數有3個參數，即XMLHttpRequest對象、錯誤信息和捕獲的錯誤對象
function(XMLHttpRequest, textStatus, errorThrown){
// 通常情況下textStatus和errorThrown只有一個包含信息
this; // 調用本次Ajax請求時傳遞的options參數
}contentType(String):當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。
jsonp(String):在一個jsonp請求中重寫回調函數的名字。用來替代在“callback=?”這種GET或POST請求中URL參數裡的“callback”部分，例如{jsonp:'onJsonPLoad'}會導致將“onJsonPLoad=?”傳給服務器。
接下來通過$.ajax()獲取json數據。jquery代碼：
$(function () {
$("#send").click(function () {
$.ajax({
type:"GET",
url:"demo.json",
dataType:"json",
success: function (data) {
$("#resText").empty();
var html = "";
$.each(data, function (commentIndex, comment) {
html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
"</a><span class='location'>" + comment['location'] +
"</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
});
$("#resText").html(html);
}
})
});
})