Ajax程序设计技术—课件.pptVIP

Ajax程序设计技术 学习要点： 1．Ajax的基本概念及原理。 2．常用Ajax框架及其使用方法。 3．掌握如何编写一个Ajax应用程序。 Ajax程序设计技术 为了便于读者理解Ajax技术的基本原理，并学会应用Ajax技术，本章将介绍如何利用XMLHttpRequest对象进行Ajax开发，随后针对ASP.NET平台流行的Ajax框架进行详细探讨，并通过具体案例讲解各个框架的配置和使用方法。 第7章 Ajax程序设计技术 7.1 Ajax概述 7.2 用XMLHttpRequest实现Ajax技术 7.3 Ajax应用框架 7.4 Ajax应用实例 7.1 Ajax概述 Ajax通过异步数据交换和处理，可以显著提高Web应用程序运行效 率，给Web开发者带来了新的希望。Ajax实际上是几项技术按一定的方 式组合在一起共同协作中发挥各自的作用。Ajax基于下列核心技术： XHTML：对应W3C的XHTML规范，目前是XHTML1.0。 CSS：对应W3C的CSS规范，目前是CSS2.0。 DOM：这里的DOM主要是指HTML DOM。 JavaScript：对应于ECMA的ECMAScript规范。 XML：对应W3C的XML DOM、XSLT、XPath等规范。 XMLHttpRequest：对应WHATWG（Web Hypertext Application Technology Working Group）的 Web Applications1.0规范的一部分 (/specs/web-apps /current-work/)。 Ajax的工作原理相当于在用户和服务器之间加了一个中间层—Ajax引 擎，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给 服务器，像一些数据验证和简单的数据处理等都交给Ajax引擎自己来 做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提 交请求。其应用程序模型如图7-1所示。 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。XmlHttpRequest使开发者可以使用JavaScript向服务器提出异步请求并处理响应，而不阻塞用户。 目前实现Ajax技术的方法主要有 （1）直接基于XMLHttpRequest对象； （2）利用各种Ajax框架，简化Ajax开发。 7.2 用XMLHttpRequest实现Ajax技术 Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面)，这一特点主要得益于XMLHTTP组件中的XMLHttpRequest对象。 最早应用XMLHTTP的是微软IE（IE5以上）允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能，开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。在这种情况下，XMLHttpRequest对象相当于起到了图7-1中Ajax引擎的作用，利用该对象减少了无状态连接的痛苦，还可以排除下载冗余HTML从而提高服务器的响应速度。 XMLHttpRequest是Ajax开发的基础，体现了异步调用的核心。XMLHttpRequest对象的方法和属性如表7-1和表7-2所示。 使用XMLHttpRequest对象发送请求的基本步骤是： 1）创建XMLHttpRequest对象； 2）指定处理函数：给XMLHttpRequest对象的onreadystatechange属性赋值，指示哪个函数处理XMLHttpRequest对象状态的改变； 3）指定请求的属性。open方法的三个参数分别指定将发送请求的方法（通常是GET或POST）、目标资源URL串以及是否异步请求； 4）发送请求到服务器：send方法把请求传送到指定的目标资源，send方法接受一个参数，通常是一个串或DOM对象。这个参数会作为请求体的一部分传送到目标URL。向send方法提供参数时，要确保open中指定的方法是POST。如果没有数据要作为请求体的一部分发送，则使用null。 XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。 [例7.1] 该例代码演示了利用XMLHttpRequest对象获取远程数据并显示结果的整个过程。