搜索
第一篇Ajax基础篇第1章Ajax概述Ajax全称AsynchronousJavaScriptandXML，中文含义为“异步JavaScript和XML”。它是Web2.0技术的核心，由多种技术组合而成。使用Ajax技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高网页加载速度，从而缩短用户等待时间，改善用户操作体验。本章将对Ajax进行全面介绍，使读者对传统Web应用解决方案、Ajax的开发模式、Ajax的运行机制有一个概要的了解，为以后章节的学习打下基础。本章最后将引导读者开发一个简单的Ajax案例。理解传统Web应用解决方案理解Ajax技术理解Ajax开发模式掌握理解Ajax的运行机制理解会员验证方法熟悉Ajax应用开发过程1.1传统Web应用解决方案在传统Web应用解决方案中，如果用户使用浏览器浏览网页，当页面刷新很慢的时候，用户的浏览器在干什么？屏幕显示什么内容？通常情况下，用户的浏览器在等待刷新，而屏幕上则是一片空白，用户只能在屏幕前苦苦地等待浏览器的响应。开发人员为了克服这种尴尬的局面，不得不在每一个可能需要长时间等待响应的页面上增加一个DIV标记，在需要时显示类似“系统正在处理您的请求……”等信息以提示用户，从而改善用户的操作体验。为什么会出现上述情况？因为传统的Web应用采用同步交互方式。这种方式下用户首先向HTTP服务器发送一个请求，服务器接到请求后开始执行用户请求的操作，最后将执行结果返回给用户浏览器，如返回一个HTML页面。这是一种不连贯的用户体验，服务器在处理请求的2第一篇Ajax基础篇时候，用户多数时间处于等待状态，屏幕上通常一片空白。图1-1和图1-2所示分别为传统Web应用程序的结构和模型。图1-1传统Web应用程序的结构图1-2传统Web应用程序的模型自从采用超文本作为Web传输和显示方式之后，Web开发人员就一直使用这样的方式。当负载比较小的时候，这种方式并没有体现出任何问题。可是当负载比较大时，响应时间可能要很长，一分钟、两分钟，甚至数分钟的等待是用户不可忍受的。而且，如果响应时间过长，超过了页面响应时间，那么服务器会返回页面不可用的信息。另外，有时，用户只是想改变页面中某一部分的数据，而并非要重新加载整个页面。当软件设计越来越讲究人性化的时候，这么糟糕的用户体验与这种原则背道而驰。为何总是要让用户等待服务器返回数据？至少，应该通过一定的方法来减少用户等待的时间。现在，除了程序设计、编码优化和服务器调优之外，还可以采用Ajax技术。3第章Ajax概述11.2新的Web开发模式——AjaxAjax用来描述一组技术，主要包括：客户端脚本语言JavaScript、异步数据获取技术XMLHTTPRequest、数据互换和操作技术XML和XSLT、动态显示和交互技术DOM及基于标准的表示技术XHTML和CSS等。Ajax极大地发掘了Web浏览器的潜力，开启了大量新的可能性，从而有效地改善了用户操作体验。1.2.1初识Ajax在Ajax之前，Web站点强制用户进入提交、等待、重新显示返回结果的过程。用户的动作总是与服务器的处理同步。Ajax提供与服务器异步通信的能力，从而使用户从请求-响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新用户页面，并向服务器发出异步请求执行更新或查询数据库操作。当请求返回时，就可以使用JavaScript和CSS来相应地更新页面中的某一部分，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信，Web站点看起来像是即时作出响应的。1．Ajax介绍传统的Web应用允许用户填写表单（Form），当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这种做法浪费了许多带宽，因为前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就取决于服务器的响应时间。这导致用户界面的响应比本地应用要慢得多。与此不同，Ajax应用可以仅向服务器发送并取回必需的数据。它使用SOAP或其他一些基于XML的WebService接口，并在客户端采用JavaScript处理来自服务器的响应。因为服务器和浏览器之间交换的数据大量减少，从而使得Web应用响应更快。同时，很多处理工作可以在发出请求的客户端机器上完成，Web服务器的处理量减少了，这样能够大大缩短Web服务器的响应时间。总的来说，Ajax应用程序具有以下特点。通过异步模式，提升用户体验。优化浏览器和服务器之间的数据传输，减少不必要的往返数据，减少了带宽占用量。Ajax引擎在客户端运行，承担了一部分原本由服务器承担的工作，从而减少了大用户量下的服务器负载。Ajax技术应用是受制于浏览器的。如果大量用户还在使用比较旧的浏览器，如IE5、Mozilla1.0或Safari1.2之前的版本，Ajax技术的使用就失去了效果。另外，不同浏览器上的JavaScript和DOM实现存在差异。开发人员在创建XMLHTTPRequest对象的实例时一定要注意这一点。这些内容将在后面进行详细介绍。2．Ajax与传统Web应用的区别Ajax技术是Web2.0技术的重要组成部分。Ajax技术不同于传统的Web技术，是对传统Web技术的一种改良和发展。引入Ajax技术后，不仅改进了Web应用的性能，也改善了用户4第一篇Ajax基础篇的体验。下面就从几个方面介绍一下Ajax与传统Web应用之间的不同。用户体验这是Ajax技术最大的改善之处。对于传统的Web应用，用户只能发送独占式请求，一旦请求发送出去，页面就处于等待状态，等待服务器完成响应。在服务器响应完成之前，客户端的浏览器只能是一片空白。而Ajax技术则完全不同。它允许客户端采用异步的方法发送请求，请求的发送完全不会阻塞当前的浏览器线程，浏览器可以继续下一步操作，如继续浏览，甚至再次发送异步请求。对于用户体验，Ajax带来了重大的改善，它让用户不会处于等待状态，用户会感觉自己一直与应用处于交互状态。响应速度就响应速度而言，大多数人会认为Ajax应用的速度比传统Web应用要快，实际上这种说法并不完全正确。基于Ajax的应用需要增加大量JavaScript代码，增加大量JavaScript代码后的Web页面在第一次加载时速度将比传统Web页面慢（必须下载大量的JavaScript代码）。一旦进入该页后，响应速度便会明显提高，无须频繁地在各页面之间跳转，从服务器获得的仅是必须改变的数据，减少了冗余数据的下载，从而大幅度提高响应速度。也许有人会认为Ajax包含的大量JavaScript代码会占用用户的大量带宽，这是不正确的，因为Ajax应用下载一次页面后，便可以多次重复使用。一次下载的JavaScript代码量虽然增大，但从长时间来看，传统Web应用需要多次下载Web页面，需要的带宽更大。应用架构传统Web应用主要由3层组成，而增加Ajax技术的Web应用将在传统的Web应用上额外增加一个Ajax引擎，其实质就是一层JavaScript代码。这些JavaScript代码可以在客户端保存用户状态而无须使用Session，能将控制器的部分功能转移到客户端页面，但这必然会导致安全性等方面的问题，需要开发者认真对待。开发的代码量Ajax技术的大部分功能都依赖于JavaScript语言实现，大量的JavaScript代码严重降低了程序员的开发效率。JavaScript本身不是面向对象的编程语言，这严重限制了JavaScript代码的可重用性。JavaScript代码并没有一个完善的调试工具，这无形中也加重了程序员的负担。服务器的负担传统的观点认为Ajax技术减轻了服务器的负担，因为服务器只需要生成客户端必须更新的数据。这种说法在某些场合下也许正确，但实际的情形则是：大量使用Ajax技术的Web应用将导致服务器的负担大大加重，而绝不是减轻。因为Ajax技术往往比传统Web应用需要发送更多的请求，如用户注册时的用户名验证。传统Web应用无需发送任何请求，只要等待用户输入即可，而Ajax技术则是用户每输入一个字符，应用都将向服务器发送一次请求。Ajax技术的优势是相当明显的，但是应该在什么时候使用Ajax技术这是一个很重要的问题。如果过度使用Ajax，那么就会有数千行JavaScript代码在客户端的浏览器上运行，可能会让用户感觉速度很慢。如果这些脚本编写不当，就会很快失去控制，特别是在通信量很大的情况下。所以，Ajax技术的使用有一定的范围，比如在改善用户操作体验等方面。3．Ajax的应用Ajax的主要特点在于异步交互，更新Web页面的局部信息。因此，它比较适用于交互5第章Ajax概述1较多、读取数据频繁，而数据传输量又比较小的Web应用。表1-1所示为Ajax的几种应用情况。表1-1Ajax的应用情况应用情况说明基于表单的简单用户交互如用户注册验证、数据格式验证等。如果采取整页回发（PostBack）到服务器做法，不仅传输数据量大、服务器负担重、响应时间长，而且会导致用户体验很差。在验证结束后，由于某些数据错误返回注册页面时，先前输入的数据都已不存在了，必须重新填写。而采用Ajax技术后，这些任务在用户填写其他信息时，已有XMLHTTPRequest对象异步完成，极大地改善用户操作体验时时更新的页面信息如聊天室信息、在线统计、股票的涨跌等。这类系统都需要实时地反映数据的变化。采用Ajax技术能定时异步访问服务器，可以获得最新信息并将其显示给用户，而且可以避免整个页面的刷新菜单导航如多级联动菜单、树状导航等。可以采用Ajax技术来实现按需读取数据的功能，这可以避免每次变动都需要整页回发（PostBack）到服务器，从而节省带宽资源，提高响应速度，也减少显示所有数据时所要消耗的带宽资源评论、选择投票这几种情况传输的数据量非常小，因而没有必要将整个页面回发（PostBack）到服务器。采用Ajax技术，用户在执行完相关操作后，将异步与服务器进行自动交互，而用户同时可以继续执行其他操作大家或多或少使用过Google搜索服务，它就是使用Ajax技术实现交互的一个很好的示例。当用户键入字符时，GoogleSuggest可以为用户提供与输入字符相符的提示，帮助用户完成想要输入的搜索字符串。图1-3所示为输入字符串“科技”后的效果。图1-3GoogleSuggest的Ajax使用从图1-3所示可知，GoogleSuggest已经显示了建议性的内容，极大地方便了用户的搜索，从而改善了用户的搜索体验。6第一篇Ajax基础篇1.2.2Ajax开发模式国内使用Ajax技术进行Web开发还是最近刚流行起来的，Ajax技术还处于发展阶段，并没有形成一个非常统一的开发模式。这些开发模式，针对不同的Ajax项目，在具体实现上的差别是比较大的。下面介绍几种常见的Ajax开发模式。XMLHTTP+WebFormXMLHTTP+WebForm是使用Ajax技术进行Web应用开发的最基本方法。首先，开发人员使用JavaScript语言编写代码操作XMLHTTP对象，向服务器端的某个ASP.NET页面发出异步请求。服务器端的ASP.NET页面接收请求，并根据请求进行相应的处理，处理完成后返回相应的执行结果给XMLHTTP对象。最后，开发人员再使用JavaScript语言编写代码把返回的结果显示在客户端的浏览器上。XMLHTTP+HttpHandlerXMLHTTP+HttpHandler与XMLHTTP+WebForm相比在客户端的实现上并没有太大变化，也是使用JavaScript语言编写代码操作XMLHTTP对象，但是服务器端改用HttpHandler来接收和处理异步请求。HttpHandler是HTTP请求的真正处理中心。正是在这个HttpHandler容器中，ASP.NETFramework才真正对客户端请求的服务器页面进行编译和执行，并将处理后的信