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

Ajax.Request

?

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

發(fā)送異步請求。（此方法是為兼容 prototype.js 而寫，調(diào)用風格與 prototype 一致,使用Ajax.Request此方法請在頁面中加載此js文件）

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

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

示例
示例一：

?

<script type="text/javascript" > ???var myAjax = new Ajax.Request( ????????"http://www.happyshow.org/form.asp", ????????{ ????????????method:"post",?????? //表單提交方式? ????????????parameters:"name=acai&age=26&sex=male",?? //提交的表單數(shù)據(jù) ????????????setRequestHeader:{"If-Modified-Since":"0"},???? //禁止讀取緩存數(shù)據(jù) ????????????onComplete:function(x){??? //提交成功回調(diào)? ????????????????????alert(x.responseText); ????????????}, ????????????onError:function(x){????????? //提交失敗回調(diào) ????????????????????alert(x.statusText); ????????????}? ????????}? ???);? </script>

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

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

?
示例二：

?

<script type="text/javascript" > ???var xmlString = "<root>" ???????????????????????????+"<people><name>caizhongqi</name><sex>male</sex></people>" ???????????????????????????+"<people><name>ahuang</name><sex>female</sex></people>" ??????????????????????+" </root>"; ???var myAjax = new Ajax.Request( ????????"http://www.happyshow.org/xmlform.asp", ????????{ ????????????method:"post",?????? //表單提交方式? ????????????postBody:xmlString,?? //提交的xml ????????????setRequestHeader:{"content-Type":"text/xml"},???? //指定發(fā)送的數(shù)據(jù)為 xml 文檔（非字符串） ????????????onComplete:function(x){??? //提交成功回調(diào)? ????????????????????alert(x.responseXML.xml); ????????????}, ????????????onError:function(x){????????? //提交失敗回調(diào) ????????????????????alert(x.statusText); ????????????}? ????????}? ???);? </script>

?

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

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

?

<?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對象和服務器通信并且得到這段XML是非常簡單的。下面的例子演示了它是如何完成的。

?

<script>function searchSales(){var empID = $F('lstEmployees');var y = $F('lstYears');var url = 'http://yoursever/app/get_sales';var pars = 'empID=' + empID + '&year=' + y;var myAjax = new Ajax.Request(url,{method: 'get', parameters: pars, onComplete: showResponse});}function showResponse(originalRequest){//put returned XML in the textarea $('result').value = originalRequest.responseText;} </script><select id="lstEmployees" size="10" onchange="searchSales()"><option value="5">Buchanan, Steven</option><option value="8">Callahan, Laura</option><option value="1">Davolio, Nancy</option> </select> <select id="lstYears" size="3" onchange="searchSales()"><option selected="selected" value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option> </select> <br><textarea id=result cols=60 rows=10 ></textarea>

?

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

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

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

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

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

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

new Ajax.Request(url[, options])

初始化并處理一個 AJAX 請求.

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

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

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

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

一個基本的樣例

var url = '/proxy?url=' + encodeURIComponent('http://www.google.com/search?q=Prototype');// 注意：使用 proxy 是為了避開 SOP（參見：SOP)new Ajax.Request(url, { method: 'get',onSuccess: function(transport) {var notice = $('notice');if (transport.responseText.match(/href="http:\/\/prototypejs.org/))notice.update('Yeah! You are in the Top 10!').setStyle({ background: '#dfd' });elsenotice.update('Damn! You are beyond #10...').setStyle({ background: '#fdd' });}});

?

?

請求生命周期

在我們完美的請求對象下面，當然是 XMLHttpRequest。請求定義的生命周期如下：

創(chuàng)建（Created）

初始化（Initialized）

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

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

響應接收完成，請求結(jié)束（Response received）

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

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

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

onLoading（對應于“初始化”[Initialized]）

onLoaded（對應于“請求發(fā)送”[Request sent]）

onInteractive（對應于“響應接收”[Response being received]）

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

onComplete

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

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

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

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

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

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

?

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

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

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

?

自動執(zhí)行 Javascript 響應

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

這意味著若 AJAX 響應的內(nèi)容是純粹的 Javascript，你甚至不需要提供一個回調(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 類型字符串的檢測不區(qū)分大小寫。

可能常用的方法

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

1、是否是一個成功的響應？

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

2、獲取 HTTP 響應頭

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

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

?

3、執(zhí)行 JSON 頭

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

?

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

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

總結(jié)

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

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