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

编程问答

Ajax.Request

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

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

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)陧?yè)面中加載此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? 為頁(yè)面中表單的 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)用很可能就是找到其中的想要的信息，然后更新頁(yè)面中的某些元素，或者甚至可能做某些XSLT轉(zhuǎn)換而在頁(yè)面中產(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}});

Ajax.Updater類是對(duì)Ajax.Request類的簡(jiǎn)化，使用該類不需要使用回調(diào)方法，該類自動(dòng)講服務(wù)器響應(yīng)顯示到某個(gè)容器。

下面就是一個(gè)簡(jiǎn)單的例子：

<%@ 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>請(qǐng)輸入您喜歡的水果</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">//發(fā)送請(qǐng)求的函數(shù)function searchFruit() {//定義發(fā)送請(qǐng)求的服務(wù)器地址var url = 'TipServlet';//取得請(qǐng)求參數(shù)字符串var params = $('favorite').serialize();//創(chuàng)建Ajax.Updater對(duì)象，對(duì)應(yīng)于發(fā)送一次請(qǐng)求var myAjax = new Ajax.Updater(//指定tips作為服務(wù)器響應(yīng)的容器'tips', url, {//發(fā)送請(qǐng)求的方法 method : 'post',//請(qǐng)求參數(shù) parameters : params,//指定Ajax交互結(jié)束后的回調(diào)函數(shù)，匿名函數(shù)——顯示id為tips的元素 onComplete : function() {$('tips').show();}});}//為表單域綁定事件監(jiān)聽器new Form.Element.Observer("favorite", 0.5, searchFruit);//定義Ajax事件的全局處理器var myGlobalHandlers = {//當(dāng)開始Ajax交互時(shí)，激發(fā)該函數(shù) onCreate : function() {$('Loadingimg').show();},//當(dāng)Ajax交互失敗后，激發(fā)該函數(shù)。 onFailure : function() {alert('對(duì)不起!\n頁(yè)面加載出錯(cuò)!');},//當(dāng)Ajax交互結(jié)束后，激發(fā)該函數(shù)。 onComplete : function() {//如果所有Ajax交互都已完成，隱藏Loadingimg對(duì)象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");//獲取請(qǐng)求參數(shù)favoriteString hdchar = request.getParameter("favorite");System.out.println(hdchar);PrintWriter out = response.getWriter();//如果請(qǐng)求參數(shù)是apple的前幾個(gè)字符，則輸出appleif ("apple".startsWith(hdchar)){out.println("apple");}//如果請(qǐng)求參數(shù)是banana的前幾個(gè)字符，則輸出bananaelse if("banana".startsWith(hdchar)){out.println("banana");}//如果請(qǐng)求參數(shù)是peach的前幾個(gè)字符，則輸出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

總結(jié)

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

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

Ajax
request