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

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://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html

时间: 2025-01-30 11:08:51

JavaScript框架:跨浏览器的标准化Ajax请求的相关文章

JavaScript实现跨浏览器的添加及删除事件绑定函数实例_javascript技巧

本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数.分享给大家供大家参考.具体如下: IE 的事件绑定函数是 attachEvent:而 Firefox, Safari 是 addEventListener:Opera 则两种都支持.使用jQuery就可以使用简单的bind(),或者$().click()之类的函数解决,而如果不使用JavaScript框架的时候,大家可是使用下面的封装bind()函数. 添加事件绑定 bind() /*********************

详细解读JavaScript的跨浏览器事件处理_基础知识

一.关于获取事件对象 FF有点倔强,只支持arguments[0],不支持window.event.这次真的不怪IE,虽然把event作为window的属性不合规范,但大家都已经默许这个小问题存在了,只有FF这么多年了还是特立独行.所以,跨浏览器的事件对象获取有以下两种方式: 带参的: getEvent : function(event){ return event ? event : window.event; //return event || window.event;//或者更简单的方式

浏览器-mvc4中ajax请求重定向问题

问题描述 mvc4中ajax请求重定向问题 在mvc4中我有一个过滤器 在每一个action前都会先调用一次,里面的方法是用来判断用户是否登录如果是程序发出的请求还好可以重定向到登录页面 但ajax 的请求就无法重定向,我现在有一个解决方法但是 还是不完美 这是我的过滤器,如果是ajax的请求就在浏览器头部设置一个标记 protected override void OnActionExecuting(ActionExecutingContext filterContext) { if (Use

什么是JavaScript框架

摘要:现代网站和web应用程序趋向于依赖客户端的大量的javascript来提供丰富的交互.特别是通过不刷新页面的异步请求来返回数据或从服务器端的脚本(或数据系统)中得到响应.在这篇文章中,你将会了解到javascript框架如何更快.更方便的创建互动性强.响应快得网站和web应用程序. 导言:JavaScript是一种面向对象的脚本语言,一直以来用作Web浏览器应用程序客户端脚本接口的选择.JavaScript允许Web开发人员编程与网页上的对象的工作,为凭空操作这些对象提供了一个平台.当Ja

5个JAVASCRIPT框架详细的比较

框架比较 表1对本文中讨论的五个框架提供详细的比较   Prototype jQuery YUI ExtJS MooTools Latest Version 1.6.1 1.4.1 3.00 3.1 1.2.4 License MIT MIT & GPL BSD Commercial & GPL v3 MIT       Browser Compatibility     IE Support 6.0+ 6.0+ 6.0+ 6.0+ 6.0+ Firefox Support 1.5+ 2.

10个新的最有前途的JavaScript框架_javascript技巧

1. SproutCore SproutCore 苹果对SproutCore的解释为"开源,平台无关,类Cocoa的JavaScript框架,用于创建具有桌面应用程序外观和操作感的Web应用程序." SproutCore demonstrations: Photos, Sample Controls   2. Spry Spry 是Adobe 的 Ajax framework. Spry的目的是成为实现Ajax的一种简单方式,对HTML.CSS和JavaScript体验据有入门级水平的

解析浏览器端的AJAX缓存机制_javascript技巧

AJAX的缓存是由浏览器维持的,对于发向服务器的某个url,ajax仅在第一次请求时与服务器交互信息,之后的请求中,ajax不再向服务器提交请求,而是直接从缓存中提取数据. 有些情况下,我们需要每一次都从服务器得到更新后数据.思路是让每次请求的url都不同,而又不影响正常应用:在url之后加入随机内容. e.g. url=url+"&"+Math.random(); Key points: 1.每次请求的url都不一样(ajax的缓存便不起作用) 2.不影响正常应用(最基本的)

myEvent.js javascript跨浏览器事件框架_javascript技巧

event究竟有多么复杂?可见前辈的6年前的努力:最佳的addEvent是怎样诞生的,后起之秀jQuery也付出了一千六百多行血汗代码(v 1.5.1)搞定了6年后出现的各种核的浏览器. 我参考前辈的代码以及自己的理解尝试写了一个事件框架,我的框架完成了一个事件机制的核心,它能提供统一接口实现多事件绑定以及避免内存泄漏等其他一些问题,更重要的是性能还不错. 我的手法: 所有回调函数根据元素.事件类型.回调函数唯一ID缓存在一个_create对象中(其内部具体结构可见下面源码的关于_cache的注

ajax请求总是不成功?浏览器的同源策略和跨域问题详解

场景 码农小明要做一个展示业务数据的大屏给老板看,里面包含了来自自己网站的数据和来自隔壁老王的数据. 那么自己网站的数据提供了 http://xiaoming.com/whoami 这样的数据接口 隔壁老王提供了 http://oldwang.com/isdad 这样的数据接口 单独点开都是没有问题的.但是一使用 js 的 ajax 请求就无法收到来自 oldwang.com 的数据了. 点开浏览器控制台一看,红字标出(Chrome): XMLHttpRequest cannot load ht