prototype 的 Ajax 应用

原文:http://blog.yening.cn/2006/03/14/46.html

AJAX 全称 Asynchronous JavaScript And XML(异步Javascript与XML) ，wikpedia (需代理)有非常详细的描述,这里就不在累赘。主要说一下其应用.AJAX的核心是数据的异步传输,在Internet Explorer 通过 Microsoft.XMLHTTP 组件,而在 Firefox 和 Oprea 则是通过内置的XMLHttpReques 对象进行数据传输,考虑到跨浏览器等特性,我们一般可以用目前比较流行的的 Prototype Javascript Framework 进行开发.

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。

1) Ajax.Updater 将 xmlhttprequest 的返回内容直接绑定页面某个元素中.

JAVASCRIPT:

1. function getContents ( )
2. {
3. var request_url = "test1.html";        // 需要获取内容的url
4. var request_pars = ''; //请求参数
5.  
6. var myAjax = new Ajax. Updater ( 'result', request_url, { // 将request_url返回内容绑定到id为result的容器中
7. method     : 'get', //HTTP请求的方法,get or post
8. parameters : request_pars, //请求参数
9. onFailure  : reportError, //失败的时候调用 reportError 函数
10. onLoading  : loading, //正在获得内容的时候
11. onComplete : done      //内容获取完毕的时候
12. } );
13. }
14.  
15. function loading ( )
16. {
17. $ ( 'loading' ). style. display = 'block';
18. }
19.  
20. function done ( )
21. {
22. $ ( 'loading' ). style. display = 'none';
23. }
24.  
25. function reportError (request )
26. {
27. alert ( 'Sorry. There was an error.' );
28. }