prototype中的ajax对象应用实例
前两天看到淘宝网"我的淘宝 2.0"发布,无论界面和功能都做得非常cool,在页面切换的时候一看就知道用了AJAX技术。
AJAX作为一种成熟的技术在越多的商业网站中得到了应用,前途比较光明,前段时间做了一些AJAX的小应用,有些小心得,现在总结给大家分享一下。
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]
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.');
}
[/javascript]
简要说明:Ajax.Updater为我们提供加载文档时候的三种状态, onComplete,onLoading,onFailure.我们可以自定义一个函数分别相应这三种不同的状态,这样这点特性,我们就能做出像Gmail那样很Cool的Loading提示了(Loading的状态时真实的,不是随便搞一个timer唬弄人的).
示例代码:
Hello World : http://dev.yening.cn/ajax/prototype/ajax.html
联动下拉菜单: http://dev.yening.cn/ajax/prototype/menu.html
【本文持续更新中....】
AJAX作为一种成熟的技术在越多的商业网站中得到了应用,前途比较光明,前段时间做了一些AJAX的小应用,有些小心得,现在总结给大家分享一下。
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]
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.');
}
[/javascript]
简要说明:Ajax.Updater为我们提供加载文档时候的三种状态, onComplete,onLoading,onFailure.我们可以自定义一个函数分别相应这三种不同的状态,这样这点特性,我们就能做出像Gmail那样很Cool的Loading提示了(Loading的状态时真实的,不是随便搞一个timer唬弄人的).
示例代码:
Hello World : http://dev.yening.cn/ajax/prototype/ajax.html
联动下拉菜单: http://dev.yening.cn/ajax/prototype/menu.html
【本文持续更新中....】
内容太少了。。。
回复删除用Prototype.js的Ajax对象有没有对gbk乱码的解决方法?
回复删除嘿嘿,终于找到了.
回复删除很好,谢谢。
回复删除请大侠帮我解决一下,我用了Updater()这个方法,用一个JSP来替换一个,在JSP里面有一个树,如果是单独访问JSP就可以看到,但是如果是替换了树就不能显示出来,请问是怎么回事呢?急急急!!!!!!!!!!!
回复删除爱上对方
回复删除大侠,能不能把本文后面的那两个例子给我发一下啊,我扣代码没有完整的扣下来~谢谢咯~:)
回复删除