jQuery Ajax總結
jQuery對Ajax的操作進行了封裝。jQuery中.ajax()屬於最底層的方法，這個放在後面說，首先看看封裝了.ajax()屬於最底層的方法，這個放在後面說，首先看看封裝了.ajax()的方法。
load()方法
load()可以遠端載入HTML並插入到DOM中。結構為：
load(url [,data] [,callback])
- url(String):服務端資源的url。
- data(Obejct):傳送到伺服器的key/value資料
- callback(Function):請求完成時(無論成功或失敗)的回撥函式，在響應資料已經載入到包裝集元素之後被呼叫。傳入這個函式的引數是響應文字、狀態碼、以及xhr例項。
載入HTML文件
首先構造一個要被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()或.get()或.post()方法。
.get()與.get()與.post()
.get()使用GET進行異步請求。服務器的狀態和應用的模型數據不受GET操作的影響。無論進行多少次GET操作，返回的結果是完全一致的。.get()使用GET進行非同步請求。伺服器的狀態和應用的模型資料不受GET操作的影響。無論進行多少次GET操作，返回的結果是完全一致的。.post()傳送到伺服器的資料可以用來修改應用的模型狀態。例如，可以新增或刪除資訊。
$.get()
$.get()結構為：
$.get(url [, data] [, callback] [, type])
$.get()引數說明：
- url(String):請求的伺服器端資源的url
- data(Object):以key/value的形式構造查詢字串追加到url
- callback(Function):在請求成功(success)時被呼叫。將請求結果和狀態傳遞給該方法。
- type(String):伺服器端返回內容的格式
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+"\" }");
$.post()
除了對伺服器的狀態和應用的模型資料的影響，.get()和.get()和.post()還有以下區別：
- GET請求會將引數跟在url後進行傳遞，POST請求則作為HTTP訊息的實體內容傳送給Web伺服器。在ajax中這種區別對使用者是不可見的。
- GET對傳輸的資料大小有限制(通常不大於2kb)，使用POST方式傳遞的資料量比GET大得多(理論上不受限制)
- GET方式請求的資料會被瀏覽器快取，這種情況可能帶來安全問題。
.get()和.get()和.post()的結構和使用方式都相同。
.getScript()和.getScript()和.getJson()
$.getScript()
$.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()
.getJSON()用於加載JSON文件，用法與.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()方法
$.ajax()是jquery最底層的實現。
$.ajax(options)
這個方法只包含了1個引數,這個引數裡面包含了$.ajax()所需要的請求設定以及回撥函式，引數以key/value形式存在。
$.ajax()引數說明：
-
url(String):傳送請求地址。
-
type(String):請求方式(POST或GET)，預設為GET。其他HTTP請求方法如PUT、DELETE，僅部分瀏覽器支援。
-
data(Object或String):傳送到伺服器的資料。如果不是字串，將自動轉換為字串格式。GET請求中將附加在url後。物件必須是key/value格式，例如{id:"xxyh", password:"123456"}轉換為&id=xxyh&password=123456。如果是陣列，將自動為不同值對應同一個名稱。例如{name:["xxyh","dudu"]}轉換為&name=xxyh&name=dudu。
-
dataType(String):預期伺服器返回的資料型別。如果不指定，jquery將根據HTTP包MINE資訊返回responseXML或responseText,並作為回撥函式引數傳遞。可用型別：
- xml:返回XML文件，可用jquery處理
- html:返回純文字HTML資訊，包含的script標籤會插入DOM時執行。
- script:返回純文字JavaScript程式碼。如果沒有設定cache引數，不會自動快取結果。在遠端請求時(不在同一個域下)，所有POST請求都將轉為GET請求。
- json:返回JSON資料。
- jsonp:JSONP格式。使用JSONP形式呼叫函式時，例如myurl?callback=?,jquery將自動替換後一個“?”為正確的函式名，以執行回撥函式。
- text:返回純文字字串。
-
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=?”傳給伺服器。
獲取JSON資料
接下來通過$.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);
}
})
});
})