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

编程问答

ajax.request函数使用详解

發(fā)布時(shí)間：2023/12/29 编程问答 59 豆豆

生活随笔收集整理的這篇文章主要介紹了 ajax.request函数使用详解小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

ajax.request函數(shù)使用詳解

Ajax.Request

Ajax.Request( url, { method:method, parameters:para, postBody:xmlString, asynchronous:true, setRequestHeader:Object, onComplete:completeFun, onError:errorFun } )

發(fā)送異步請(qǐng)求。（此方法是為兼容 prototype.js 而寫，調(diào)用風(fēng)格與 prototype 一致,使用Ajax.Request此方法請(qǐng)?jiān)陧撁嬷屑虞d此js文件）

參數(shù)
url
必選項(xiàng)。數(shù)據(jù)發(fā)送的目標(biāo)地址。
method
可選項(xiàng)。數(shù)據(jù)提交的方式，默認(rèn)值為get。常用的還有post。
parameters
當(dāng) method 為 get 時(shí)是可選項(xiàng)，為 post 時(shí)是必選項(xiàng)。發(fā)送的數(shù)據(jù)，其形式為： name1=valeu1& name2=value2&name3=value3......
postBody
可選項(xiàng)。客戶端發(fā)送的 xml 格式字符串。如果啟用 postBody，那么 parameters 將被忽略。
asynchronous
可選項(xiàng)。指定請(qǐng)求是否異步，默認(rèn)為true（異步）。
setRequestHeader
指定請(qǐng)求的頭部字串。其值類型為“名稱值對(duì)”形式的對(duì)象，比如：{"If-Modified-Since":"0", "SOAPAction":"http://tempuri.org/SBS_WebService", ... ... }
onComplete
可選項(xiàng)。請(qǐng)求成功時(shí)執(zhí)行的回調(diào)函數(shù)，該函數(shù)默認(rèn)把當(dāng)前使用 xmlhttp 對(duì)象作為第一個(gè)參數(shù)。
onError
可選項(xiàng)。請(qǐng)求異常時(shí)執(zhí)行的回調(diào)函數(shù)，該函數(shù)默認(rèn)把當(dāng)前使用 xmlhttp 對(duì)象作為第一個(gè)參數(shù)。
返回值
當(dāng)前使用的 xmlhttp 對(duì)象。

描述
發(fā)送異步請(qǐng)求，并返回 xmlhttp 對(duì)象，該對(duì)象內(nèi)置有 abort() 方法，用于提前終止請(qǐng)求。異步請(qǐng)求成功則執(zhí)行 onComplete，失敗則執(zhí)行 onError 。并返回 xmlhttp 對(duì)象。
Ajax.Request 是個(gè)接口完整的 Ajax 方法，是 myJSFrame 中所有其他 Ajax 方法的核心方法。

示例
示例一：

?注：parameters 參數(shù)若是不列出，我們?cè)陂_發(fā)中對(duì)于Form 表單這樣的數(shù)據(jù) 可以這樣處理

?parameters:Form.serialize('FormName')?? FormName? 為頁面中表單的 ID

?
示例二：

為了支持 AJAX 功能。這個(gè)包定義了 Ajax.Request 類。

假如你有一個(gè)應(yīng)用程序可以通過url http://yoursever/app/get_sales?empID=1234&year=1998與服務(wù)器通信。它返回下面這樣的XML 響應(yīng)。

<?xml version="1.0" encoding="utf-8" ?> <ajax-response><response type="object" id="productDetails"><monthly-sales><employee-sales><employee-id>1234</employee-id><year-month>1998-01</year-month><sales>$8,115.36</sales></employee-sales><employee-sales><employee-id>1234</employee-id><year-month>1998-02</year-month><sales>$11,147.51</sales></employee-sales></monthly-sales></response> </ajax-response>

用 Ajax.Request對(duì)象和服務(wù)器通信并且得到這段XML是非常簡(jiǎn)單的。下面的例子演示了它是如何完成的。

你看到傳入 Ajax.Request構(gòu)造方法的第二個(gè)對(duì)象了嗎？參數(shù){method: 'get', parameters: pars, onComplete: showResponse} 表示一個(gè)匿名對(duì)象的真實(shí)寫法。他表示你傳入的這個(gè)對(duì)象有一個(gè)名為 method 值為 'get'的屬性，另一個(gè)屬性名為 parameters 包含HTTP請(qǐng)求的查詢字符串，和一個(gè)onComplete 屬性/方法包含函數(shù)showResponse。

還有一些其它的屬性可以在這個(gè)對(duì)象里面定義和設(shè)置，如 asynchronous，可以為true 或 false 來決定AJAX對(duì)服務(wù)器的調(diào)用是否是異步的（默認(rèn)值是 true）。

這個(gè)參數(shù)定義AJAX調(diào)用的選項(xiàng)。在我們的例子中，在第一個(gè)參數(shù)通過HTTP GET命令請(qǐng)求那個(gè)url，傳入了變量 pars包含的查詢字符串， Ajax.Request 對(duì)象在它完成接收響應(yīng)的時(shí)候?qū)⒄{(diào)用showResponse 方法。

也許你知道， XMLHttpRequest在HTTP請(qǐng)求期間將報(bào)告進(jìn)度情況。這個(gè)進(jìn)度被描述為四個(gè)不同階段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 對(duì)象在任何階段調(diào)用自定義方法，Complete 是最常用的一個(gè)。想調(diào)用自定義的方法只需要簡(jiǎn)單的在請(qǐng)求的選項(xiàng)參數(shù)中的名為 onXXXXX 屬性/方法中提供自定義的方法對(duì)象。就像我們例子中的 onComplete 。你傳入的方法將會(huì)被用一個(gè)參數(shù)調(diào)用，這個(gè)參數(shù)是 XMLHttpRequest 對(duì)象自己。你將會(huì)用這個(gè)對(duì)象去得到返回的數(shù)據(jù)并且或許檢查包含有在這次調(diào)用中的HTTP結(jié)果代碼的 status 屬性。

還有另外兩個(gè)有用的選項(xiàng)用來處理結(jié)果。我們可以在onSuccess 選項(xiàng)處傳入一個(gè)方法，當(dāng)AJAX無誤的執(zhí)行完后調(diào)用，相反的，也可以在onFailure選項(xiàng)處傳入一個(gè)方法，當(dāng)服務(wù)器端出現(xiàn)錯(cuò)誤時(shí)調(diào)用。正如onXXXXX 選項(xiàng)傳入的方法一樣，這兩個(gè)在被調(diào)用的時(shí)候也傳入一個(gè)帶有AJAX請(qǐng)求的XMLHttpRequest對(duì)象。

我們的例子沒有用任何有趣的方式處理這個(gè) XML響應(yīng)，我們只是把這段XML放進(jìn)了一個(gè)文本域里面。對(duì)這個(gè)響應(yīng)的一個(gè)典型的應(yīng)用很可能就是找到其中的想要的信息，然后更新頁面中的某些元素，或者甚至可能做某些XSLT轉(zhuǎn)換而在頁面中產(chǎn)生一些HTML。

new Ajax.Request(url[, options])

初始化并處理一個(gè) AJAX 請(qǐng)求.

該對(duì)象是一個(gè)具有多種用途的 AJAX 請(qǐng)求：它管理請(qǐng)求的生命周期，處理“樣板文件”代碼（boilerplate），讓你能夠按照你的需要在指定的階段插入所需的回調(diào)函數(shù)。

options 是一個(gè)可選的 hash 參數(shù)，除非你獲取一個(gè)將會(huì)被 eval 自動(dòng)執(zhí)行的 Javascript 類型的響應(yīng)，否則通常需要提供onComplete 和/或onSuccess 回調(diào)函數(shù)。

公用選項(xiàng)和回調(diào)函數(shù)的完整列表，請(qǐng)參見 Ajax 選項(xiàng)。

創(chuàng)建一個(gè)請(qǐng)求唯一恰當(dāng)?shù)姆椒ㄊ峭ㄟ^ new 操作符。在對(duì)象被創(chuàng)建后，就開始了請(qǐng)求過程，對(duì)該對(duì)象的處理貫穿了請(qǐng)求的整個(gè)生命周期。

一個(gè)基本的樣例

請(qǐng)求生命周期

在我們完美的請(qǐng)求對(duì)象下面，當(dāng)然是 XMLHttpRequest。請(qǐng)求定義的生命周期如下：

創(chuàng)建（Created）

初始化（Initialized）

請(qǐng)求發(fā)送（Request sent）

響應(yīng)接收（Response being received）（可能發(fā)生多次，根據(jù)返回包的數(shù)目而定）

響應(yīng)接收完成，請(qǐng)求結(jié)束（Response received）

你也可以參閱 Ajax 選項(xiàng)，Prototype 的 AJAX 對(duì)象定義了完整的回調(diào)系列，它們按照下述的順序被觸發(fā)：

onCreate（實(shí)際上這是被 AJAX 全局響應(yīng)器保留的回調(diào)）。

onUninitialized（對(duì)應(yīng)于“創(chuàng)建”[Created]）

onLoading（對(duì)應(yīng)于“初始化”[Initialized]）

onLoaded（對(duì)應(yīng)于“請(qǐng)求發(fā)送”[Request sent]）

onInteractive（對(duì)應(yīng)于“響應(yīng)接收”[Response being received]）

onXYZ（XYZ 表示響應(yīng)的狀態(tài)代碼，參見狀態(tài)代碼）對(duì)應(yīng)于指定的響應(yīng)狀態(tài)代碼回調(diào)、onSuccess 或 onFailure（見下文）

onComplete

最后兩步對(duì)應(yīng)于響應(yīng)接收完成（Response received）。如果定義了一個(gè)與指定狀態(tài)代碼相關(guān)的回調(diào)函數(shù)，它將會(huì)被調(diào)用。否則，如果 onSuccess 被定義并且響應(yīng)被認(rèn)為是成功的（見下文），onSuccess 就會(huì)被調(diào)用，如果響應(yīng)不成功并且定義了 onFailure，則調(diào)用 onFailure。onComplete 在上述回調(diào)結(jié)束后才會(huì)被調(diào)用。

一個(gè)關(guān)于可移植性的提示

依賴于瀏覽器對(duì) XMLHttpRequest 的不同實(shí)現(xiàn)，一個(gè)或多個(gè)回調(diào)可能永遠(yuǎn)都不會(huì)被調(diào)用。尤其是 onLoaded 和onInteractive，迄今為止仍不是一個(gè)穩(wěn)贏的賭注。然而，全局的onCreate、onUninitialized 以及最后的兩個(gè)步驟還是可以保障的。

onSuccess 和 onFailure, 未充分利用的回調(diào)

很多人使用 Ajax.Request 的方式在一定程度上仍然類似于使用原始的 XHR：即使他們只關(guān)心“成功”的響應(yīng)，仍定義一個(gè) onComplete 回調(diào)，然后手動(dòng)測(cè)試：

// 太糟糕了，有更好的做法！ new Ajax.Request('/your/url', { onComplete: function(transport) { if (200 == transport.status) // yada yada yada } } );

首先，就像下面所描述的那樣，你可以使用更好的“成功”檢測(cè)：成功通常被定義為沒有響應(yīng)狀態(tài)代碼或者響應(yīng)狀態(tài)代碼為 "2xy" 系列（如 201 也被認(rèn)為是成功的）。參見下面的樣例。

其次，你完全可以省略狀態(tài)代碼測(cè)試！Prototype 增加了指明成功或失敗的回調(diào)函數(shù)，我們?cè)谏厦嬉呀?jīng)列出。如果你僅對(duì)成功感興趣，可以采用如下方式：

new Ajax.Request('/your/url',{ onSuccess: function(transport){ // yada yada yada } } );

自動(dòng)執(zhí)行 Javascript 響應(yīng)

如果一個(gè) AJAX 請(qǐng)求遵循 SOP （譯注：中文說明），并且它的響應(yīng)的 content-type 與 Javascript 相關(guān)，responseText 屬性的內(nèi)容將會(huì)自動(dòng)傳遞給 eval。

這意味著若 AJAX 響應(yīng)的內(nèi)容是純粹的 Javascript，你甚至不需要提供一個(gè)回調(diào)來處理它。這非常酷，不是嗎？下面列出了 Prototype 能夠處理的與 Javascript 相關(guān)的 MIME 類型：

application/ecmascript
application/javascript
application/x-ecmascript
application/x-javascript
text/ecmascript
text/javascript
text/x-ecmascript
text/x-javascript

MIME 類型字符串的檢測(cè)不區(qū)分大小寫。

可能常用的方法

請(qǐng)求對(duì)象的實(shí)例提供了一些方法，在回調(diào)函數(shù)中，你遲早會(huì)用到它們，尤其是當(dāng)請(qǐng)求完成時(shí)。

1、是否是一個(gè)成功的響應(yīng)？

success() 方法檢測(cè) XHR 的 staus 屬性，它遵循以下的規(guī)則：未知的狀態(tài)被認(rèn)為是成功的， 2xy 系列狀態(tài)代碼也認(rèn)為是成功的。通常這比你使用200 == transport.status 測(cè)試響應(yīng)更為有效。

2、獲取 HTTP 響應(yīng)頭

如果你使用 XHR 對(duì)象的 getResponseHeader 方法從 XHR 對(duì)象中獲取響應(yīng)頭，會(huì)導(dǎo)致代碼變得冗長(zhǎng)，并且有些實(shí)現(xiàn)在找不到指定頭時(shí)，會(huì)引發(fā)異常。為簡(jiǎn)化這個(gè)處理過程，可以使用Ajax.Response#getHeader 方法，那些冗長(zhǎng)的代碼將由它來內(nèi)置處理，并且發(fā)生異常時(shí)，它將返回一個(gè)null 值。

new Ajax.Request('/your/url', { onSuccess: function(response){ // 注意對(duì) null 值的處理 if ((response.getHeader('Server') || '').match(/Apache/)) ++gApacheCount; // 其余的代碼 } } );

3、執(zhí)行 JSON 頭

有時(shí)后端返回 JSON 文本不是通過響應(yīng)內(nèi)容，而是通過 X-JSON 頭。在這種情況下，你甚至不需要自己執(zhí)行返回的 JSON 文本，Prototype 自動(dòng)完成了這項(xiàng)工作并將結(jié)果傳遞給Ajax.Response 對(duì)象的headerJSON 屬性。注意：如果指定的頭不存在或者頭的內(nèi)容是非法的，這個(gè)屬性將被設(shè)置為null。

new Ajax.Request('/your/url', { onSuccess: function(transport) {transport.headerJSON}}); posted on 2013-09-30 17:47 moonfans 閱讀(...) 評(píng)論(...) 編輯收藏

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

總結(jié)

以上是生活随笔為你收集整理的ajax.request函数使用详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：洛谷 P5734 【深基6.例6】文字处
下一篇：从摄影到立体影像的基础（一）