JavaScript框架:跨浏览器的标准化Ajax请求

BloodSayalove

BloodSayalove

2016-02-20 01:07

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的JavaScript框架:跨浏览器的标准化Ajax请求,过去的都会过去,迎接崭新的开始,释放更美好的自己。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

Ajax

使用JavaScript框架最令人信服的理由是跨浏览器的标准化Ajax请求。Ajax请求是异步的HTTP请求,向服务器端脚本发送请求,然后得到一个响应结果,如如XML、JSON、HTML、纯文本格式的数据。大多数JavaScript框架有一定形式的Ajax请求对象,它接受一系列选项作为参数。这些选项包括回调函数,在得到Web服务器的响应时调用,ExtJS、MooTools和Prototype的Ajax请求看起来是这样的:

清单11:一个ExtJS 库中的Ajax请求

Ext.Ajax.request({
    url: 'server_script.php',
    params: {
        name1: 'value1',
        name2: 'value2'
    },
    method: 'POST',
    success: function(transport) {
        alert(transport.responseText);
    }
});

ExtJS接受一个参数,包括url、params、method 和succcess处理函数等字段,url字段包含服务器端脚本的地址,被Ajax请求调用。Params本身就是一个对象,由键/值对组成,然后传递到服务器。method 字段有两个可选值:GET或POST,默认为post方法。最后一个字段是succcess,在服务器得到成功响应后调用。该例中,假定服务器端返回纯文本,这个文本通过alert()方法呈现给用户。

接下来,让我们进一步探讨MooTools中 Ajax的请求。

清单12:MooTools中的Ajax请求

new Request({
    url: 'server-script.php',
    data: {
        name1: 'value1',
        name2: 'value2'
    },
    method: 'post',
    onComplete: function(response) {
        alert(response);
    }
}).send();

正如你看见,MooTools与ExtJS很相似。你会注意到,变量通过data字段传递,方法字段需要小写。此外,与success处理函数不同,MooTools使用onComplete函数。最后,与ExtJS不同,MooTools实际上用Request的send()函数发送请求。

最后,让我们看看Prototype 有哪些明显的不同。

清单13:Prototype 中的Ajax请求

new Ajax.Request('server-script.php', {
    params: {
        name1: 'value1',
        name2: 'value2'
    },
    method: 'post',
    onSuccess: function(transport) {
        alert(transport.responseText);
    }
});

看看,Prototype以同样的方式工作,但语法小有差异。对于初学者来说,原型的Request对象接受两个参数传递给构造函数。第一个参数是发送请求的URL地址,正如你在前面两个例子看到的那样,第二个参数是一个对象,包含各个Ajax请求的选项。当然,URl作为一个单独的参数传递,他不在选项列表中。另外,值得注意的是,与MooTools不同,Prototype 对象的构造函数隐式的发送请求,所以不需要调用任何方法触发HTTP请求。

大多数JavaScript框架对Ajax的支持已经超越了我这里所说的。一些明显的增强功能包括在接到响应后自动更新元素,而无需任何特殊的onSuccess 函数。一些库已经预先构建了自动完成功能,正如你在google搜索引擎看到的那样,在键入时给你一些查询建议。

在接下来的章节中,您将了解到JavaScript框架给络开发者带来的用户体验(UE)的提升。

转载地址:http://www.denisdeng.com/?p=729

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

原文地址:http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html

展开更多 50%)
分享

猜你喜欢

JavaScript框架:跨浏览器的标准化Ajax请求

Web开发
JavaScript框架:跨浏览器的标准化Ajax请求

开发跨浏览器JavaScript时要注意的问题

Web开发
开发跨浏览器JavaScript时要注意的问题

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

开发保留标准的浏览器功能的AJAX应用

Web开发
开发保留标准的浏览器功能的AJAX应用

AJAX 浏览器支持

Web开发
AJAX 浏览器支持

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

不成熟的标准化

Web开发
不成熟的标准化

开发保留标准浏览器功能的AJAX应用程序

电脑网络
开发保留标准浏览器功能的AJAX应用程序

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

对话框打开时命令无法执行的解决方法

对话框打开时命令无法执行的解决方法

图片预加载并且自动等比例缩放的JS插件

图片预加载并且自动等比例缩放的JS插件
下拉加载更多内容 ↓