文章目錄

• • 一、Ajax
  • 二、load
  • 三、ajax（參數），get，set
  • • • $.ajax
      • $.ajax的get、post簡寫形式
  • 四、ajax全部方法參考 ☆

一、Ajax

• AJAX 是與服務器交換數據的技術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。
• AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）
• 如果沒有 jQuery，AJAX 編程還是有些難度的。編寫常規的 AJAX 代碼并不容易，因為不同的瀏覽器對 AJAX 的實現并不相同。這意味著你必須編寫額外的代碼對瀏覽器進行測試。不過，jQuery 團隊為我們解決了這個難題，我們只需要一行簡單的代碼，就可以實現 AJAX 功能
• 僅介紹常用Ajax方法：load、ajax、get、post
  更多請參考：菜鳥教程 - 總有你想要的

二、load

從服務器加載數據，并把返回的數據放入被選元素中。

$(selector).load(URL,data,callback);
URL：必須，規定希望加載的 URL
data：可選，規定與請求一同發送的查詢字符串鍵/值對集合
callback：可選，回調函數。
callback的可選參數：

• responseTxt - 包含調用成功時的結果內容
• statusTXT - 包含調用的狀態
• xhr - 包含 XMLHttpRequest 對象

$("#div1").load("demo_test.txt"); // 把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中 $("#div1").load("demo_test.txt #p1"); // 在 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);}); });

tips：為了避免多頁面情形下的代碼重復，可以利用 load() 方法，將重復的部分（例如導航欄）放入單獨的文件

三、ajax（參數），get，set

$.ajax

所有的 jQuery AJAX 方法都使用 ajax() 方法。該方法通常用于其他方法不能完成的請求。即其他衍生出的get,post,load,getJSON等等均可以由ajax()方法通過參數實現。

ajax()常用參數（框架）：

$.ajax(type:"POST", // GET,POSTurl:"/index.html", // 路由async:true, // 異步嗎？默認是true，盡量少用同步data：{ // 規定要發送到服務器的數據id:"1",name:"Jack,Rose",kinds:"Lover"},// 成功回調函數success:function(data,status){Console.log("請求成功！"); // 控制臺輸出Console.log("data:");Console.log(data);Console.log("status:");Console.log(status);} );

ajax方法的所有參數：

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 對象的函數。

$.ajax的get、post簡寫形式

• $.get —— 從指定的資源請求數據
  $.get(URL,callback);
  URL：必選，訪問的地址
  callback：可選
  回調參數：
  • data —— 可選，被請求頁面的內容
  • status —— 可選，請求的狀態
    
    
• $.post —— 通過 HTTP POST 請求向服務器提交數據
  $.post(URL,data,callback);
  URL：必選，訪問的地址
  data:可選，規定連同請求發送的數據
  callback：可選
  回調參數：
  • data —— 可選，被請求頁面的內容
  • status —— 可選，請求的狀態

$("button").click(function(){$.post("www.baidu.com",{name:"post請求",time:"2019/12/20"},// post請求成功后調用此函數function(data,status){alert("數據: \n" + data + "\n狀態: " + status);}); });

tips：
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 方法主要用于更新數據。

四、ajax全部方法參考 ☆

菜鳥教程 - AJAX方法

總結

以上是生活随笔為你收集整理的jQuery对Ajax的封装应用（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。