首頁 > 開發者 > Ajax

ajax.updater應用

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ajax.updater應用


通過這個JS類庫，將很容易的應用AJAX技術
ajax.updater應用
new Ajax.Updater('id',"url",{options});
id:你要更新的目標id
url:你要執行的操作，也可以是cgi
options:
屬性 類型 預設 描述
method Array 'post' HTTP 要求方式。
parameters String '' 在HTTP請求中傳入的url格式的值列表。
asynchronous Boolean true 指定是否做非同步 AJAX 請求。
postBody String undefined 在HTTP POST的情況下，傳入請求體中的內容。
requestHeaders Array undefined 和請求一起被傳入的HTTP頭部列表， 這個列表必須含有偶數個項目， 任何奇數項目是自訂的頭部的名稱， 接下來的偶數項目使這個頭部項目的字串值。 例子:['my-header1', 'this is the value', 'my-other-header', 'another value']
onXXXXXXXX Function(XMLHttpRequest) undefined 在AJAX請求中，當相應的事件/狀態形成的時候調用的自訂方法。 例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 這個方法將被傳入一個參數， 這個參數是攜帶AJAX操作的 XMLHttpRequest對象。
onSuccess Function(XMLHttpRequest) undefined 當AJAX請求成功完成的時候調用的自訂方法。 這個方法將被傳入一個參數， 這個參數是攜帶AJAX操作的 XMLHttpRequest對象。
onFailure Function(XMLHttpRequest) undefined 當AJAX請求完成但出現錯誤的時候調用的自訂方法。 這個方法將被傳入一個參數， 這個參數是攜帶AJAX操作的 XMLHttpRequest對象。
insertion Function(Object, String) null 為了把返回的文本注入到一個元素中而執行的方法。 這個方法將被傳入兩個參數，要被更新的對象並且只應用於 Ajax.Updater的響應文本 。
evalScripts Boolean undefined, false 決定當響應到達的時候是否執行其中的指令碼塊，只在 Ajax.Updater 對象中應用。 即要用到目標對象的JS代碼必須設定true。
decay Number undefined,1 決定當最後一次響應和前一次響應相同時在 Ajax.PeriodicalUpdater 對象中的減漫訪問的次數， 例如，如果設為2，後來的重新整理和之前的結果一樣， 這個對象將等待2個設定的時間間隔進行下一次重新整理， 如果又一次一樣， 那麼將等待4次，等等。 不設定這個只，或者設定為1，將避免訪問頻率變慢。
（參考https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html#options_reference）

簡單例子：
一：
index.html:

<body><script language="javascript" src="js/prototype.js"></script><script language="javascript">function doajax(){var ajax = new Ajax.Updater('my',"ajax.thtml",{onComplete:function(){},evalScripts:true});}</script><div id="my"></div><input type="button" value="click" >

ajax.html
<body><script language="javascript">test = function (){alert ("ok");}</script><div style="border:1px silver solid;">using ajax!<input type="button" value="gettest" ></div></body>

說明：為了使ajax.html中test()方法運行，首先必須設定evalScripts：true，其次在test函數的命名方式修改為“函數名字＝function()”的方式。另外也可以將js之前放至index.html也能運行，不需要修改函數。

二：
表單的提交可以無重新整理的方式
<form action="/action/here" method="post" >
以上這段代碼是我在wiki.script.aculo.us上看到的，有興趣可以去看看原文。
firehack (張宗榮) 超級版主

UID 3
精華 15
積分 4651
文章 1691
閱讀許可權 150
註冊 2006-4-3
狀態 線上

#2發表於 2006-11-14 14:57  資料 文集 短訊息 


Font Size7pt8pt9pt10pt12pt15pt18pt20pt25pt30pt

Prototype 是一個開源的 javascript 開發架構，裡面封裝了大量可以加快開發速度的方法，例如使用$('div')代替getElementById("div"),封裝了xmlhttprequest等。許多語言的開發架構如 Ruby on Rails,symfony(PHP) 都整合 Prototype，更有很多如 script.aculo.us , Rico , Behaviour 這樣的衍生作品，大大擴充了protopype的功能了,很方便的實現自動完成,元素拖動,閃爍提示,圓角矩形提示框,文字漸隱等功能。使得頁面一下"動"了起來,大大提高了使用者的使用體驗。對於設計者來說，大大減少了在UI方面花的時間，以前為了實現一個效果需要長長的 script 代碼,而現在可能只需要一兩行了.
在 Prototype 中,主要有兩個方法來實行非同步資料轉送分別是 Ajax.Updater 和 Ajax.Request。

[Copy to clipboard]

CODE:

function getContents()

{

var request_url = "test1.html";       // 需要擷取內容的url

var request_pars = '';//請求參數

var myAjax = new Ajax.Updater('result', request_url,{ // 將request_url返回內容綁定到id為result的容器中

method     : 'get', //HTTP請求的方法,get or post

parameters : request_pars, //請求參數

onFailure  : reportError, //失敗的時候調用 reportError 函數

onLoading  : loading, //正在獲得內容的時候

onComplete : done     //內容擷取完畢的時候

});

}

function loading()

{

$('loading').style.display = 'block';

}

function done()

{

$('loading').style.display = 'none';

}

function reportError(request)

{

alert('Sorry. There was an error.');

}

Ajax.Updater為我們提供載入文檔時候的三種狀態, onComplete,onLoading,onFailure.我們可以自訂一個函數分別相應這三種不同的狀態，這樣這點特性，我們就能做出像Gmail那樣很Cool的Loading提示了

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More