在JavaScript的jQuery庫(kù)中操作AJAX的方法講解
Java軟件開發(fā)中，后臺(tái)中我們可以通過(guò)各種框架，像SSH等進(jìn)行對(duì)代碼的封裝，方便我們對(duì)Java代碼的編寫，例如，Struts,SpringMVC對(duì)從前臺(tái)到action的流程進(jìn)行封裝控制，使我們只需要進(jìn)行一些簡(jiǎn)單配置就可以實(shí)現(xiàn)；而Spring進(jìn)行了對(duì)各種對(duì)象的管理進(jìn)行封裝，提供了AOP編程的方式，大大方便了我們；而Hibernate和IBatis則是對(duì)JDBC代碼進(jìn)行封裝，不需要我們每次都寫那些重復(fù)而繁雜的JDBC代碼。
前臺(tái)呢，對(duì)于頁(yè)面一些效果，驗(yàn)證等，我們都是通過(guò)JavaScript語(yǔ)言進(jìn)行完成的，但是它也就像我們的Java代碼一樣，是最前臺(tái)語(yǔ)言最基礎(chǔ)的，而JQuery則是對(duì)js代碼進(jìn)行封裝方便我們前臺(tái)代碼的編寫，而且它還有一個(gè)非常大的優(yōu)勢(shì)就是解決了瀏覽器的兼容問(wèn)題，這也是我們使用它非常重要的原因之一。
而現(xiàn)在為了滿足用戶的需求，Ajax（Asynchronous Javascript + XML）異步刷新起到了無(wú)可比擬的作用，以前寫Ajax操作，總是需要我們想JDBC代碼一樣進(jìn)行幾個(gè)必備的步驟：
AJAX——核心XMLHttpRequest對(duì)象，而JQuery也對(duì)Ajax異步操作進(jìn)行了封裝，這里看一下幾種常用的方式。 $.ajax，$.post， $.get， $.getJSON。
$.ajax，這個(gè)是JQuery對(duì)ajax封裝的最基礎(chǔ)步，通過(guò)使用這個(gè)函數(shù)可以完成異步通訊的所有功能。也就是說(shuō)什么情況下我們都可以通過(guò)此方法進(jìn)行異步刷新的操作。但是它的參數(shù)較多，有的時(shí)候可能會(huì)麻煩一些?？匆幌鲁Ｓ玫膮?shù)：
var configObj = {
method //數(shù)據(jù)的提交方式：get和post
url //數(shù)據(jù)的提交路勁
async //是否支持異步刷新，默認(rèn)是true
data //需要提交的數(shù)據(jù)
dataType //服務(wù)器返回?cái)?shù)據(jù)的類型，例如xml,String,Json等
success //請(qǐng)求成功后的回調(diào)函數(shù)
error //請(qǐng)求失敗后的回調(diào)函數(shù)
}
$.ajax(configObj);//通過(guò)$.ajax函數(shù)進(jìn)行調(diào)用。
好，看一個(gè)實(shí)際的例子吧，看一個(gè)進(jìn)行異步刪除的例子：
Java軟件開發(fā)中，后臺(tái)中我們可以通過(guò)各種框架，像SSH等進(jìn)行對(duì)代碼的封裝，方便我們對(duì)Java代碼的編寫，例如，Struts,SpringMVC對(duì)從前臺(tái)到action的流程進(jìn)行封裝控制，使我們只需要進(jìn)行一些簡(jiǎn)單配置就可以實(shí)現(xiàn)；而Spring進(jìn)行了對(duì)各種對(duì)象的管理進(jìn)行封裝，提供了AOP編程的方式，大大方便了我們；而Hibernate和IBatis則是對(duì)JDBC代碼進(jìn)行封裝，不需要我們每次都寫那些重復(fù)而繁雜的JDBC代碼。
前臺(tái)呢，對(duì)于頁(yè)面一些效果，驗(yàn)證等，我們都是通過(guò)JavaScript語(yǔ)言進(jìn)行完成的，但是它也就像我們的Java代碼一樣，是最前臺(tái)語(yǔ)言最基礎(chǔ)的，而JQuery則是對(duì)js代碼進(jìn)行封裝方便我們前臺(tái)代碼的編寫，而且它還有一個(gè)非常大的優(yōu)勢(shì)就是解決了瀏覽器的兼容問(wèn)題，這也是我們使用它非常重要的原因之一。
而現(xiàn)在為了滿足用戶的需求，Ajax（Asynchronous Javascript + XML）異步刷新起到了無(wú)可比擬的作用，以前寫Ajax操作，總是需要我們想JDBC代碼一樣進(jìn)行幾個(gè)必備的步驟：
AJAX——核心XMLHttpRequest對(duì)象，而JQuery也對(duì)Ajax異步操作進(jìn)行了封裝，這里看一下幾種常用的方式。 $.ajax，$.post， $.get， $.getJSON。
$.ajax，這個(gè)是JQuery對(duì)ajax封裝的最基礎(chǔ)步，通過(guò)使用這個(gè)函數(shù)可以完成異步通訊的所有功能。也就是說(shuō)什么情況下我們都可以通過(guò)此方法進(jìn)行異步刷新的操作。但是它的參數(shù)較多，有的時(shí)候可能會(huì)麻煩一些。看一下常用的參數(shù)：
var configObj = {
method //數(shù)據(jù)的提交方式：get和post
url //數(shù)據(jù)的提交路勁
async //是否支持異步刷新，默認(rèn)是true
data //需要提交的數(shù)據(jù)
dataType //服務(wù)器返回?cái)?shù)據(jù)的類型，例如xml,String,Json等
success //請(qǐng)求成功后的回調(diào)函數(shù)
error //請(qǐng)求失敗后的回調(diào)函數(shù)
}
$.ajax(configObj);//通過(guò)$.ajax函數(shù)進(jìn)行調(diào)用。
好，看一個(gè)實(shí)際的例子吧，看一個(gè)進(jìn)行異步刪除的例子：
<span style="font-size:18px;"> // 刪除
$.ajax({
type : "POST", //提交方式
url : "${pageContext.request.contextPath}/org/doDelete.action",//路徑
data : {
"org.id" : "${org.id}"
},//數(shù)據(jù)，這里使用的是Json格式進(jìn)行傳輸
success : function(result) {//返回?cái)?shù)據(jù)根據(jù)結(jié)果進(jìn)行相應(yīng)的處理
if ( result.success ) {
$("#tipMsg").text("刪除數(shù)據(jù)成功");
tree.deleteItem("${org.id}", true);
} else {
$("#tipMsg").text("刪除數(shù)據(jù)失敗");
}
}
});
</span>
$.post，這個(gè)函數(shù)其實(shí)就是對(duì)$.ajax進(jìn)行了更進(jìn)一步的封裝，減少了參數(shù)，簡(jiǎn)化了操作，但是運(yùn)用的范圍更小了。$.post簡(jiǎn)化了數(shù)據(jù)提交方式，只能采用POST方式提交。只能是異步訪問(wèn)服務(wù)器，不能同步訪問(wèn)，不能進(jìn)行錯(cuò)誤處理。在滿足這些情況下，我們可以使用這個(gè)函數(shù)來(lái)方便我們的編程，它的主要幾個(gè)參數(shù)，像method，async等進(jìn)行了默認(rèn)設(shè)置，我們不可以改變的。例子不再介紹。
url:發(fā)送請(qǐng)求地址。
data:待發(fā)送 Key/value 參數(shù)。
callback:發(fā)送成功時(shí)回調(diào)函數(shù)。
type:返回內(nèi)容格式，xml, html, script, json, text,_default。
$.get，和$.post一樣，這個(gè)函數(shù)是對(duì)get方法的提交數(shù)據(jù)進(jìn)行封裝，只能使用在get提交數(shù)據(jù)解決異步刷新的方式上，使用方式和上邊的也差不多。這里不再演示。
$.getJSON，這個(gè)是進(jìn)一步的封裝，也就是對(duì)返回?cái)?shù)據(jù)類型為Json進(jìn)行操作。里邊就三個(gè)參數(shù)，需要我們?cè)O(shè)置，非常簡(jiǎn)單：url,[data],[callback]。
其實(shí)會(huì)了$.ajax方法，其它的就都會(huì)使用了，都是一樣的，其實(shí)非常簡(jiǎn)單。
但是這里還有一個(gè)問(wèn)題，比較麻煩，就是如果頁(yè)面數(shù)據(jù)量比較大，該怎么辦呢？在常規(guī)表單的處理中，我們使用框架Struts2可以通過(guò)域驅(qū)動(dòng)模式進(jìn)行自動(dòng)獲取封裝，那么通過(guò)ajax,如何進(jìn)行封裝呢？這里JQuery有一個(gè)插件，Jquery Form，通過(guò)引入此js文件，我們可以模仿表單Form來(lái)支持Struts2的域驅(qū)動(dòng)模式，進(jìn)行自動(dòng)數(shù)據(jù)的封裝。用法和$.ajax類似，看一下實(shí)際的例子，這里寫一個(gè)保存用戶的前臺(tái)代碼：
<span style="font-size:18px;"> $(function(){
var options = {
beforeSubmit : function() {//處理以前需要做的功能
$("tipMsg").text("數(shù)據(jù)正在保存，請(qǐng)稍候...");
$("#insertBtn").attr("disabled", true);
},
success : function(result) {//返回成功以后需要的回調(diào)函數(shù)
if ( result.success ) {
$("#tipMsg").text("機(jī)構(gòu)保存成功");
//這里是對(duì)應(yīng)的一棵樹，后邊會(huì)介紹到，
// 控制樹形組件，增加新的節(jié)點(diǎn)
var tree = window.parent.treeFrame.tree;
tree.insertNewChild("${org.id}", result.id, result.name);
} else {
$("#tipMsg").text("機(jī)構(gòu)保存失敗");
}
// 啟用保存按鈕
$("#insertBtn").attr("disabled", false);
},
clearForm : true
};
$('#orgForm').ajaxForm(options); //通過(guò)Jquery.Form中的ajaxForm方法進(jìn)行提交
});
</span>
這樣我們就不用再進(jìn)行數(shù)據(jù)data的封裝處理，大大簡(jiǎn)化了我們ajax的操作這樣異步刷新的操作。綜上為JQuery中ajax的操作，感覺(jué)使用多了，和form表單的處理還是非常相似的，只不過(guò)實(shí)現(xiàn)的功能不一樣罷了。學(xué)習(xí)編程，其實(shí)就是學(xué)習(xí)對(duì)數(shù)據(jù)的流轉(zhuǎn)處理，如何從前臺(tái)獲取，傳輸?shù)椒?wù)器進(jìn)行相應(yīng)的處理，然后返回，進(jìn)行相關(guān)的顯示，把這個(gè)流程通過(guò)一些技術(shù)實(shí)現(xiàn)，就完成了軟件的開發(fā)，感覺(jué)還是非常有意思的。
利用 jQuery 簡(jiǎn)化 Ajax 開發(fā)
Ajax 并不是一種語(yǔ)言，它只是幾種舊技術(shù)如 JavaScript 和 XML 以及 DOM 的綜合應(yīng)用，全稱為 Asynchronous JavaScript and XML，即 異步 JavaScript 和 XML ，它能夠在頁(yè)面不刷新的前提下和服務(wù)器進(jìn)行異步數(shù)據(jù)交互，如果運(yùn)用得當(dāng)，它能夠很好的提高用戶體驗(yàn)，還能節(jié)省帶寬、降低服務(wù)器壓力。作為一個(gè)優(yōu)秀的 JavaScript 框架，jQuery 同樣也提供了很多方法來(lái)處理 Ajax 的相關(guān)操作。
利用 Ajax 獲取異步數(shù)據(jù)
傳統(tǒng) Ajax 一般步驟為：
- 創(chuàng)建 XMLHttpRequest（需兼容各種瀏覽器）。
- 向服務(wù)器發(fā)送 XMLHttpRequest 請(qǐng)求。
- 監(jiān)測(cè) XMLHttpRequest 的 onreadystatechange 事件。
- 判斷服務(wù)端是否響應(yīng)完成及響應(yīng)結(jié)果是否正常。
- 獲取 Ajax 從服務(wù)端返回的結(jié)果。
例如用 Ajax 獲取服務(wù)器上的當(dāng)前時(shí)間，示例代碼如下：
<html>
<head>
<title>Traditional Ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function getDateTime() {
var xmlHttp;
if (window.XMLHttpRequest) {
// For IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// For IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("timediv").innerHTML = "現(xiàn)在時(shí)間" + xmlHttp.responseText;
}
}
xmlHttp.open("GET", "ajax.php", true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<div id="timediv">現(xiàn)在時(shí)間</div>
<br /><input type="button" value="測(cè)試傳統(tǒng)的 Ajax" onClick="getDateTime()" />
</body>
</html>
服務(wù)端代碼為：
<?php
//服務(wù)器端為格林尼治標(biāo)準(zhǔn)時(shí)間，這里需設(shè)置為中國(guó)所在時(shí)區(qū)
date_default_timezone_set("PRC");
echo date("Y-m-d H:i:s");
?>
可以看到，僅僅實(shí)現(xiàn)如此簡(jiǎn)單的功能，代碼卻如此冗長(zhǎng)，特別是創(chuàng)建 XMLHttpRequest 的時(shí)候，還要兼容多種瀏覽器，另外還要監(jiān)測(cè) XMLHttpRequest 的 onreadystatechange 時(shí)間，以及返回的 readyState 和 status 狀態(tài)，稍顯麻煩。
jQuery 的 Ajax 方法，如果將上面的代碼改寫為 jQuery 的 Ajax 方法，代碼如下：
<html>
<head>
<title>Traditional Ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"></script>
<script type="text/javascript">
function getDateTime() {
$("#timediv").load("ajax.php");
}
</script>
</head>
<body>
<div id="timediv"></div>
<br /><input type="button" value="測(cè)試 jQuery 的 Ajax" onClick="getDateTime()" />
</body>
</html>
可以看到，jQuery 的 Ajax 方法，主要代碼只有一行 $("#timediv").load("ajax.php");，相當(dāng)之簡(jiǎn)單，而且絕對(duì)兼容各種主流瀏覽器。從這個(gè)例子可以看出，jQuery 大大的簡(jiǎn)化了 Ajax 的編碼方式。
GET 還是 POST ？
上面的例子中的 load 函數(shù)固然方便，但是我們還是經(jīng)常要指定 jQuery 到底是用 GET 方法還是 POST 方法，使用方法如下：
$.get(url, [data], [callback]) $.post(url, [data], [callback], [type])
GET 和 POST 的使用方法基本相同，參數(shù) data 為向服務(wù)器發(fā)送的數(shù)據(jù)，callback 為回調(diào)函數(shù)，type 用來(lái)指定服務(wù)器返回的數(shù)據(jù)類型，如純文本、XML、JSON 等。
下面來(lái)看具體例子：
<html>
<head>
<title>jQuery Ajax (get and post)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"></script>
<script type="text/javascript">
$(document).ready(function() {
// 為 GET 按鈕添加事件
$("#getbtn").click(function() {
$.get("ajaxpage.php", {username:$("#username").val()}, function(data) {
$("#ajaxdata").html(data); // 將服務(wù)端返回的數(shù)據(jù)填充到 P 標(biāo)簽中
});
});
// 為 POST 按鈕添加事件
$("#postbtn").click(function() {
$.post("ajaxpage.php", {username:$("#username").val()}, function(data) {
$("#ajaxdata").html(data); // 將服務(wù)端返回的數(shù)據(jù)填充到 P 標(biāo)簽中
});
});
});
</script>
</head>
<body>
你的大名：<input type="text" id="username" /><br />
<input type="button" id="getbtn" value="GET 方法" /><br />
<input type="button" id="postbtn" value="POST 方法" />
<p id="ajaxdata"></p>
</body>
</html>
服務(wù)端代碼為：
<?php
// 服務(wù)器端為格林尼治標(biāo)準(zhǔn)時(shí)間，這里需設(shè)置為中國(guó)所在時(shí)區(qū)
date_default_timezone_set("PRC");
$username = "";
$ajaxMethod = "";
// 判斷是 GET 還是 POST
if(isset($_GET["username"])) {
$username = $_GET["username"];
$ajaxMethod = "GET";
} else {
$username = $_POST["username"];
$ajaxMethod = "POST";
}
echo "你好，" . $username . ", 現(xiàn)在時(shí)間為：" . date("Y-m-d H:i:s"). "，此數(shù)據(jù)來(lái)源于 " . $ajaxMethod . " Ajax";
?>
可以看到，jQuery Ajax 的 GET 方法 和 POST 方法，使用起來(lái)依然相當(dāng)之方便。
控制 Ajax
GET 和 POST 方法以及前面提到的 load 方法，使用起來(lái)雖然十分實(shí)用，但是某些時(shí)候卻過(guò)于簡(jiǎn)單，很多時(shí)候我們都需要更多的控制 Ajax 的細(xì)節(jié)，jQuery 同樣提供了一些方法來(lái)控制 Ajax 的細(xì)節(jié)，主要通過(guò) $.ajax(options) 方法來(lái)實(shí)現(xiàn)，請(qǐng)看下面的代碼片段：
<script type="text/javascript">
$(document).ready(function() {
// 為 GET 按鈕添加事件
$("#getbtn").click(function() {
$.ajax({
type: "GET",
url: "ajaxpage.php",
data: {username:$("#username").val()},
timeout: 3000,
error: function() {
alert("error!");
},
success: function(data) {
// 回調(diào)函數(shù)，將返回的數(shù)據(jù)添加到 P 標(biāo)簽中
$("#ajaxdata").html(data);
}
});
});
// 為 POST 按鈕添加事件
$("#postbtn").click(function() {
$.ajax({
type: "POST", // Ajax 提交方式
url: "ajaxpage.php", // 提交頁(yè)
data: {username:$("#username").val()}, // 要提交的數(shù)據(jù)
timeout: 3000, // 超時(shí)設(shè)置，單位為毫秒
error: function() { // Ajax 發(fā)生錯(cuò)誤時(shí)
alert("error!");
},
success: function(data) {
// 回調(diào)函數(shù)，將返回的數(shù)據(jù)添加到 P 標(biāo)簽中
$("#ajaxdata").html(data);
}
});
});
});
</script>
上面例子中，$.ajax(options) 中的 options 條目是可選的，并不是每個(gè)參數(shù)都要設(shè)置。對(duì)于有些參數(shù)而言，例如 timeout 和 error 在某個(gè)項(xiàng)目中是固定不變的，那么就沒(méi)必要在每個(gè) Ajax 代碼中都寫，可以用 jQuery 提供的全局 Ajax 設(shè)置的方法來(lái)設(shè)置一下，設(shè)置方法如下：
<script type="text/javascript">
$(document).ready(function() {
// 全局 Ajax 設(shè)定，這里的設(shè)置將對(duì)本頁(yè)面所有 Ajax 方法適用
$.ajaxSetup({
url: "ajaxpage.php", // Ajax 提交頁(yè)
timeout: 3000, // 超時(shí)設(shè)置，單位為毫秒
error: function() { // Ajax 發(fā)生錯(cuò)誤時(shí)
alert("error!");
}
});
// 為 GET 按鈕添加事件
$("#getbtn").click(function() {
$.ajax({
type: "GET",
data: {username:$("#username").val()},
success: function(data) {
// 回調(diào)函數(shù)，將返回的數(shù)據(jù)添加到 P 標(biāo)簽中
$("#ajaxdata").html(data);
}
});
});
// 為 POST 按鈕添加事件
$("#postbtn").click(function() {
$.ajax({
type: "POST", // Ajax 提交方式
data: {username:$("#username").val()}, // 要提交的數(shù)據(jù)
success: function(data) {
// 回調(diào)函數(shù)，將返回的數(shù)據(jù)添加到 P 標(biāo)簽中
$("#ajaxdata").html(data);
}
});
});
});
</script>
上面例子中，在全局設(shè)定里面設(shè)置好了的參數(shù)，在整個(gè)頁(yè)面中都會(huì)生效，這個(gè)功能可以大大的減少重復(fù)的代碼。
以上這些就是 jQuery Ajax 的幾種簡(jiǎn)單使用方式，而且上面的幾個(gè)例子中服務(wù)器返回的數(shù)據(jù)都是純文本，如果是在復(fù)雜的 Ajax 應(yīng)用中，可能就需要用到 XML 或者 JSON 了。
相關(guān)文章
JQuery 改變頁(yè)面字體大小的實(shí)現(xiàn)代碼(實(shí)時(shí)改變網(wǎng)頁(yè)字體大小)
分別定義三個(gè)class為increaseFont、decreaseFont、resetFont 的元素。為其click事件添加事件2012-03-03
將jquery.qqFace.js表情轉(zhuǎn)換成微信的字符碼
這篇文章主要介紹了將jquery.qqFace.js表情轉(zhuǎn)換成微信的字符碼的方法，以及jquery.qqface.js的使用方法，需要的朋友可以參考下2017-12-12
jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹形插件zTree的具體使用技巧,需要的朋友可以參考下2017-03-03
jQuery實(shí)現(xiàn)圖片漸入漸出切換展示效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片漸入漸出切換展示效果,需要的朋友可以參考下2015-08-08
本篇文章是對(duì)jQuery中的排序組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
本文主要介紹jQuery中$符號(hào)命名沖突的解決方法，希望能幫到大家，有需要的朋友可以參考一下。2016-06-06
用jQuery實(shí)現(xiàn)的模仿a的title屬性的例子，在測(cè)試的時(shí)候ie6,7上出現(xiàn)了層次混亂，不過(guò)最終解決了,代碼書寫很詳細(xì)，感興趣的朋友可以了解下哦2013-01-01
jQuery實(shí)現(xiàn)DIV層淡入淡出拖動(dòng)特效的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)DIV層淡入淡出拖動(dòng)特效的方法,涉及jQuery針對(duì)鼠標(biāo)操作的常用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
jQuery中:only-child選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:only-child選擇器用法,實(shí)例分析了:only-child選擇器的功能、定義及匹配父元素的唯一子元素使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)的別踩白塊小游戲完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的別踩白塊小游戲,結(jié)合實(shí)例形式詳細(xì)分析了jQuery針對(duì)頁(yè)面元素的計(jì)算、判定、動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01