jQuery - AJAX（八）

阿新 • • 發佈：2020-09-19

jQuery AJAX

jQuery ALAX 簡介

AJAX 是與伺服器交換資料的技術，它在不過載全部頁面的情況下，實現了對部分網頁的更新
AJAX = 非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）
簡短地說，在不過載整個網頁的情況下，AJAX 通過後臺載入資料，並在網頁上進行顯示

jQuery 與 AJAX

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

jQuery -AJAX load() 方法

jQuery load() 方法是簡單但強大的 AJAX 方法
load() 方法從伺服器載入資料，並把返回的資料放入被選元素中

$(selector).load(URL,data,callback);

必需的 URL 引數規定您希望載入的 URL
可選的 data 引數規定與請求一同傳送的查詢字串鍵/值對集合
可選的 callback 引數是 load() 方法完成後所執行的函式名稱

// 這是示例檔案（demo_test.txt）的內容
<h2>
    jQuery AJAX 是個非常棒的功能！
</h2>
<p id="p1">
    這是一個段落...
</p>

下面的例子會把檔案 "demo_test.txt" 的內容載入到指定的 <div> 元素中

$("#div1").load("demo_test.txt");

也可以把 jQuery 選擇器新增到 URL 引數中
下面的例子把 "demo_test.txt" 檔案中 id="p1" 的元素的內容，載入到指定的 <div> 元素中

$("#div1").load("demo_test.txt #p1");

可選的 callback 引數規定當 load() 方法完成後所要允許的回撥函式。回撥函式可以設定不同的引數
- responseTxt
  
  - 包含呼叫成功時的結果內容
- statusTxt - 包含呼叫的狀態
- xhr - 包含 XMLHttpRequest 物件

// 下面的例子會在 load() 方法完成後顯示一個提示框。如果 load() 方法已成功，則顯示"外部內容載入成功！"，而如果失敗，則顯示錯誤訊息
$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部內容載入成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

為了避免多頁面情形下的程式碼重複，可以利用 load() 方法，將重複的部分（例如導航欄）放入單獨的檔案，使用下列方法進行匯入

//1.當前檔案中要插入的地方使用此結構：
<div class="include" file="***.html"></div>

//2.***.html中放入內容，用html格式僅僅因為會有編輯器的書寫輔助。。

//3.程式碼：
$(".include").each(function() {
    if (!!$(this).attr("file")) {
        var $includeObj = $(this);
        $(this).load($(this).attr("file"), function(html) {
            $includeObj.after(html).remove(); //載入的檔案內容寫入到當前標籤後面並移除當前標籤
        })
    }
});
// 或者在index檔案裡只寫重複部分，剩下的一股腦放各自單獨檔案 load() 進來~

jQuery -AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用於通過 HTTP GET 或 POST 請求從伺服器請求資料
兩種在客戶端和伺服器端進行請求-響應的常用方法是：GET 和 POST
- GET - 從指定的資源請求資料
- POST - 向指定的資源提交要處理的資料
GET 基本上用於從伺服器獲得（取回）資料。註釋：GET 方法可能返回快取資料
POST 也可用於從伺服器獲取資料。不過，POST 方法不會快取資料，並且常用於連同請求一起傳送資料

GET 和 POST 方法的區別

1、傳送的資料數量

在 GET 中，只能傳送有限數量的資料，因為資料是在 URL 中傳送的。

在 POST 中，可以傳送大量的資料，因為資料是在正文主體中傳送的。

2、安全性

GET 方法傳送的資料不受保護，因為資料在 URL 欄中公開，這增加了漏洞和黑客攻擊的風險。

POST 方法傳送的資料是安全的，因為資料未在 URL 欄中公開，還可以在其中使用多種編碼技術，這使其具有彈性。

3、加入書籤中

GET 查詢的結果可以加入書籤中，因為它以 URL 的形式存在；而 POST 查詢的結果無法加入書籤中。

4、編碼

在表單中使用 GET 方法時，資料型別中只接受 ASCII 字元。

在表單提交時，POST 方法不繫結表單資料型別，並允許二進位制和 ASCII 字元。

5、可變大小

GET 方法中的可變大小約為 2000 個字元。

POST 方法最多允許 8 Mb 的可變大小。

6、快取

GET 方法的資料是可快取的，而 POST 方法的資料是無法快取的。

7、主要作用

GET 方法主要用於獲取資訊。而 POST 方法主要用於更新資料。

jQuery $.get() 方法

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

// 語法
$.get(URL,callback);

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

// 下面的例子使用 $.get() 方法從伺服器上的一個檔案中取回資料
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("資料: " + data + "\n狀態: " + status);
  });
});

$.get() 的第一個引數是我們希望請求的 URL（"demo_test.php"）
第二個引數是回撥函式。第一個回撥引數存有被請求頁面的內容，第二個回撥引數存有請求的狀態

提示：這個 PHP 檔案 ("demo_test.php") 類似這樣

<?php
echo '這是個從PHP檔案中讀取的資料。';
?>

jQuery $.post() 方法

$.post() 方法通過 HTTP POST 請求向伺服器提交資料

// 語法
$.post(URL,data,callback);

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

// 下面的例子使用 $.post() 連同請求一起傳送資料
$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鳥教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("資料: \n" + data + "\n狀態: " + status);
    });
});

$.post() 的第一個引數是我們希望請求的 URL ("demo_test_post.php")
然後我們連同請求（name 和 url）一起傳送資料
"demo_test_post.php" 中的 PHP 指令碼讀取這些引數，對它們進行處理，然後返回結果
第三個引數是回撥函式。第一個回撥引數存有被請求頁面的內容，而第二個引數存有請求的狀態

提示：這個 PHP 檔案 ("demo_test_post.php") 類似這樣

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '網站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>