在JavaScript的jQuery庫中操作AJAX的方法講解

更新時間：2015年08月15日 09:27:50 作者：libuchao

這篇文章主要介紹了在JavaScript的jQuery庫中操作AJAX的方法講解,包括利用jQuery簡化Ajax開發(fā)部分的內(nèi)容,需要的朋友可以參考下

Java軟件開發(fā)中，后臺中我們可以通過各種框架，像SSH等進(jìn)行對代碼的封裝，方便我們對Java代碼的編寫，例如，Struts,SpringMVC對從前臺到action的流程進(jìn)行封裝控制，使我們只需要進(jìn)行一些簡單配置就可以實現(xiàn)；而Spring進(jìn)行了對各種對象的管理進(jìn)行封裝，提供了AOP編程的方式，大大方便了我們；而Hibernate和IBatis則是對JDBC代碼進(jìn)行封裝，不需要我們每次都寫那些重復(fù)而繁雜的JDBC代碼。

前臺呢，對于頁面一些效果，驗證等，我們都是通過JavaScript語言進(jìn)行完成的，但是它也就像我們的Java代碼一樣，是最前臺語言最基礎(chǔ)的，而JQuery則是對js代碼進(jìn)行封裝方便我們前臺代碼的編寫，而且它還有一個非常大的優(yōu)勢就是解決了瀏覽器的兼容問題，這也是我們使用它非常重要的原因之一。

而現(xiàn)在為了滿足用戶的需求，Ajax（Asynchronous Javascript + XML）異步刷新起到了無可比擬的作用，以前寫Ajax操作，總是需要我們想JDBC代碼一樣進(jìn)行幾個必備的步驟：
AJAX——核心XMLHttpRequest對象，而JQuery也對Ajax異步操作進(jìn)行了封裝，這里看一下幾種常用的方式。 $.ajax，$.post， $.get， $.getJSON。

$.ajax，這個是JQuery對ajax封裝的最基礎(chǔ)步，通過使用這個函數(shù)可以完成異步通訊的所有功能。也就是說什么情況下我們都可以通過此方法進(jìn)行異步刷新的操作。但是它的參數(shù)較多，有的時候可能會麻煩一些?？匆幌鲁Ｓ玫膮?shù)：

 var configObj = {
    method  //數(shù)據(jù)的提交方式：get和post
    url  //數(shù)據(jù)的提交路勁
    async  //是否支持異步刷新，默認(rèn)是true
    data  //需要提交的數(shù)據(jù)
    dataType  //服務(wù)器返回數(shù)據(jù)的類型，例如xml,String,Json等
    success  //請求成功后的回調(diào)函數(shù)
    error  //請求失敗后的回調(diào)函數(shù)
  }
 
$.ajax(configObj);//通過$.ajax函數(shù)進(jìn)行調(diào)用。

好，看一個實際的例子吧，看一個進(jìn)行異步刪除的例子：

 var configObj = {
    method  //數(shù)據(jù)的提交方式：get和post
    url  //數(shù)據(jù)的提交路勁
    async  //是否支持異步刷新，默認(rèn)是true
    data  //需要提交的數(shù)據(jù)
    dataType  //服務(wù)器返回數(shù)據(jù)的類型，例如xml,String,Json等
    success  //請求成功后的回調(diào)函數(shù)
    error  //請求失敗后的回調(diào)函數(shù)
  }
 
$.ajax(configObj);//通過$.ajax函數(shù)進(jìn)行調(diào)用。

好，看一個實際的例子吧，看一個進(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) {//返回數(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，這個函數(shù)其實就是對$.ajax進(jìn)行了更進(jìn)一步的封裝，減少了參數(shù)，簡化了操作，但是運用的范圍更小了。$.post簡化了數(shù)據(jù)提交方式，只能采用POST方式提交。只能是異步訪問服務(wù)器，不能同步訪問，不能進(jìn)行錯誤處理。在滿足這些情況下，我們可以使用這個函數(shù)來方便我們的編程，它的主要幾個參數(shù)，像method，async等進(jìn)行了默認(rèn)設(shè)置，我們不可以改變的。例子不再介紹。
url:發(fā)送請求地址。
data:待發(fā)送 Key/value 參數(shù)。
callback:發(fā)送成功時回調(diào)函數(shù)。
type:返回內(nèi)容格式，xml, html, script, json, text,_default。

$.get，和$.post一樣，這個函數(shù)是對get方法的提交數(shù)據(jù)進(jìn)行封裝，只能使用在get提交數(shù)據(jù)解決異步刷新的方式上，使用方式和上邊的也差不多。這里不再演示。

$.getJSON，這個是進(jìn)一步的封裝，也就是對返回數(shù)據(jù)類型為Json進(jìn)行操作。里邊就三個參數(shù)，需要我們設(shè)置，非常簡單：url,[data],[callback]。

其實會了$.ajax方法，其它的就都會使用了，都是一樣的，其實非常簡單。

但是這里還有一個問題，比較麻煩，就是如果頁面數(shù)據(jù)量比較大，該怎么辦呢？在常規(guī)表單的處理中，我們使用框架Struts2可以通過域驅(qū)動模式進(jìn)行自動獲取封裝，那么通過ajax,如何進(jìn)行封裝呢？這里JQuery有一個插件，Jquery Form，通過引入此js文件，我們可以模仿表單Form來支持Struts2的域驅(qū)動模式，進(jìn)行自動數(shù)據(jù)的封裝。用法和$.ajax類似，看一下實際的例子，這里寫一個保存用戶的前臺代碼：

<span style="font-size:18px;"> $(function(){ 
    var options = { 
      beforeSubmit : function() {//處理以前需要做的功能 
        $("tipMsg").text("數(shù)據(jù)正在保存，請稍候..."); 
        $("#insertBtn").attr("disabled", true); 
      }, 
      success : function(result) {//返回成功以后需要的回調(diào)函數(shù) 
        if ( result.success ) { 
          $("#tipMsg").text("機構(gòu)保存成功"); 
                   
                    //這里是對應(yīng)的一棵樹，后邊會介紹到， 
          // 控制樹形組件，增加新的節(jié)點 
          var tree = window.parent.treeFrame.tree; 
          tree.insertNewChild("${org.id}", result.id, result.name); 
        } else { 
          $("#tipMsg").text("機構(gòu)保存失敗"); 
        } 
        // 啟用保存按鈕 
        $("#insertBtn").attr("disabled", false); 
      }, 
      clearForm : true 
    }; 
   
    $('#orgForm').ajaxForm(options); //通過Jquery.Form中的ajaxForm方法進(jìn)行提交 
  }); 
</span>

這樣我們就不用再進(jìn)行數(shù)據(jù)data的封裝處理，大大簡化了我們ajax的操作這樣異步刷新的操作。綜上為JQuery中ajax的操作，感覺使用多了，和form表單的處理還是非常相似的，只不過實現(xiàn)的功能不一樣罷了。學(xué)習(xí)編程，其實就是學(xué)習(xí)對數(shù)據(jù)的流轉(zhuǎn)處理，如何從前臺獲取，傳輸?shù)椒?wù)器進(jìn)行相應(yīng)的處理，然后返回，進(jìn)行相關(guān)的顯示，把這個流程通過一些技術(shù)實現(xiàn)，就完成了軟件的開發(fā)，感覺還是非常有意思的。

利用 jQuery 簡化 Ajax 開發(fā)

Ajax 并不是一種語言，它只是幾種舊技術(shù)如 JavaScript 和 XML 以及 DOM 的綜合應(yīng)用，全稱為 Asynchronous JavaScript and XML，即異步 JavaScript 和 XML ，它能夠在頁面不刷新的前提下和服務(wù)器進(jìn)行異步數(shù)據(jù)交互，如果運用得當(dāng)，它能夠很好的提高用戶體驗，還能節(jié)省帶寬、降低服務(wù)器壓力。作為一個優(yōu)秀的 JavaScript 框架，jQuery 同樣也提供了很多方法來處理 Ajax 的相關(guān)操作。
利用 Ajax 獲取異步數(shù)據(jù)

傳統(tǒng) Ajax 一般步驟為：

創(chuàng)建 XMLHttpRequest（需兼容各種瀏覽器）。
向服務(wù)器發(fā)送 XMLHttpRequest 請求。
監(jiān)測 XMLHttpRequest 的 onreadystatechange 事件。
判斷服務(wù)端是否響應(yīng)完成及響應(yīng)結(jié)果是否正常。
獲取 Ajax 從服務(wù)端返回的結(jié)果。

例如用 Ajax 獲取服務(wù)器上的當(dāng)前時間，示例代碼如下：

<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)在時間" + xmlHttp.responseText;
 }
 }
 xmlHttp.open("GET", "ajax.php", true);
 xmlHttp.send(null);
}
</script>
</head>
<body>
 <div id="timediv">現(xiàn)在時間</div>
 <br /><input type="button" value="測試傳統(tǒng)的 Ajax" onClick="getDateTime()" />
</body>
</html>

服務(wù)端代碼為：

<?php
 //服務(wù)器端為格林尼治標(biāo)準(zhǔn)時間，這里需設(shè)置為中國所在時區(qū)
 date_default_timezone_set("PRC");
 echo date("Y-m-d H:i:s");
?>

可以看到，僅僅實現(xiàn)如此簡單的功能，代碼卻如此冗長，特別是創(chuàng)建 XMLHttpRequest 的時候，還要兼容多種瀏覽器，另外還要監(jiān)測 XMLHttpRequest 的 onreadystatechange 時間，以及返回的 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="測試 jQuery 的 Ajax" onClick="getDateTime()" />
</body>
</html>

可以看到，jQuery 的 Ajax 方法，主要代碼只有一行 $("#timediv").load("ajax.php");，相當(dāng)之簡單，而且絕對兼容各種主流瀏覽器。從這個例子可以看出，jQuery 大大的簡化了 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 用來指定服務(wù)器返回的數(shù)據(jù)類型，如純文本、XML、JSON 等。

下面來看具體例子：

<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è)置為中國所在時區(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)在時間為：" . date("Y-m-d H:i:s"). "，此數(shù)據(jù)來源于 " . $ajaxMethod . " Ajax";
?>

可以看到，jQuery Ajax 的 GET 方法和 POST 方法，使用起來依然相當(dāng)之方便。
控制 Ajax

GET 和 POST 方法以及前面提到的 load 方法，使用起來雖然十分實用，但是某些時候卻過于簡單，很多時候我們都需要更多的控制 Ajax 的細(xì)節(jié)，jQuery 同樣提供了一些方法來控制 Ajax 的細(xì)節(jié)，主要通過 $.ajax(options) 方法來實現(xiàn)，請看下面的代碼片段：

<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", // 提交頁
  data: {username:$("#username").val()}, // 要提交的數(shù)據(jù)
  timeout: 3000, // 超時設(shè)置，單位為毫秒
  error: function() { // Ajax 發(fā)生錯誤時
  alert("error!");
  },
  success: function(data) {
  // 回調(diào)函數(shù)，將返回的數(shù)據(jù)添加到 P 標(biāo)簽中
  $("#ajaxdata").html(data);
  }
 });
 });
});
</script>

上面例子中，$.ajax(options) 中的 options 條目是可選的，并不是每個參數(shù)都要設(shè)置。對于有些參數(shù)而言，例如 timeout 和 error 在某個項目中是固定不變的，那么就沒必要在每個 Ajax 代碼中都寫，可以用 jQuery 提供的全局 Ajax 設(shè)置的方法來設(shè)置一下，設(shè)置方法如下：

<script type="text/javascript">
$(document).ready(function() {
 // 全局 Ajax 設(shè)定，這里的設(shè)置將對本頁面所有 Ajax 方法適用
 $.ajaxSetup({
 url: "ajaxpage.php", // Ajax 提交頁
 timeout: 3000, // 超時設(shè)置，單位為毫秒
 error: function() { // Ajax 發(fā)生錯誤時
  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ù)，在整個頁面中都會生效，這個功能可以大大的減少重復(fù)的代碼。

以上這些就是 jQuery Ajax 的幾種簡單使用方式，而且上面的幾個例子中服務(wù)器返回的數(shù)據(jù)都是純文本，如果是在復(fù)雜的 Ajax 應(yīng)用中，可能就需要用到 XML 或者 JSON 了。

您可能感興趣的文章: