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

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

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

描述
發送異步請求，并返回 xmlhttp 對象，該對象內置有 abort() 方法，用于提前終止請求。異步請求成功則執行 onComplete，失敗則執行 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", //提交的表單數據 setRequestHeader:{"If-Modified-Since":"0"}, //禁止讀取緩存數據 onComplete:function(x){ //提交成功回調 alert(x.responseText);},onError:function(x){ //提交失敗回調 alert(x.statusText);} } ); </script>

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

?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"}, //指定發送的數據為 xml 文檔（非字符串） onComplete:function(x){ //提交成功回調 alert(x.responseXML.xml);},onError:function(x){ //提交失敗回調 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構造方法的第二個對象了嗎？

參數{method: 'get', parameters: pars, onComplete: showResponse}?表示一個匿名對象的真實寫法。

他表示你傳入的這個對象有一個名為?method?值為?'get'的屬性，另一個屬性名為?parameters?包含HTTP請求的查詢字符串，和一個onComplete?屬性/方法包含函數showResponse。

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

這個參數定義AJAX調用的選項。

在我們的例子中，在第一個參數通過HTTP GET命令請求那個url，傳入了變量?pars包含的查詢字符串，?Ajax.Request?對象在它完成接收響應的時候將調用showResponse?方法。

也許你知道，?XMLHttpRequest在HTTP請求期間將報告進度情況。

這個進度被描述為四個不同階段：Loading,?Loaded,?Interactive, 或?Complete。

你可以使?Ajax.Request?對象在任何階段調用自定義方法 ，Complete?是最常用的一個。

想調用自定義的方法只需要簡單的在請求的選項參數中的名為?onXXXXX?屬性/方法中提供自定義的方法對象。

就像我們例子中的?onComplete?。你傳入的方法將會被用一個參數調用，這個參數是?XMLHttpRequest?對象自己。

你將會用這個對象去得到返回的數據并且或許檢查包含有在這次調用中的HTTP結果代碼的?status?屬性。

還有另外兩個有用的選項用來處理結果。

我們可以在onSuccess?選項處傳入一個方法，當AJAX無誤的執行完后調用， 相反的，也可以在onFailure選項處傳入一個方法，當服務器端出現錯誤時調用。

正如onXXXXX?選項傳入的方法一樣，這兩個在被調用的時候也傳入一個帶有AJAX請求的XMLHttpRequest對象。

我們的例子沒有用任何有趣的方式處理這個 XML響應， 我們只是把這段XML放進了一個文本域里面。

對這個響應的一個典型的應用很可能就是找到其中的想要的信息，然后更新頁面中的某些元素， 或者甚至可能做某些XSLT轉換而在頁面中產生一些HTML。

new Ajax.Request(url[, options])

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

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

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

公用選項和回調函數的完整列表，請參見?Ajax 選項。

創建一個請求唯一恰當的方法是通過?new?操作符。在對象被創建后，就開始了請求過程， 對該對象的處理貫穿了請求的整個生命周期。

一個基本的樣例

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。請求定義的生命周期如下：

創建（Created）

初始化（Initialized）

請求發送（Request sent）

響應接收（Response being received）（可能發生多次，根據返回包的數目而定）

響應接收完成，請求結束（Response received）

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

onCreate（實際上這是被?AJAX 全局響應器?保留的回調）。

onUninitialized（對應于“創建”[Created]）

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

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

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

onXYZ（XYZ?表示響應的狀態代碼，參見狀態代碼）對應于指定的響應狀態代碼回調、onSuccess 或 onFailure（見下文）

onComplete

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

一個關于可移植性的提示

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

onSuccess?和?onFailure, 未充分利用的回調

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

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

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

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

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

自動執行 Javascript 響應

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

這意味著若 AJAX 響應的內容是純粹的 Javascript，你甚至不需要提供一個回調來處理它。這非?？?#xff0c;不是嗎？下面列出了 Prototype 能夠處理的與 Javascript 相關的 MIME 類型：

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

MIME 類型字符串的檢測不區分大小寫。

可能常用的方法

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

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

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

2、獲取 HTTP 響應頭

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

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

3、執行 JSON 頭

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

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

Ajax.Updater類是對Ajax.Request類的簡化，使用該類不需要使用回調方法，該類自動講服務器響應顯示到某個容器。

下面就是一個簡單的例子：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/"; %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><title>輸入提示示范</title><meta name="author" content="Yeeku.H.Lee" /><meta name="website" content="http://www.crazyit.org" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /></head><body><h3>請輸入您喜歡的水果</h3><div style="width: 280px; font-size: 9pt">輸入apple、banana、peach可看到明顯效果:</div><br /><input id="favorite" name="favorite" type="text"onblur="$('tips').hide();" /><img id="Loadingimg" src="img/indicator.gif" style="display: none" /><div id="tips"style="width: 160px; border: 1px solid menu; background-color: #ffffcc; display: none;"></div><script src="js/prototype-1.6.0.3.js" type="text/javascript"></script><script type="text/javascript">//發送請求的函數function searchFruit() {//定義發送請求的服務器地址var url = 'TipServlet';//取得請求參數字符串var params = $('favorite').serialize();//創建Ajax.Updater對象，對應于發送一次請求var myAjax = new Ajax.Updater(//指定tips作為服務器響應的容器'tips', url, {//發送請求的方法 method : 'post',//請求參數 parameters : params,//指定Ajax交互結束后的回調函數，匿名函數——顯示id為tips的元素 onComplete : function() {$('tips').show();}});}//為表單域綁定事件監聽器new Form.Element.Observer("favorite", 0.5, searchFruit);//定義Ajax事件的全局處理器var myGlobalHandlers = {//當開始Ajax交互時，激發該函數 onCreate : function() {$('Loadingimg').show();},//當Ajax交互失敗后，激發該函數。 onFailure : function() {alert('對不起!\n頁面加載出錯!');},//當Ajax交互結束后，激發該函數。 onComplete : function() {//如果所有Ajax交互都已完成，隱藏Loadingimg對象if (Ajax.activeRequestCount == 0) {$('Loadingimg').hide();}}};//為Ajax事件綁定全局事件處理器 Ajax.Responders.register(myGlobalHandlers);</script></body> </html>

?

?Servlet代碼：

import java.io.IOException; import java.io.PrintWriter;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class TipServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");//獲取請求參數favoriteString hdchar = request.getParameter("favorite");System.out.println(hdchar);PrintWriter out = response.getWriter();//如果請求參數是apple的前幾個字符，則輸出appleif ("apple".startsWith(hdchar)){out.println("apple");}//如果請求參數是banana的前幾個字符，則輸出bananaelse if("banana".startsWith(hdchar)){out.println("banana");}//如果請求參數是peach的前幾個字符，則輸出peachelse if("peach".startsWith(hdchar)){out.println("peach");}//否則將輸出other fruitelse{out.println("other fruit");}}}

?

?Ruby 注意：

加authenticity_token：

:onchange => "$('waiting_3').style.display='block';new Ajax.Request('/admin/update', {asynchronous:true, evalScripts:true, parameters:'id='+this.value + '&authenticity_token=' + encodeURIComponent('#{form_authenticity_token()}')})"

或：在contropller中加上去除：

protect_from_forgery :except => :update

總結

以上是生活随笔為你收集整理的Ajax.Request的全部內容，希望文章能夠幫你解決所遇到的問題。

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