jQuery AJAX

語言: CN / TW / HK

時間 2021-09-06 00:01:18 彩色泡泡糖

本節我們學習 AJAX，AJAX 是 Asynchronous Javascript And XML 的首字母縮寫，譯為非同步 JavaScript 和 XML。是指一種建立互動式、快速動態網頁應用的網頁開發技術，可以在不需要重新載入整個網頁的情況下，更新部分網頁的技術。

AJAX 不是一種新的程式語言，而是一種用於建立更好更快以及互動性更強的 Web 應用程式的技術。

jQuery 提供多個與 AJAX 有關的方法。通過 jQuery 提供的 AJAX 方法，我們可以使用 HTTP 的 Get 和 Post 請求從遠端伺服器上請求文字、HTML、XML 或 JSON，並且能夠把這些外部資料直接載入網頁的被選元素中。

load()方法

load() 方法是一個簡單但強大的 AJAX 方法。可以從伺服器載入資料，並把返回的資料放置到指定的元素中。

語法如下：

$(selector).load(url,data,function(response,status,xhr))

url：必需的引數，指定載入的 url。
data：可選引數，指定一組要隨請求一起傳送的 querystring 鍵值對。
function(response,status,xhr)：可選引數，規定 load() 方法完成時執行的回撥函式。

回撥函式的三個引數：

responseTxt ：如果呼叫成功，包含來自請求的結果資料。
statusTxt ：包含請求的狀態。
- success
- notmodified
- error
- timeout
- parsererror
xhr ：包含 xmlhttprequest 物件。

示例：

例如將檔名為 test_ajax.txt 檔案中的內容載入到指定的 <div> 元素中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("#add").load("./test_ajax.txt");
    });
  });
</script>
</head>
<body>
  <p>將 test_ajax.txt 檔案中的內容新增到下面 div 元素中：</p>
  <div id="add"></div>
  <p><button>點選新增</button></p>
</body>
</html>

test_ajax.txt 檔案內容：

你好，俠課島！

在瀏覽器中的演示效果：

我們還可以通過可選的 callback 引數在 load() 方法完成後顯示一個提示框，例如成功執行顯示"外部內容載入成功！"，如果失敗，則顯示錯誤訊息：

$(function(){
    $("button").click(function(){
      $("#add").load("./test_ajax.txt", function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success"){
          alert("外部內容載入成功！");
        }
        if(statusTxt=="error"){
          alert("Error: "+xhr.status+": "+xhr.statusText);
        }
      });
    });
});

演示效果：

Get和Post請求

jQuery 中的 get() 和 post() 方法用於通過 HTTP 的 GET 或 POST 請求從伺服器請求資料。

GET 請求：從指定的資源請求資料。
POST 請求：向指定的資源提交要處理的資料。

GET 基本上用於從伺服器獲得資料。POST 也可用於從伺服器獲取資料。不過，POST 方法不會快取資料，並且常用於連同請求一起傳送資料。

$.get() 方法

$.get() 方法通過 GET 請求從伺服器上請求資料。

語法如下：

$.get(URL,callback);

URL ：必需引數，用於規定希望請求的 URL。
callback ：可選引數，是請求成功後所執行的函式名。

示例：

例如使用 $.get() 方法從伺服器上的一個檔案中取回資料：

$(function(){
    $("button").click(function(){
      $.get("./test_ajax.txt", function(data, status){
        alert("內容：" + data + "\n狀態：" + status);
      });
    });
});

演示效果：

可以看到，在 $get 方法中的回撥函式帶有兩個引數，引數 data 返回 test_ajax.txt 檔案的內容，引數 status 返回請求狀態，success 表示請求成功。

$.post()方法

$.post() 方法通過 POST 請求從伺服器上請求資料。

語法如下：

$.post(URL,data,callback);

URL ：必需引數，用於規定希望請求的 URL。
data ：可選引數，用於規定連同請求傳送的資料。
callback：可選引數，是請求成功後所執行的函式名。

示例：

$(function(){
    $("button").click(function(){
      $.post("./test_ajax.txt", 
      function(data, status){
        alert("內容：" + data + "\n狀態：" + status);
      });
    });
});

演示效果：

ajax()方法

ajax() 方法用於執行 AJAX（非同步 HTTP）請求。所有的 jQuery AJAX 方法都使用 ajax() 方法。該方法通常用於其他方法不能完成的請求。

語法如下：

$.ajax({name:value, name:value, ... })

ajax() 方法中引數規定 AJAX 請求的一個或多個名稱/值對。

示例：

使用 AJAX 請求將獲取到的內容新增到 <div> 元素中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $.ajax({url:"./test_ajax.txt", success:function(result){
        $("#add").html(result);
        }});
    });
  });
</script>
</head>
<body>
  <p>將 test_ajax.txt 檔案中的內容新增到下面 div 元素中：</p>
  <div id="add"></div>
  <p><button>點選新增</button></p>
</body>
</html>

演示效果：

ajax() 方法中可能出現的名稱/值有如下所示：

名稱	值/描述
async	布林值，表示請求是否非同步處理。預設是 true。
beforeSend(xhr)	傳送請求前執行的函式。
cache	布林值，表示瀏覽器是否快取被請求頁面。預設是 true。
complete(xhr,status)	請求完成時執行的函式（在請求成功或失敗之後均呼叫，即在 success 和 error 函式之後）。
contentType	傳送資料到伺服器時所使用的內容型別。預設是："application/x-www-form-urlencoded"。
context	為所有 AJAX 相關的回撥函式規定 "this" 值。
data	規定要傳送到伺服器的資料。
dataFilter(data, type)	用於處理 XMLHttpRequest 原始響應資料的函式。
dataType	預期的伺服器響應的資料型別。
error(xhr,status,error)	如果請求失敗要執行的函式。
global	布林值，規定是否為請求觸發全域性 AJAX 事件處理程式。預設是 true。
ifModified	布林值，規定是否僅在最後一次請求以來響應發生改變時才請求成功。預設是 false。
jsonp	在一個 jsonp 中重寫回調函式的字串。
jsonpCallback	在一個 jsonp 中規定回撥函式的名稱。
password	規定在 HTTP 訪問認證請求中使用的密碼。
processData	布林值，規定通過請求傳送的資料是否轉換為查詢字串。預設是 true。
scriptCharset	規定請求的字符集。
success(result,status,xhr)	當請求成功時執行的函式。
timeout	設定本地的請求超時時間（以毫秒計）。
traditional	布林值，規定是否使用引數序列化的傳統樣式。
type	規定請求的型別（GET 或 POST）。
url	規定傳送請求的 URL。預設是當前頁面。
username	規定在 HTTP 訪問認證請求中使用的使用者名稱。
xhr	用於建立 XMLHttpRequest 物件的函式。

「其他文章」