Ajax程序设计技术

Ajax程序设计技术信息科技学院学习要点：1．Ajax的基本概念及原理。2．常用Ajax框架及其使用方法。3．掌握如何编写一个Ajax应用程序。Ajax程序设计技术为了便于读者理解Ajax技术的基本原理，并学会应用Ajax技术，本章将介绍如何利用XMLHttpRequest对象进行Ajax开发，随后针对ASP.NET平台流行的Ajax框架进行详细探讨，并通过具体案例讲解各个框架的配置和使用方法。第7章Ajax程序设计技术7.1Ajax概述7.2用XMLHttpRequest实现Ajax技术7.3Ajax应用框架7.4Ajax应用实例7.1Ajax概述Ajax通过异步数据交换和处理，可以显著提高Web应用程序运行效率，给Web开发者带来了新的希望。Ajax实际上是几项技术按一定的方式组合在一起共同协作中发挥各自的作用。Ajax基于下列核心技术：1.XHTML：对应W3C的XHTML规范，目前是XHTML1.0。2.CSS：对应W3C的CSS规范，目前是CSS2.0。3.DOM：这里的DOM主要是指HTMLDOM。4.JavaScript：对应于ECMA的ECMAScript规范。5.XML：对应W3C的XMLDOM、XSLT、XPath等规范。6.XMLHttpRequest：对应WHATWG（WebHypertextApplicationTechnologyWorkingGroup）的WebApplications1.0规范的一部分()。Ajax的工作原理相当于在用户和服务器之间加了一个中间层—Ajax引擎，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和简单的数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。其应用程序模型如图7-1所示。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在InternetExplorer5中首次引入，它是一种支持异步请求的技术。XmlHttpRequest使开发者可以使用JavaScript向服务器提出异步请求并处理响应，而不阻塞用户。目前实现Ajax技术的方法主要有（1）直接基于XMLHttpRequest对象；（2）利用各种Ajax框架，简化Ajax开发。7.2用XMLHttpRequest实现Ajax技术Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面)，这一特点主要得益于XMLHTTP组件中的XMLHttpRequest对象。最早应用XMLHTTP的是微软IE（IE5以上）允许开发人员在Web页面内部使用XMLHTTPActiveX组件扩展自身的功能，开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。在这种情况下，XMLHttpRequest对象相当于起到了图7-1中Ajax引擎的作用，利用该对象减少了无状态连接的痛苦，还可以排除下载冗余HTML从而提高服务器的响应速度。XMLHttpRequest是Ajax开发的基础，体现了异步调用的核心。XMLHttpRequest对象的方法和属性如表7-1和表7-2所示。方法描述abort()停止当前请求getAllResponseHeaders()返回完整的headers字符串getResponseHeader(“headerLabel”)返回单个的header标签字符串open(“method”,“URL”[,syncFlag[,“userName”[,“password”]]])设置请求的方法、目标URL和其他参数send(content)发送请求setRequestHeader(“label”,“value”)设置header并和请求一起发送属性描述onreadystatechange状态改变的事件触发器readyState对象状态（integer）：0=未初始化；1=读取中；2=已读取；3=交互中；4=完成responseText从服务器返回的数据文本responseXML从服务器返回兼容DOM的XML文档对象status服务器返回的状态码。如：404表示“文件未找到”、200表示“成功”statusText服务器返回的状态文件信息表7-2使用XMLHttpRequest对象发送请求的基本步骤是：1）创建XMLHttpRequest对象；2）指定处理函数：给XMLHttpRequest对象的onreadystatechange属性赋值，指示哪个函数处理XMLHttpRequest对象状态的改变；3）指定请求的属性。open方法的三个参数分别指定将发送请求的方法（通常是GET或POST）、目标资源URL串以及是否异步请求；4）发送请求到服务器：send方法把请求传送到指定的目标资源，send方法接受一个参数，通常是一个串或DOM对象。这个参数会作为请求体的一部分传送到目标URL。向send方法提供参数时，要确保open中指定的方法是POST。如果没有数据要作为请求体的一部分发送，则使用null。用XMLHttpRequest进行Ajax开发的基本步骤主要包括发送XMLHttpRequest对象请求和获取响应信息进行数据处理两个步骤。XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。[例7.1]该例代码演示了利用XMLHttpRequest对象获取远程数据并显示结果的整个过程。例子链接页面WelcomeResult.aspx仅根据调用的参数返回一个字符串，在.NET环境中其页面的codebehind代码为：链接其运行效果如图7-3所示：图7-3(1)图7-3(2)Ajax实例运行效果7.3Ajax应用框架利用XMLHttpRequest对象兼容性较好的特点，可以开发出比较健壮的Ajax应用程序。同时由于XMLHttpRequest对象比较接近于底层，在实际开发过程中可以根据具体情况进行灵活控制。但是基于XMLHttpRequest实现Ajax的应用需要程序员直接处理客户端脚本、DHTML、客户端数据展现等，实现过程比较繁琐，对程序员本身要求也比较高，不利于该技术的推广应用。目前在.NET开发环境中，已经有不少可供程序员直接使用的Ajax开发组件，比如ASP.NETAjax（原Atlas）、MagicAjax.NET、Ajax.NET等等。这些开发组件无一例外地都实现了对XMLHttpRequest的封装，简化了ASP.NET实现Ajax的复杂程度。这些Ajax开发组件实质上就是一个Ajax应用框架。7.3.1Ajax框架分类根据Ajax框架封装技术的不同，可以将其分为客户端（Client-Side）框架和服务器端（Server-Side）框架。基于客户端浏览器的应用框架一般分为两种：1，ApplicationFrameworks：最具特色的是在客户端桌面上可通过Ajax应用框架建立象VisualBasic或Delphi那样的用户GUI(GraphicalUserInterface)。比较著名有Bindows、BackBase等。2，InfrastructuralFrameworks：提供基本框架功能和轻便式浏览器端操作，让开发者创建具体应用。基于服务器端的应用框架通常以下面两种方式工作：1，HTML/JSGeneration（HTML/JS生成）：将Ajax引擎集成到Web服务器端，当服务器接收到页面请求时，自动将Ajax的JavaScript代码附加到页面中。比如Ajax.NET、ASP.NETAjax。2，远程交互：JavaScript调用服务器端函数（例如调用Java函数）并返回给JavaScript的回调句柄。比如DirectWebRemoting。7.3.2.NET平台下的Ajax框架1．Ajax.Net利用Ajax.Net，开发者可从客户端浏览器利用JavaScript调用运行在.NET平台上的服务器处理对象。Ajax.Net包括一个DLL，可以与VB.NET或C#一同使用。Ajax.Net框架的文档很好地展示了针对各种场景的解决方案，而且能得到相关的源代码。虽然Ajax.Net可以比较灵活地控制Ajax请求，但是当利用Ajax.Net进行Ajax开发时，仍然需要开发者编写比较繁琐的JavaScript代码处理请求和返回数据以及页面更新，所以相对其他Ajax框架应用不够简便，学习起来要困难一些，故我们将重点放在后两种框架的介绍上。2．Microsoft的ASP.NETAjax（原Atlas）Microsoft在Ajax领域涉足的时间己经不短了，毕竟，XMLHttpRequest对象是Microsoft提出的，而且从1998年开始就已经用在Web版本的Outlook中。Microsoft把重点放在提供一个更加健壮的开发环境上，从而让开发人员的工作更轻松。MicrosoftASP.NETAjax应用框架完美地实现了和ASP.NET服务器组件以及Web服务的集成。（1）安装ASP.NETAjax安装ASP.NETAjax框架要求操作系统必须是Windows2000、WindowsXP、WindowsServer2003或WindowsVista，事先需安装好如下软件：Microsoft.NETFrameworkVersion2.0或以上；至少一种流行的浏览器：IE5.01（推荐使用IE6.0）或FireFox1.5；VisualStudio2005（各种版本均可）或者VisualWebDeveloperExpressEdition；InternetInformationService（IIS）。系统按照以上配置好以后，就可以开始下载安装ASP.NETAjax程序了。首先我们可以到网站下载最新的ASP.NETAjax安装文件。在的下载页面中，我们可以看到ASP.NETAjax主要包含如下两个主要的下载安装文件。（1）ASP.NET2.0AjaxExtensions：包含最重要和最基本的一些控件、组件和功能，例如服务器端的ScriptManager控件、UpdatePanel控件，客户端的JavaScript面向对象方面扩展、调试类、WebService代理等。对于这一部分内容，微软公司将提供完善的技术支持，并提供如MSDN一般详细的开发文档等（可访问）。这是ASP.NETAjax的核心部分。（2）ASP.NETAjaxFuturesCTP：这一部分是ASP.NETAjax的“Futures”部分，其中包括服务器端的扩展器控件（ExtenderControl）、Web部件，客户端的各种控件、拖放功能实现、ASP.NETAjaxXML脚本等。“Futures”意味着微软暂时不会对这些内容进行官方的支持，而选择使用“社区支持”的方法。下载好这两个部分的安装文件后，我们就可以开始如下的安装过程了，需要注意的是“核心”部分是整个ASP.NETAajx开发的基础，所以应该首先安装“核心”部分。安装“核心”部分ASP.NET2.0AjaxExtensions的界面如图7-4所示。图7-4安装核心部分ASP.NET2.0AjaxExtensions时的界面3主要控件（ScriptManager、UpdatePanel控件）ASP.NETAjax提供的最重要的两个服务器端控件：一个是用来生成并发送给浏览器所有客户端JavaScript脚本的ScriptManager；另一个是用来为现有ASP.NET2