我想网 » Ajax

使用框架建立富联网应用

seasun — Tue, 27 Jul 2010 13:41:38 +0000

JavaScript库，ICEfaces，Adobe Flash，微软Silverlight，现在还有HTML5，全球性的网络支配地位的竞争已经进入了崭新的时代——一个富网络应用（简称RIA，中文也有叫富互联网应用）的时代。本文目的是界定什么是RIA，解释为何网络已经开始向RIA靠拢，探索今天已经存在的不同RIA框架，对每个框架作出一些优点和缺点的概述，并讨论这些新技术在未来将是怎么样的生存态。

RIA是何物?

所谓RIA，或者说富网络网应用，就是指可以像桌面程序一样操作的网络应用。在RIA冒出来之前，大多数的网络应用都是静态的页面构建的。

Sumo Paint 是一个基于Flash的RIA, 具有像Photoshop一样的图形编辑功能。

跟桌面应用程序不同，任何一个网页的互动往往需要重新加载一个全新的页面。而桌面应用程序，在另一方面，有很多更好的用户交互性，因为所有处理都是在用户的机器本身，所以能给以更加无缝的用户体验。

因此，软件开发商开始问自己，“我们产品应该是一个桌面应用程序还是一个Web应用程序呢？”

这一直是一个公平的问题，因为这两种类型的应用程序都具有各自优点和缺点。

桌面应用程序具有流畅的用户交互性，但软件是售出去的，会遇到发布和更新的问题。

Web应用程序，另一方面，很容易从网上获得，摆脱相关的软件发布和更新的问题，但在用户交互性体验非常差。

因此，怎么样才能两全其美呢？

RIA就是两全其美。RIA通过网络发布，有非常丰富的用户交互。得益于Ajax的出现，一个无需刷新就可以发送服务器请求的网络应用的方法，新技术出现，加入了RIA的运动。

基于这些技术出现了一些框架，帮助开发人员构建和部署富网络应用程序，如JavaScript库，ICEfaces，Adobe Flash 4（Flex 3前身），微软Silverlight，以及HTML5的。

让我们来一个个探讨RIA的框架。

网络应用的JavaScript库

JavaScript库，例如 jQuery和MooTools 是首批技术之一，可以真正的帮助部署流畅和互动的富网络应用。它们提供通过杠杆客户端脚本来处理前端接口功能的RIA框架。它们是一些基本的 Javascript文件，由一些有用的，经过跨浏览器测试功能的集成。可以使用Ajax，以及处理普通的基于用户驱动事件的交互，如显示和隐藏内容。

目前最流行的有jQuery（尤其是使用jQuery UI），MooTools，YIU（雅虎用户界面库），以及EXTJS。这些库包括RIA组件，如网格，图表和复杂的表单元素，以及处理Ajax的工具。最引人入胜的是，大部分网络开发的JavaScript库都是开源的。

如果你不想购买一个集成开发环境（IDE），但仍希望在自己的网站绚丽而专业的RIA功能，JavaScript库是一个很不错的选择。

使用JavaScript库的网站有Google，Digg，雅虎，亚马逊，微软，Twitter，以及Best Buy。

ICEfaces

ICEfaces是标准的JavaServer Faces（JSF）的框架的扩展，旨在去除方程中的JavaScript从而简化程序员的工作流程。换句话说，ICEfaces通过Java应用接口为你处理了所有的JavaScript/Ajax。通过删除这些自定义JavaScript函数的复杂引入，大大简化了创建富网络应用的任务。

如果你的团队主要成员是Java开发人员，或者如果你的网络应用程序不需要其它ICEfaces没有的复杂组件，又或者如果你的网络应用程序是事件驱动的，那么使用ICEfaces是很好的选择。如果你的网路应用是事件驱动的，请确定你已经了解ICEfaces不提供真正的“服务器推”技术的，HTML5，Flash Builder 4和Silverlight都支持的。不过，相应地ICEfaces使用长轮询的方法来模拟服务器推技术。

使用ICEfaces的网站有波音，美国航空航天局，联合太平洋公司，T-Mobile，以及美国银行。

Adobe Flash Builder 4

Flash已经出现了很长一段时间，但是用使用Flash来构建整个网络应用十分麻烦，直到Flex的引进，这是Flash的一个扩展，提供RIA网络组件。

Adobe Flash Builder 4最令人兴奋的是它的跨平台和跨浏览器特性，允许程序在所有的操作系统和所有的浏览器上以同样的方式运行。相比于JavaScript，浏览器有不同的 JavaScript引擎管理和处理的代码，而Adobe的Flash只有一个引擎，用户通过Adobe Flash浏览器插件来安装（通常的情况是他们有了）。

Flash Builder 4 应用之所以能如此，因为它们已经嵌入到HTML页面，这意味着浏览器本身并没有对应用程序的性能有什么影响。这意味着你如果你乐意，你还可以在IE6上运行最复杂的网络应用程序。（这当然简单，因为Flash插件/引擎经常会更新，因此只是稍微依赖于用户插件的版本）。

这些应用通常是伴随着服务器端处理，比如一个Java后端处理，而且需要Flash Builder 4IDE做开发。

如果你的团队主要是Java开发（因为搭配Java运作良好），或者你的应用程序使用事件驱动的构架，可以选择Adobe Flash Builder 4。

使用Flash作为网络应用程序的网站有Mint.com，Flickr和Hyundai。

Silverlight

Silverlight是基本上微软版本的Adobe Flex /的Adobe Flash。现在已获得了一些吸引力，但似乎并没有达到的Adobe Flash的普及程度。

Silverlight应用程序明显约束于.NET的后端，因为它是微软的产品。这意味着，你不得不 Silverlight /.NET 和Adobe Flex / [一些服务器端脚本，如PHP] 之间整合考虑。

如果你的网络应用需要复杂的图形，或者如果你的团队主要是.NET开发人员，又或者如果你的应用程序使用事件驱动的架构，那你可以选择 Silverlight。

使用Silverlight的网站，如Netflix。

HTML5

HTML5的是RIA运动中的最新发展。 HTML5，在本质上是HTML4，JavaScript，CSS，Javascript代码库以及Falsh的最优合并，利用API模型成为一个单一规范。 HTML5的是一个开放的技术，这意味着不会有单一的主管团体如Flash的Adobe或Silverlight的微软。

由于HTML5规范还没有完成，IE9尚未发布，要建立产品级的网络应用，你还需要等待一点点时间。

目前，所有主要浏览器除了IE8都支持HTML5。由于IE8的浏览器市场占据了主要部分，在IE9发布之前，HTML5实在难以成为主流。

一旦HTML5得到广泛支持，如果你不想购买和学习的IDE（像Flex和Silverlight框架所必需的），如果你的应用程序使用事件驱动架构，或者如果你喜欢使用内置的HTML功能和JavaScript API 功能而不是使用第三方JavaScript库，那么使用HTML是很好的选择。

尽管HTML5中可以很好地处理图形，但是使用Flash和Silverlight来处理复杂图形和动画在目前仍然容易/更快的选择。

RIA 的未来

HTML5应用程序是互联网的未来吗？不完全是。只要那些创造性和创新性的网络开发人员还在不断的去创造一些特别的东西，就会总是出现一些新技术可以造出些HTML5或其他任何网络技术无法完成的神奇的东西。

JavaScript库，ICEfaces，Flash，Silverlight和HTML5的存在首要原因是其创造力和创新性。未来的网络将会由许多共存的技术组成，就像现在。

标签：Adobe, Adobe, Ajax, Ajax, Flash, Flash, Flex, HTML, HTML, JavaScript, JavaScript, JQuery, MooTools, RIA, Silverlight, Technology, YUI

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

Ajax跨域访问解决方案

seasun — Mon, 12 Jul 2010 13:54:07 +0000

ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以就诞生了很多跨域的解决方案。当本域和子域间进行访问时最简单的就是设置document.domain，当不同域的访问，大概有下列方法：

1.web端代理的方式，即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页面代替用户页面完成交互，从而返回合适的结果。

2.iframe，解决方案就是用window.location对象的hash属性，利用JS改变hash值网页不会刷新，可以这样实现通过JS访问hash值来做到通信，大体就是AB网站各嵌入一个对方网站的iframe，然后通过连续不断的监听hash值的变化来进行通信。比如A网站通过改变B网站iframe的hash后，B网站监听到hash的变化后就进行处理，这种方式需要开发者可以控制两个网站的代码。

3.通过script标签来请求，原理就是在本域内的A内生成一个JS标签，它的SRC指向请求的另外一个域的某个页面B，这个src里面通常会加一个A页面定义好的回调函数，B返回数据即可，可以直接返回调用这个回调函数，这种跨域的通信方式被称为JSONP，此方案存在的缺陷是， script的src属性完成该调用时采取的方式时get方式，如果请求时传递的字符串过大时，可能会无法正常运行。

4.window.name，window.name是一种解决跨域数据传输的新技术，通过在iframe中加载一个跨域的HTML文件，并且在HTML文件中设置window.name的值为需要传给接受者的数据，接收者就可以取得到window.name的值并且返回，比较关键的是同源策略的影响对location的控制不受限制，所以需要加载一个代理的页面来让发送页面读取window.name.

5.使用flash，原理是JavaScript将数据提交给本域下的 Flash，通过 Flash 中转去访问其他域的接口，只需要其他域的根目录下有一个crossdomain.xml文件，文件中设置允许所有域名或允许本域访问即可。

http://www.sitepen.com/blog/2008/07/22/windowname-transport/

http://www.planabc.net/2008/09/01/window_name_transport/

http://hikejun.com/demo/windowname/demo_windowname.html

http://blog.s135.com/ajaxcdr/

标签：Ajax, Ajax, JavaScript, JavaScript

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

10个Google 推动的 AJAX 库 API

seasun — Fri, 21 May 2010 14:02:22 +0000

我们知道，Google在奉行他们一贯不作恶的行为之外，也在为互联网的发展起着不可估量的促进作用。作为一名web开发者，想必在您碰到无法解决的问题时，肯定会想到从http://code.google.com/ 去寻找解决方案，在使用的同时，不知您是否有发现，在页面的左边导航栏中标识有“开发人员资源”栏目。遵循这以导航，您会发现API 和开发人员工具链接。进去之后在Google所提供的产品中有标识AJAX菜单。如下图所示：

从图中圈出来的按钮点进去之后，您就会发现AJAX 库 API栏目。这里有Google支持的 AJAX 库 API所有栏目。
这里给大家列出的是比较常用的 AJAX 库 API 外链地址。

jquery

jquery UI

Chrome Frame

swfobject

mootools

Yahoo! UI

Prototype

Ext.JS

Dojo

Scriptaculous

标签：Ajax, Ajax, Google, JavaScript, JavaScript

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

AJAX是如何工作的: AJAX的10个实践运用

seasun — Wed, 08 Jul 2009 13:32:06 +0000

近几年，Ajax已变得越来越流行了，这使得网络应用程序变得越来越像是桌面应用程序。Ajax可以提供很多其它程序无法完成的额外的功能。

什么是 AJAX? 它是怎么工作的?

什么是Ajax？它是如何运作的？

Ajax是异步JavaScript脚本和 XML（Asynchronous JavaScript and XML）的缩写，用来使浏览器端应用程序和服务器端进行通信。在Ajax出现以前，浏览器端应用程序是无法直接和服务器进行通信的，只能使用刷新和加载页面的方法来实现。而有了Ajax之后，浏览器和服务器端就可以自由通信了。

以下简述Ajax脚本的运行路径：

行为引发事件，如用户单击按钮；
Ajax响应该事件，并使用XML向服务器发送请求；
服务器端程序（PHP、ASP或其他）接收到Ajax发来的数据并进行处理，从数据库中调用数据等；
服务器端再使用XML向客户端返回数据；
另外一个JavaScript函数，通常称之为回调函数，接收到服务器端发来的数据并据此更新页面。

本文将讨论我们如何通过不同的脚本来实现各种各样的功能。

1、登录表单

按传统的做法，用户登录时会被定向到一个登录页面，随后再返回登录前的页面。使用Ajax后，用户可以直接在原页面输入用户名和密码。Ajax会将这些信息发送给服务器进行验证。服务器会返回数据告知浏览器是否验证通过，浏览器可相应地更新页面。Digg就有这样的登录表单。

示例：Digg.com （页面顶端）
插件：jQuery Form Plugin

2、自动完成

谷歌是最早开始使用Ajax的公司之一，其搜索建议功能则是最先使用Ajax的地方，并开发了第一个自动完成工具。在搜索框输入数据后，Ajax会从服务器端接受数据，找出数据库中存储的常用搜索关键字并进行提示。自动完成功能是非常有用的，当表单可以输入多个可能的值时，显示一个下拉列表框供用户选择，非常人性化。

示例：Google Search
插件：jq autocomplete

3、投票和排行

网页收藏站点如Digg、Reddit等往往会让用户来决定什么内容会放在首页，使用的方法便是投票。他们使用Ajax来实现这个功能，这样用户就能够方便快捷地表达自己的意见了。

示例：Reddit

4、使用用户内容更新

Twitter之所以流行的一大原因是其简单易用的界面。当用户发送了一个消息后，这条消息会立刻添加到用户的页面中，所有的相应内容都会进行更新。最近，Twitter开始使用Ajax对“热门话题”进行更新。每隔几秒，我们就可以知道大家在忙些什么、关注些什么，非常快速。

示例：Twitter

5、表单的提交和验证

表单永远是最麻烦的东西，但Ajax让它们变得友好起来。Ajax可以派很多用处，从上面提到的自动完成功能，再到现在的表单验证和提交。有些网站使用Ajax检查用户输入的数据是否达到了某些要求，如密码长度或者E-mail地址、URL地址是否合法等

示例：10 Cool jQuery Form Plugins

6、聊天室和即时消息

在线聊天室在IRC之后多年才出现的只用应用。如今，聊天室和即时消息可以完全由浏览器来处理。在聊天室或即时消息应用程序中，Ajax通常要做两件事情，可以想象一下你的耳朵和嘴巴。你的嘴巴要告诉服务器你发送了一条消息，而耳朵则要保持和服务器的联系，以便接受对伐发送的消息，并显示在页面上

示例：Meebo Chat (使用了Ajax）
插件：GMail/Facebook Style Chat Script

7、灵巧的用户界面

Ajax的一个常规应用就是创建整洁、灵巧的用户界面，使用户能在一个页面中做更多的事情。它的好处体现在两个地方：首先，它能使应用程序的响应更为快速，操作更为简单；其次，它能减少浏览器向服务器的请求次数，从而减少带宽和加载时间。有一个免费的上传服务，名为Drop.io，使用的就是这项技术。而谷歌则更是把这项应用发挥到了极致，使用Ajax开发出了类桌面应用程序，如谷歌文档、谷歌地图等。

参考：jQuery UI Library

8、插件

Ajax不仅可以调用本地资源，还能够和其他服务器进行通信。像Wordpress之类的CMS（Content Management System 内容管理系统），它们的插件就是用Ajax实现的。又如Google Adsense，用的也是这样的方法。

示例：Google Adsense
插件：将外部内容加载到div中

9、使用Lightbox代替弹出窗口

弹出窗口拦截程序越来越流行了，原因当然是弹出窗口实在是很烦人。而Lightbox是在浏览器窗口内部显示的，所以拦截程序不能拿它怎么样。而且 Lightbox也不会让用户感到多厌烦，所以有些人就用它来作广告，如Darren Rowe的ProBlogger.com。Lightbox同样可以用来做登录表单或注册表单，比如匿名用户在Digg上投票时会被要求进行注册。

示例：Logo Sauce
插件：Lightbox Plugin

10、Ajax和Flash的结合

很少有人会拿Ajax和Flash和一起使用，但是这样做却能起到非常好的效果。Flash游戏网站Kongregate使用了这项技术，效果很棒。通过使用他们的API，用户可以在游戏中赢取各种“徽章”，并使用Ajax将数据传输给服务器，更新用户的信息。

示例：Kongregate
插件：jQuery Flash Plugin

标签：Ajax, Ajax, Flash, Translate, XMLHTTP

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

XmlHttpRequest的串行异步

seasun — Tue, 23 Jun 2009 04:32:03 +0000

默认情况下，我们总是喜欢用异步XHR请求来提高Web应用的响应性。然而，你考虑过如何让你的XHR请求串行调用吗？毕竟在有些情况下，XHR请求必须按照顺序调用，比如B的调用依赖于A的结果。

你可以使用同步Ajax请求，但是那会暂时锁住浏览器。Thibaud Lopez Schneider在一篇文章中说明了同步Ajax和

串行发生的异步请求

之间的区别。

他创建了一个网站asynchronous.me用来生成简单的示例代码。如果查看串行异步XHR的示例代码的话，你会发现它其实很简单，只是把下一个方法作为上一个方法的回调方法。

function run() {
    request1(function () {
        request2(function () {
            request3(function () {
                done();
            });
        });
    });
}
function request1(callback1) {
    // request 1
    print("request1");
    var xmlHttpRequest1 = new XMLHttpRequest();
    xmlHttpRequest1.open("GET", "something1?hello1", true);
    xmlHttpRequest1.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            // response 1
            print("response1=" + this.responseText);
            // continue execution in the callback
            if (callback1) {
                callback1();
            }
        }
    };
    xmlHttpRequest1.send();
}
function request2(callback2) {
    // request 2
    print("request2");
    var xmlHttpRequest2 = new XMLHttpRequest();
    xmlHttpRequest2.open("GET", "something2?hello2", true);
    xmlHttpRequest2.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            // response 2
            print("response2=" + this.responseText);
            // continue execution in the callback
            if (callback2) {
                callback2();
            }
        }
    };
    xmlHttpRequest2.send();
}
function request3(callback3) {
    // request 3
    print("request3");
    var xmlHttpRequest3 = new XMLHttpRequest();
    xmlHttpRequest3.open("GET", "something3?hello3", true);
    xmlHttpRequest3.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            // response 3
            print("response3=" + this.responseText);
            // continue execution in the callback
            if (callback3) {
                callback3();
            }
        }
    };
    xmlHttpRequest3.send();
}
function done() {
    // end
    print("done");
}

你可以把使用回调的方法与使用Dojo Deferred的进行比较：

    function run() {
        request1().addCallback(request2).addCallback(request3).addCallback(done);
    }
    function request1() {
        // request 1
        print("request1");
        var deferred = dojo.xhrGet({
            url: "something1?hello1",
            load: function (response) {
                // response 1
                print("response1=" + response);
            }
        });
        return deferred;
    }
    function request2() {
        // request 2
        print("request2");
        var deferred = dojo.xhrGet({
            url: "something2?hello2",
            load: function (response) {
                // response 2
                print("response2=" + response);
            }
        });
        return deferred;
    }
    function request3() {
        // request 3
        print("request3");
        var deferred = dojo.xhrGet({
            url: "something3?hello3",
            load: function (response) {
                // response 3
                print("response3=" + response);
            }
        });
        return deferred;
    }
    function done() {
        // end
        print("done");
    }

标签：Ajax, Ajax, JavaScript

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

10个关于Ajax的IT人需要知道的事情

seasun — Sun, 21 Jun 2009 08:54:03 +0000

任何新网络技术的引进都会不同方面的影响网络的基础建设，小到微不足道，大到甚至地球破碎。在当今网络中，Ajax是一个更具有破坏性的新网络技术。为了减少你对将来网络的吃惊，下面列出了10项你需要熟知的关于Ajax的知识。

让我们看一组幻灯片，对于Ajax，什么是每一个网络专家都需要知道的。

1）Ajax是一个想法，而不仅仅是一个缩略词

尽管Ajax通常被拼写为“异步JavaScript和XML”，但这个全称不完全合适，因为它过分简化了这门技术的历史和实现核心。更确切地，Ajax包含了一种思想，这种思想认为网络应用可以退出传统的以服务器端为中心的重复发送-等待循环方式来建立。Ajax使网络应用转向更有影响的、连续的，而且渐进式的更新。Ajax为用户优先的体验网络应用提供了更丰富、更好的交互性。这个优势也意味着需要网络专家更多的网络控制和安全监视，潜在地，服务器和网络改造也是这样。

2）这确实都与JavaScript有关

Ajax的应用是用JavaScript写的，通常基于XMLHttpRequest对象来通信，这个XMLHttpRequest对象是通过万维网协议过程进行的。由于像大多的网络技术一样，它现在只是一个特定的工业标准，因此在不同浏览器中实现的显著差别还是可以找到的。不管有没有广泛的工业支持，它也可能使用其它的数据传输机制，包括传统的框架和image-cookie方法，以及Flash或java中二进制桥的使用。

无论开发者使用哪种传输方法，Ajax都将JavaScript在网络应用中提升到了一个前所未有的重要地位。现在JavaScript对重要的数据收集、数据通信、消费机制都有影响，所以它不再被认为是没有重大作用的二级网络技术。

认为JavaScript技术有毒的开发者们试图使用工具或框架产生其它的语言如java（如谷歌网络工具）来避免使用这种语言，或者在组件或标签后隐藏代码（例如.Net和Ruby）。然而最终，JavaScript仍会在应用中。最好是理解并学会直接使用它，因为只要你使用Ajax，你就使用了很多的JavaScript。

Ajax是内嵌在网络中的，所以坏代码对网络管理员和开发者来说意味着大量的故障修理，底线是鼓励好的、有网络意识的编码。用于其他语言的具有同样组织的“规则和工具”——代码规范、测试机制和源码控制也必须应用于JavaScript，以此来确保Ajax的可支持性和健壮性。

3）XML是不需要的

尽管缩略词中有“x”，但是Ajax并不需要XML。XMLHttpRequest对象可以传输任意的文本格式。对于很多Ajax开发者来说，作为一种数据格式JavaScript对象符号甚至是纯JavaScript代码段更有意义，因为JavaScript是消费环境。有的开发者喜欢以纯文本或HTML代码段做为网页的输入，也有的使用像不太著名的YAML标记语言或逗号分隔值这样的数据格式。

当然，使用XML是可能的也是应当的，只是不是必需的。XMLHttpRequest对象不支持使用二进制格式上传文件，但是考虑到Flash使用一种叫做活动消息格式（Action Message Format）的二机制格式，所以在Ajax应用中也可能很快地找到类似的性质。你应该知道网络中的哪种机制正在被网络淘汰，因为淘汰的不总是XML，也要确保能够分析出这些机制的性能和安全性。

4）为HTTP请求的增加做好准备

对网络管理员来说，支持Ajax应用最明显的问题是结构化编程方式使网络应用的使用从只有几百KB的某些不频繁响应的程序组变为更多连续的小型HTTP请求交换。这意味着网络绑定的网页和应用服务器会发现他们比以前更繁忙。Ajax将为服务器和网络应用做些什么取决于这些应用是如何建立的——开发者们一定要明白他们使用的应用间的网络冲突。

5）仔细地优化Ajax请求

网络应用应该坚持发送更少的数据、更少的发送次数的网络传输规则。但是这也不是说这种规则被开发者们广泛地遵循。对网络来说很幸运的是， Ajax响应的HTTP压缩可以减少响应尺寸，并且在所有现代的浏览器中都支持。但是由于动态压缩的额外开销，如果响应相对较小速度也不会改变太多。这也就是说，对网络管理员来说在服务器端打开压缩机制是明智的，但是需要明白的是，使用Ajax应用不会比使用传统的网络应用获得的更多。

我们一般使用缓存来减少发送数据的次数。但是，尽管由浏览器提供的特定假设不会在同一段时间里再次获取URL，大多数的Ajax实现还是公开敌视缓存。许多Ajax开发人员不是使用缓存，而是通过头设置或URL的唯一性来积极地战胜缓存。

用JavaScript写的客户端Ajax缓存使得对付缓存成为可能，但是大多数的Ajax库不执行这样的功能。网络专家应该为开发者们展示缓存的好处，因为Ajax使用缓存的好处要比使用压缩多得多。

6）认识到两个连接限制

Ajax应用向同一个URL发送两个同步的连接是受HTTP限制的。这是HTTP协议的设计方式，不是什么浏览器问题或浏览器限制。好消息是，它使许多Ajax开发者远离了服务器的突然崩溃，尽管微软的Internet Explorer 8被认为在这种限制之外运行得很好。非正式的Ajax应用可能是麻烦的，随着浏览器不断地改变规则，网络管理员们应该随时关注提出请求的数量，跟应用开发者们一起避免像快速投票（fast polling）或长期持有连接这样的设计模式。

7）小心响应顺序

在传统的网络应用中，TCP/IP通信协议的网络影响——如HTTP响应接收的缺乏秩序，通常不被开发者和使用者所注意。基础单元、HTML文件在其他对象之前被接收，接着就触发请求。任何接下来的请求都触发整个新的基础文件，从而保证顺序。Ajax将这种固有的顺序摒除了，但是，由于这样，基于一定顺序的应用需要一个响应队列。但Ajax框架并不始终理解这个相关网络。因此，再一次地确认Ajax应用的开发者们了解这些相关的网络级别。

8）理解“层8”纠错的影响

多年来，用户们一直都是通过重载页面或按“后退按钮”来纠正网络传输质量。简而言之，用户这样做有助于减轻网络问题，因为错误一般发生在预期的页面绘制之间。但是，通过Ajax应用错误不再那么明显。可糟糕的是，由于简单的、动画的GIF旋转循环提供的正确的请求状态信息很少，用户经常将错误误传。

开发者们很烦恼，因为许多库在认识到发生了超时时不再响应，一定发生重试，而且服务器错误和数据错误会突然出现。因为JavaScript检测显示的通信和代码错误很少出现在客户端，所以（使用户）无忧的无知是一种规范。为了使管理员正确地使用Ajax，更多的应用级监控是必需的。

9）旧的安全威胁被二次曝光

如果你听信专家的，Ajax可能会显现得产生更多的攻击页面，但是事实是它不会比传统的网络应用开发环境更不安全，因为传送给可信任的服务器的HTTP输入——头消息、检索字符串和消息体是一样的。如果在你的网络开发组可信任的客户端代码和输入数据不被暗地里禁止，那么Ajax将会使事情朝着那个方向推进。

跨站点脚本（XSS）不是在Ajax中的一个新的脆弱点，它只是在JavaScript中更常见，尤其当应用允许使用规定（state）数据时。

跨站点请求伪造物也不是在Ajax中的新现象，但是如果应用开发者们不适当地检查在Ajax应用中的HTTP 引用（原文如此）头和管理session，将是为伪造物们开了门，尽管可能现在更糟糕了。

黑客，像开发者们一样，现在更感兴趣于使用和滥用增加了潜在漏洞的JavaScript。网络专家们应该确定开发者们意识到了即使客户端代码在适当的位置混乱也可能被利用，所以不管是不是Ajax数据输入始终都要被过滤和杀毒。

10)遵守相同的起始地址做为保护

在安全的积极方面，JavaScript的SOP（同一起始地址策略）被完全地强迫应用在基于XMLHttpRequest的Ajax应用中。这个策略确保了脚本不能跟自己发行的以外的域进行通话。从开发者的观点，这也是让人非常烦恼的，因为这意味着来自ajaxref.com的网页服务不能跟来自www.ajaxref.com的URL进行通话，尽管这是同一台服务器上的，但它们不是同一个域。DNS匹配跟这个没关系，这是用于SOP的字符串检查。

SOP也会严重的束缚开发者在客户端努力进行网络服务的能力。显然，最好的方法是在服务器端使用代理来响应发送给其他服务器的请求并将这些结果组合起来。但是许多Ajax开发者们试图打破这个同一起始地址的限制。使用

CGI 脚本

这个CGI脚本是用来应答HTML页面的JavaScript的请求。 CGI脚本可以通过简单的Python, Puby, PHP, C, Perl 等来实现。
#!/usr/bin/perl -w
use CGI;

$query = new CGI;

$secretword = $query->param(‘w’);
$remotehost = $query->remote_host();

print $query->header;
print “

The secret word is $secretword and your IP is $remotehost

标签：Ajax, Ajax

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

Google AJAX Libraries API

seasun — Wed, 27 May 2009 09:17:59 +0000

什么是 AJAX 库 API？

AJAX 库 API 是一种内容分布网络，可加载最受欢迎的开源 JavaScript 库的架构。通过使用 Google AJAX API 加载程序的 google.load() 方法，您的应用程序能够迅速从全球任何位置访问不断增长的、最受欢迎的 JavaScript 开源库列表，包括：

Google 就每个库的利益直接与关键相关人员配合，并在最新稳定版本发布时接受这些版本。一旦我们托管给定库的版本，我们承诺无限期地托管该版本。

AJAX 库 API 在使用库集合的同时消除了用 JavaScript 开发混搭的不便之处。我们消除了托管库的不便之处、正确地设置缓存标头、与最新错误修正日期保持一致等。

标签：Ajax, Ajax, API, Extjs, JavaScript, JQuery, Library, Prototype, Widget, YUI

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

jQuery与Extjs的Ajax的跨域访问

seasun — Wed, 20 May 2009 04:37:38 +0000

jquery的代码:

Js代码

Extjs的代码:

Js代码

ss = new Ext.data.ScriptTagProxy({
//url: ’http://10.128.3.104/edi/rest/GetBillCaseInfo’,
url: ‘testjson.do’,
callbackParam: “_callback”,
headers: { ‘Authorization’: ‘Basic YWRtaW46YWRtaW4xMjM=’}
});
ss.load({‘_out’: ‘json’},
new Ext.data.JsonReader({root:“ROWSET.ROW”},
[{name: 'CaseCode', mapping: 'CaseCode'},
{name: 'CaseName', mapping: 'CaseName'}]),
function(recordsBlock, arg, isok) {
alert(Ext.encode(recordsBlock));
alert(Ext.encode(recordsBlock.records[0].data));
}
);
Ext.Ajax.request({
url: ‘http://10.128.3.104/edi/rest/GetBillCaseInfo’,
//url: ’testjson.do’,
scriptTag: true,
success: function(req) {
alert(req.responseText);
},
failure: function(req) {
alert(req.responseText);
},
headers: { ‘Authorization’: ‘Basic YWRtaW46YWRtaW4xMjM=’},
params: { _out: ‘json’ }
});

      ss = new Ext.data.ScriptTagProxy({
        //url: 'http://10.128.3.104/edi/rest/GetBillCaseInfo',
        url: 'testjson.do',
        callbackParam: "_callback",
        headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4xMjM='}
      });
      ss.load({'_out': 'json'},
              new Ext.data.JsonReader({root:"ROWSET.ROW"},
                      [{name: 'CaseCode', mapping: 'CaseCode'},
                        {name: 'CaseName', mapping: 'CaseName'}]),
              function(recordsBlock, arg, isok) {
                alert(Ext.encode(recordsBlock));
                alert(Ext.encode(recordsBlock.records[0].data));
              }
              );

      Ext.Ajax.request({
        url: 'http://10.128.3.104/edi/rest/GetBillCaseInfo',
        //url: 'testjson.do',
        scriptTag: true,
        success: function(req) {
          alert(req.responseText);
        },
        failure: function(req) {
          alert(req.responseText);
        },
        headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4xMjM='},
        params: { _out: 'json' }
      });

注意:无论是jQuery还是Extjs都不能发送自定义HTTP的信息,因为他们都是通过动态生成标签的方式来实现跨域的访问!

标签：Ajax, Ajax, ExtJS, Extjs, JQuery, JQuery

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

ajax与json配合使用最简单实现

seasun — Thu, 09 Apr 2009 04:06:55 +0000

//ajax声明
var xmlHttp; function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//javascript调用执行back()方法启动
ajax function back() {
var url=”/websys/main/actionurl.do?paraname=123″; createXMLHttpRequest(); xmlHttp.open(“GET”, url); xmlHttp.onreadystatechange =callback; xmlHttp.send(null);
}
//回掉函数 function callback(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var resstr=xmlHttp.responseText;
var ress=eval(“(“+resstr+”)”);
if(ress.msg==false){
alert(ress.value);
}else{
alert(ress.value);
}
}
}
//后台action
public ActionForward execute(…….)
throws IOException {
String paravalue=rerquest.getParameter(“paraname”);
PrintWriter out=response.getWriter();
if(paravalue.equals(“123″)) {
out.print(“{msg:’success’,value:’oknow!’}”);
return null;
} else {
out.print(“{msg:error,value:’error!’}”);
}
return null;
}
return null;
}

标签：Ajax, Ajax, Json

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

Ajax之XMLHTTP学习理解

seasun — Thu, 09 Apr 2009 03:04:55 +0000

在.JS文件或者网页中写入如下脚本

//定义XMLHttp实例
var xmlHttp;
function createXMLHttpRequest(){
//开始初始化XMLHttpRequest对象
if(window.ActiveXObject){
//IE浏览器
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}else if(window.XMLHttpRequest){
//Mozilla浏览器
xmlHttp = new XMLHttpRequest();
}
if(xmlHttp){
xmlHttp.open(“GET”,url,false);
xmlHttp.onreadystatechange=function(){setState(greens,reds,contains)};
xmlHttp.send(null);
}
}
//回调函数举例
//返回的4种状态
function setState(greens,reds,contains){
var contains = document.getElementById(“contain”);
if(xmlHttp.readyState == 0){
contains.innerHTML = “正在初始化”;
}
if(xmlHttp.readyState == 1){
contains.innerHTML = “正在准备发送请求”;
}
if(xmlHttp.readyState == 2){
contains.innerHTML = “正在发送请求”;
}
if(xmlHttp.readyState == 3){
contains.innerHTML = “正在接收数据”;
}
if(xmlHttp.readyState == 4){
//信息已经成功返回，开始处理信息
if(xmlHttp.status == 200){
contains.innerHTML = xmlHttp.responstText; //返回值
}
}
}

DOM的一些详解

(1)设置
在从服务器返回数据的同时，还要进行设置，使浏览器不会在本地缓存结果，response.setHeader(“Cache-Control”,”no-cache”);response.setHeader(“pragma”,”no-cache”);
XMLHttpRequest对象提供２个可以用来访问服务器响应的属性，一个是responseText将响应提供一个串，结合HTML元素的innerHTML属性，非常有用． (document.getElementById(“results”).innerHTML=xmlHttp.responseText).一个是 responseXML将响应提供为一个XML对象．

(2)DOM元素的一些有用的属性
childNodes————————————–返回当前元素所有子元素的数组
firstChild ————————————–返回当前元素的第一个下级子元素
lastChild —————————————返回当前元素的最后一个子元素
nextSibling—————————————返回紧跟在当前元素后面的元素
nodeValue—————————————-指定表示元素值的读／写属性
parentNode ————————————–返回元素的父节点
previousSibling———————————-返回紧邻当前元素之前的元素

(3)用于遍历XML文档的DOM元素方法(document)
getElementById(id)—————————–获取有指定唯一ID属性值文档中的元素
getElementsByTagName(name)————–返回当前元素中有指定标记名的子元素的数组
hasChildNodes()——————————–返回一个布尔值，指定元素是否有子元素
getAttribute(name)——————————返回元素的属性值，属性由name指定

(4)动态创建内容时所用的W3C DOM属性和方法
document.createElement(tagName)———-文档对象上的createElement方法可以创建由tagName指定的元素
document.createTextNode(text)————–文档对象的createTextNode方法会创建一个包含静态文本的节点．
.appendChild(childNode)———该方法将指定的节点增加到当前元素的子节点列表．
.getAttribute(name)|.setAttribute(name,value)—————–获得和设置元素中name属性的值
.insertBefore(newNode,targetNode)—–这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面。
.removeAttribute(name)—–这个方法从元素中删除属性name
.removeChild(childNode)—–这个方法从元素中删除子元素childNode
.replaceChild(newNode,oldNode)—–这个方法将节点oldNode替换为节点newNode
.hasChildNodes()这个方法返回一个布尔值，指示元素是否有子元素

XMLHttpRequest对象的一些典型方法

(1)、void open(String method,String url,boolean asynch);这个方法会建立对服务器的调用。
第一个参数表示要提供调用的特定方法(get,post,put)
第二个参数表示要提供所调用资源的url
第三个参数表示是异步(true)还是同步(false)
(2)、void send(content):这个方法会向具体服务器发出请求。可选参数会作为请求体的一部分发送。
(3)、void setRequestHeader(String header ,String value):这个方法为HTTP请求中一个给定的首部设置值
第一个参数表示要设置的首部。
第二个参数表示要在首部中放置的值。这个方法必须在调用open()之后才能调用。
XMLHttpRequest对象的一些典型属性：
(1)、onreadystatechange:每个状态改变时都会触发这个事件处理器，通常会调用一个javascript函数，用来处理返回时要调用的函数。
(2)、readyState:请求的状态。有5个值：0=未初始化，1=正在加载，2=已经加载，3=交互中，4=完成。
(3)、responseText:服务器的响应，表示为一个串
(4)、responseXML:服务器的响应，表示为一个XML，这个对象可以解析为一个DOM对象。
(5)、status:服务器的Http状态码(200对应ok，404对应Not Found(未找到))

标签：Ajax, Ajax, XMLHTTP

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比

seasun — Thu, 09 Apr 2009 01:49:06 +0000

AJAX是web20的基石，现在网上流行几种开源的AJAX框架，比如：jQuery,Mootools,Dojo,Ext JS等等，那么我们到底在什么情况下该使用那个框架？以下是一组摘抄的数据：

Ajaxian在2007年底对Ajax工具进行了调查，部分调查结果见下表（其中数字为调查者使用该工具的百分比，详细的请参见网页）：http://ajaxian.com/archives/2007-ajax-tools-usage-survey-results

Prototype	jQuery	Ext	Script.aculo.us	Mootools	YUI	JSON	Dojo	Backbase
34.1%	29.3%	22.5%	22.3%	14.3%	13%	12.9%	11.8%	8.3%

其中Prototype使用率最高，很大程度上是因为它是最早成熟的框架，很多以前在项目中采用，所以现在一直在用

让我们来看看选择AJAX框架的基础：

你的项目需求（即你需要哪些特性，例如是否要求做出精美的界面、特效或其它功能）

是否支持A等级的浏览器（IE, Firefox等）?

文档的质量：是否完善（包含教程，API，代码示例等）

框架的可扩展性如何？为框架写插件容易吗？

你是否喜欢它的API的风格？

能大多程度上统一你的JavaScript代码的风格？

框架大小（太大的框架导致用户下载时间的延长）

框架是否强迫你改变写HTML的方式（Dojo就是这样）？

代码执行速度：性能如何？

代码是否为模块化（Mootools为高度模块化）？代码可重用性如何？

一、jQuery

主页：http://jquery.com/

设计思想

简洁的思想：几乎所有操作都是以选择DOM元素（有强大的Selector）开始，然后是对其的操作（Chaining等特性）。

优点

小，压缩后代码只有20多k（无压缩代码94k）。

Selector和DOM操作的方便：jQuery的Selector与mootools的Element.Selectors.js比较，CSS Selector, XPath Selector（1.2后已删除）

Chaining：总是返回一个jQuery对象，可以连续操作。

文档的完整，易用性（每个API都有完整的例子，这是其它框架现在不能比的），而且网上还有很多其它的文档，书籍。

应用的广泛，包括google code也使用了jQuery。

使用jQuery的站点：http://docs.jquery.com/Sites_Using_jQuery

核心的开发团队和核心人员：John Resig等。

简洁和简短的语法，容易记。

可扩展性：有大量用户开发的插件可供使用（http://jquery.com/plugins/）

jQuery UI（http://jquery.com/plugins/，基于jQuery，但和核心的jQuery是独立的），不断发展中。

友好和活跃的社区：google groups: http://docs.jquery.com/Discussion

事件处理有很多方便的方法，如click，而不是单一的addEvent之类的。

缺点

由于设计思想是追求高效和简洁，没有面向对象的扩展。设计思路和Mootools不一样。

CSS Selector的速度稍微有些慢（但是现在速度已经大幅提高）

Mootools

主页：http://mootools.net/

设计思想

面向对象的设计思想。

优点

模块化，各模块代码非常独立，最小的核心只有8k，最大的优点是可选择使用哪些模块，用的时候只导入使用的模块即可，完整的也不到180k（没有压缩），压缩后不到70k。

语法的简洁，直观。

特效（Effects）：这一点比jQuery稍强，现在也正在开发Mootools UI（这应该是Ajax框架开发的一个趋势）。

代码写的优美，易阅读和修改。

文档的完整（最新的1.2beta的文档比以前更详细）。

活跃的社区：官网(http://forum.mootools.net/)，还有一个IRC。

性能：见：http://mootools.net/slickspeed/

缺点

修改了低层的一些类：如Array, String等，这也是设计思想的不同。

在DOM和CSS Selector上不如jQuery强大。

Dojo

主页：http://dojotoolkit.org/

优点

背后强大的支持：IBM、Sun、BEA等，这是非常重要的优势。

功能的强大，Full Stack的框架，扩展了DHTML的能力，例如：

支持与浏览器Back/Forward按钮的集成。

Dojo Offline，一个跨平台的离线存储API。

Chart组件，可以方便地在浏览器端生成图表。

基于SVG/VML的矢量图形库。

Google Maps、Yahoo! Maps组件，方便开发Mashup应用。

Comet支持，通过通用的Buyeux协议。

强大的UI（Dijit）。

面向对象的设计，统一的命名空间，包管理机制（The Package System and Custom Builds）

可扩展性。

缺点

复杂，学习曲线陡。

文档的极端不全，这是一个很大的问题。

API很多不稳定，各版本间改动较大，现在还不是一个成熟的框架。

侵入性太大，页面中大量使用dojo的属性，例如

6个你必须用到AJAX的地方与6个不必用到的地方

seasun — Tue, 07 Apr 2009 01:28:44 +0000

现在距离gmail改变大家对使用网页应用程序的方式,已经有一年多了。但是目前很多网页应用程序,并没有使用充满活力的Ajax的优势,来代替以前沉闷的html功能。

下面是当前网页应用程序应该出现的地方：

* 基于表单的交互

表单是很慢的，非常慢。尝试编辑位于del.icio.us上面的一个书签？点击编辑链接打开一个编辑书签的表单页面，然后编辑你的内容并点击提交按钮等待整个提交过程结束，最后返回上一页并向下滚动到你刚才编辑的书签那里查看内容是否已经正确更改。那AJAX呢？点击编辑链接马上开始更改标签内容，点击提交按钮开始异步传输标签编辑的内容并立即看到更改后的内容而无需重载整个页面。

* 深层树状导航

总而言之，带有深层树状导航的应用程序通常是一个噩梦。在大多数情况中简单平直的拓扑结构以及搜索/标记可以很好的工作。但是如果一个应用程序真正使用深层树状导航，使用JavaScript来管理拓扑ui(user interface用户接口)，则使用Ajax懒加载深层数据可以降低服务器的负载。举例来说，为了阅读一个只有一行的结果来加载整个一个新页面是非常耗时的。

* 实时用户对用户通讯

在一个允许用户创建实时讨论的信息公告系统中，迫使用户一次又一次的更新完页面看到答复是非常愚蠢的。回复应该是实时的，用户不应被迫总是去痴迷于刷新操作。即使是gmail这个已经对以前像hotmail/yahoo mail的收件箱刷新，刷新收件箱标记的操作有所改进，也并没有充分的使用Ajax的功能来提示有新邮件到达。

* 投票、是否选择、等级评价

如果Ajax提交过程没有一个协调的UI提示是非常糟糕的，通过使用Ajax来提交一个调查或是否选择可以减少提交过程等待的痛苦。通过减少点击的等待时间，Ajax应用程序变得越来越有交互性-如果要用40秒来提交一个投票，除非非常在意的话大多数人会选择放弃。如果只花1秒呢，非常大比例的人会乐于参加投票的。（我在Netflix versus有2008张电影投票在IMDb.com有210张电影投票）

* 过滤和复杂数据操作

应用一个过滤、按日期排序、按日期和姓名排序、打开或关闭过滤器等等。任何一种高交换型操作应该交给JavaScript来处理而不是通过向服务器来提交一系列的请求。在查找或者操作大量数据的时候带来的视图上的改变最多不会超过30秒，Ajax真的使这些操作加速了。

* 普通录入时的提示/自动补齐

一些软件/JavaScript是擅长于帮助用户完成键入相同的文字或可以预测的文字的工作的。在del.icio.us 和 Gmail 中该功能是非常有益的，可以用来快速增加标记/email等。

对于一个频繁使用的应用程序诸如网页邮件客户端或博客阅读器来说，用户有充足的时间来学习如何使用新的UI概念但是他们却无法接受一个非常缓慢的反应速度。这种应用为Ajax变的更加普及起到了一个完美的杠杆作用。随着用户使用频率的增加，更多的Ajax部件应该加强用户的使用体验。

但是对于网页应用程序来说，把每件事甚至任何事都用JavaScript来实现也是没有意义的。Ajax只是针对一些特定的环境才能带来显著的帮助。在Ajax出现之前网页应用程序已经可以工作的很好了并且目前在网页开发中Ajax还存在着许多的缺陷和缺点。就算不从服务器端取得一个异步的信息数据流一个平直的html网页日志也可以工作的很好。对于文档或文档之间的跳转来说，老旧的纯HTML仍然是最好的选择。简单或很少使用的应用程序就算不用JavaScript同样可以很好的工作。

下面是一些不应该用到Ajax的地方：

* 简单的表单

就算表单是Ajax技术的最大受益人，一个简单内容的表单，或提交订货单，或一次性的很少用到的表单都不应该使用以Ajax驱动的表单提交机制。总的来说，如果一个表单不是很长用，或已经工作的很好，那么就算使用Ajax也没有什么帮助。

* 搜索

实时搜索带来的痛苦要远大于他带来的帮助。这就是为什么Google Suggest还处于beta测试而并没有放在主页上的原因。在Start.com Live.com上搜索的时候你是不能使用返回按钮来查看上一次搜索或返回上一页的。或许还没有人来完成这项工作，但是完成这个工作应该是很困难的至少是不太明知的或者会因此带来更多的麻烦。（译注：现在已经有很多开源的框架可以实现历史记录功能）

* 基本导航

总的来说，使用Ajax为一个基础的网站/程序做导航是一个可怕的念头。谁会把用来使自己的程序变的更好的时间花在编写代码模仿浏览器的行为上面？在基础页面中导航的操作中JavaScript是没有用的。

* 替换大量的信息

Ajax可以不用整页刷新来动态更新页面中改变的一小部分。但是如果一页上的大部分内容都需要更新，那为什么不从服务器那里获得一个新页面呢？

* 显示操作

虽然看上去Ajax是一个纯UI技术，其实不是这样的。他实际上是一个数据同步、操作、传输的技术。要想得到一个稳定的干净的网页程序，不使用 Ajax/JavaScript来直接完成用户接口是明智的。JavaScript可以分散分布并简单的操作XHTML/HTML DOM，根据CSS规则来决定如何让UI显示数据。查看

这里（http://www.sourcelabs.com/blogs/ajb/2005/08/powering_javascript_ui_with_cs.html）

来查看如何使用CSS来替代JavaScript来控制数据的显示。

* 无用的网页小部件

滑块选择控件、拖拽控件、弹性控件（此处原文为bouncies，不知指为何物？）、鼠标样式、天气预报控件，这些小部件应该可以被更直接的控件代替或者为了整洁干脆整个去掉。为了选择一种颜色，也许滑块选择控件可以选择一个正确的阴影颜色，但是在一个商店中选择一个价格，使用滑块选择控件选到分这个单位对于用户来说有点过分