當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

ajax之深入解析（2）

發(fā)布時(shí)間：2024/7/19 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 ajax之深入解析（2）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

　　我們前面實(shí)現(xiàn)了用原生的JavaScript代碼實(shí)現(xiàn)ajax的異步數(shù)據(jù)傳輸。接下來(lái)，我們?cè)偈褂靡粋€(gè)流行的js框架jQuery來(lái)實(shí)現(xiàn)ajax。

　　通過(guò) jQuery AJAX 方法，我們能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器上請(qǐng)求文本、HTML、XML 或 JSON，同時(shí)，我們能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁(yè)里的被選元素中。在使用jQuery時(shí)，我們需要在網(wǎng)頁(yè)中引入jQuery的腳本文件。jQuery有兩個(gè)顯著特點(diǎn)，即隱式迭代和鏈?zhǔn)骄幊?#xff0c;jQuery可以用$符號(hào)表示，出現(xiàn)jQuery的地方可以使用$符號(hào)代替。

　　下面的表格列出了所有的 jQuery AJAX 方法：

方法描述

$.ajax()	執(zhí)行異步 AJAX 請(qǐng)求
$.ajaxPrefilter()	在每個(gè)請(qǐng)求發(fā)送之前且被 $.ajax() 處理之前，處理自定義 Ajax 選項(xiàng)或修改已存在選項(xiàng)
$.ajaxSetup()	為將來(lái)的 AJAX 請(qǐng)求設(shè)置默認(rèn)值
$.ajaxTransport()	創(chuàng)建處理 Ajax 數(shù)據(jù)實(shí)際傳送的對(duì)象
$.get()	使用 AJAX 的 HTTP GET 請(qǐng)求從服務(wù)器加載數(shù)據(jù)
$.getJSON()	使用 HTTP GET 請(qǐng)求從服務(wù)器加載 JSON 編碼的數(shù)據(jù)
$.getScript()	使用 AJAX 的 HTTP GET 請(qǐng)求從服務(wù)器加載并執(zhí)行 JavaScript
$.param()	創(chuàng)建數(shù)組或?qū)ο蟮男蛄谢硎拘问?#xff08;可用于 AJAX 請(qǐng)求的 URL 查詢字符串）
$.post()	使用 AJAX 的 HTTP POST 請(qǐng)求從服務(wù)器加載數(shù)據(jù)
ajaxComplete()	規(guī)定 AJAX 請(qǐng)求完成時(shí)運(yùn)行的函數(shù)
ajaxError()	規(guī)定 AJAX 請(qǐng)求失敗時(shí)運(yùn)行的函數(shù)
ajaxSend()	規(guī)定 AJAX 請(qǐng)求發(fā)送之前運(yùn)行的函數(shù)
ajaxStart()	規(guī)定第一個(gè) AJAX 請(qǐng)求開(kāi)始時(shí)運(yùn)行的函數(shù)
ajaxStop()	規(guī)定所有的 AJAX 請(qǐng)求完成時(shí)運(yùn)行的函數(shù)
ajaxSuccess()	規(guī)定 AJAX 請(qǐng)求成功完成時(shí)運(yùn)行的函數(shù)
load()	從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放置到指定的元素中
serialize()	編碼表單元素集為字符串以便提交
serializeArray()	編碼表單元素集為 names 和 values 的數(shù)組

　　我們選擇上述列表中的若干方法予以介紹。

　　jQuery load() 方法是簡(jiǎn)單但強(qiáng)大的 AJAX 方法。load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中。

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="js/jquery-1.11.1.js"></script> 7 </head> 8 <script> 9 $(document).ready(function(){ 10 $("button").click(function(){ 11 $("#content").load("resource/book.xml"); 12 }) 13 }) 14 </script> 15 <body> 16 <div id="content"><h3>演示ajx</h3></div> 17 <button>點(diǎn)擊</button> 18 </body> 19 </html>

　　可選的 callback 參數(shù)規(guī)定當(dāng) load() 方法完成后所要允許的回調(diào)函數(shù)。回調(diào)函數(shù)可以設(shè)置不同的參數(shù)：

responseTxt?- 包含調(diào)用成功時(shí)的結(jié)果內(nèi)容
statusTXT?- 包含調(diào)用的狀態(tài)
xhr?- 包含 XMLHttpRequest 對(duì)象

1 $("button").click(function(){ 2 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ 3 if(statusTxt=="success") 4 alert("外部?jī)?nèi)容加載成功!"); 5 if(statusTxt=="error") 6 alert("Error: "+xhr.status+": "+xhr.statusText); 7 }); 8 });

　　jQuery get() 和 post() 方法用于通過(guò) HTTP GET 或 POST 請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù)。　　

　　兩種在客戶端和服務(wù)器端進(jìn)行請(qǐng)求-響應(yīng)的常用方法是：GET 和 POST。

GET?- 從指定的資源請(qǐng)求數(shù)據(jù)
POST?- 向指定的資源提交要處理的數(shù)據(jù)

　　GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)。注釋：GET 方法可能返回緩存數(shù)據(jù)。

　　POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過(guò)，POST 方法不會(huì)緩存數(shù)據(jù)，并且常用于連同請(qǐng)求一起發(fā)送數(shù)據(jù)。

　　$.get() 方法通過(guò) HTTP GET 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)。

$.get(URL,callback);

　　必需的?URL?參數(shù)規(guī)定您希望請(qǐng)求的 URL。

　　可選的?callback?參數(shù)是請(qǐng)求成功后所執(zhí)行的函數(shù)名。　　

$("button").click(function(){$.get("demo_test.jsp",function(data,status){alert("數(shù)據(jù): " + data + "\n狀態(tài): " + status);}); });

　　$.post() 方法通過(guò) HTTP POST 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)。

$("button").click(function(){$.post("/try/ajax/demo_test_post.jsp",{name:"lzy",pwd:"haha"},function(data,status){alert("數(shù)據(jù): \n" + data + "\n狀態(tài): " + status);}); });

　　ajax() 方法用于執(zhí)行 AJAX（異步 HTTP）請(qǐng)求。所有的 jQuery AJAX 方法都使用 ajax() 方法。該方法通常用于其他方法不能完成的請(qǐng)求。　　

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

　　該參數(shù)規(guī)定 AJAX 請(qǐng)求的一個(gè)或多個(gè)名稱/值對(duì)。下面的表格中列出了可能的名稱/值：

名稱值/描述

async	布爾值，表示請(qǐng)求是否異步處理。默認(rèn)是 true。
beforeSend(xhr)	發(fā)送請(qǐng)求前運(yùn)行的函數(shù)。
cache	布爾值，表示瀏覽器是否緩存被請(qǐng)求頁(yè)面。默認(rèn)是 true。
complete(xhr,status)	請(qǐng)求完成時(shí)運(yùn)行的函數(shù)（在請(qǐng)求成功或失敗之后均調(diào)用，即在 success 和 error 函數(shù)之后）。
contentType	發(fā)送數(shù)據(jù)到服務(wù)器時(shí)所使用的內(nèi)容類型。默認(rèn)是："application/x-www-form-urlencoded"。
context	為所有 AJAX 相關(guān)的回調(diào)函數(shù)規(guī)定 "this" 值。
data	規(guī)定要發(fā)送到服務(wù)器的數(shù)據(jù)。
dataFilter(data,type)	用于處理 XMLHttpRequest 原始響應(yīng)數(shù)據(jù)的函數(shù)。
dataType	預(yù)期的服務(wù)器響應(yīng)的數(shù)據(jù)類型。
error(xhr,status,error)	如果請(qǐng)求失敗要運(yùn)行的函數(shù)。
global	布爾值，規(guī)定是否為請(qǐng)求觸發(fā)全局 AJAX 事件處理程序。默認(rèn)是 true。
ifModified	布爾值，規(guī)定是否僅在最后一次請(qǐng)求以來(lái)響應(yīng)發(fā)生改變時(shí)才請(qǐng)求成功。默認(rèn)是 false。
jsonp	在一個(gè) jsonp 中重寫(xiě)回調(diào)函數(shù)的字符串。
jsonpCallback	在一個(gè) jsonp 中規(guī)定回調(diào)函數(shù)的名稱。
password	規(guī)定在 HTTP 訪問(wèn)認(rèn)證請(qǐng)求中使用的密碼。
processData	布爾值，規(guī)定通過(guò)請(qǐng)求發(fā)送的數(shù)據(jù)是否轉(zhuǎn)換為查詢字符串。默認(rèn)是 true。
scriptCharset	規(guī)定請(qǐng)求的字符集。
success(result,status,xhr)	當(dāng)請(qǐng)求成功時(shí)運(yùn)行的函數(shù)。
timeout	設(shè)置本地的請(qǐng)求超時(shí)時(shí)間（以毫秒計(jì)）。
traditional	布爾值，規(guī)定是否使用參數(shù)序列化的傳統(tǒng)樣式。
type	規(guī)定請(qǐng)求的類型（GET 或 POST）。
url	規(guī)定發(fā)送請(qǐng)求的 URL。默認(rèn)是當(dāng)前頁(yè)面。
username	規(guī)定在 HTTP 訪問(wèn)認(rèn)證請(qǐng)求中使用的用戶名。
xhr	用于創(chuàng)建 XMLHttpRequest 對(duì)象的函數(shù)。

轉(zhuǎn)載于:https://www.cnblogs.com/lizhangyong/p/8385426.html

總結(jié)

以上是生活随笔為你收集整理的ajax之深入解析（2）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

Ajax
之深