Ajax在客户管理系统中的应用论文.doc

毕业设计(论文)

设计论文题目：
Ajax在客户管理系统中的应用

学生姓名：

学生学号：

专业班级：

学院名称：

指导老师：

学院院长：

年 5 月 21 号

IV
毕业设计(论文) 第IV 页

Ajax在客户管理系统中的应用
摘 要
客户关系管理是一种旨在改善企业与客户之间关系、提高客户忠诚度的新型运作机制，将企业的市场、销售和服务等有机地整合起来，形成跨部门的统一业务管理平台。
本系统采用三层Web结构，浏览器与服务器进行交互，服务器从后台数据库获取数据。系统前台基于Ajax，利用其核心对象XmlHttpRequest与服务器异步交互，部分交互数据采用XML进行传输，前台浏览器获得XML数据利用DOM文档对象模型进行处理，其中的业务逻辑采用JavaScript语言进行控制，例如：表单数据的提交，表格列表数据的显示，增加，修改，删除等操作。在后台基于ASP.NET平台采用C#语言构服务器，在服务器程序中对通用代码块采用模块化设计思想，将通用代码快设计为类的静态方法，对动态变化的接口参数，采用XML配置文件的方式，动态的从XML文件中读取，避免硬编码带来的重新编译。后台数据库采用稳定，高效SQL Server 2000。数据库设计尽量采用三范式原则，但也同时考虑编程所带来的便利性，必要时采用冗余设计原则。
Ajax在客户管理系统的应用，可以很好的改变系统与客户之间的交互的友好性，网页无刷新重载，提高交互的效率，避免了在网络上发送那些没有改变的信息。

关键词：Ajax、Javascript、XMLHttpRequest、异步交互、XML

The application of Ajax in client management system

Abstract
Customer relationship management is inter-departmental unified business management platform,which improves relationship between customer and enterpirse and enhance customer loyalty to the new operation mechanism.
The system uses a three-level structure of the Web. The browser interact with server, Server access to data from the background database. System prospects for Ajax, use its core XmlHttpRequest object asynchronous interaction with the server. Some interactive data using XML for transmission, prospects browser access to data using XML DOM document object model, The business logic using JavaScript language for the control, for example : the submission of forms, of table data about adding, modifying, deleting, etc. The background based on ASP.NET platform using C # language structure server, the server process to block generic code modular design concept of universal design for fast code like static methods Dynamic changes in the parameters of the interface, using XML configuration files, from the dynamic XML document read, avoid hard coding the recompiled. Background database using stable, efficient SQL Server 2000. Database design paradigm to maximize the use of three principles, but also consider programming from the convenience, if necessary, redundant design principles.
The application of Ajax in customer management systems, can friendly improve the interaction between system and customer,.The website does not need refreshing and reloading, avoiding the network send the message who do not change.

Keywords : Ajax、Javascript、XMLHttpRequest、Asynchronous Interaction、XML

目 录
1. 绪论 1
1.1. 背景 1
1.2. 目前发展现状 2
1.3. 研究面临的困难和关键技术 2
1.4. 本文的结构 3
2. Ajax技术 4
2.1. 应用程序分类 4
2.2. Ajax 4
2.2.1. Ajax定义 4
2.2.2. XMLHttpRequest 5
2.2.3. JavaScript 5
2.2.4. CSS 6
2.2.5. DOM 7
2.2.6. JavaScript的安全性 8
2.3. Ajax的请求/响应 9
2.3.1. 客户端和服务器的交互 9
2.3.2. 获取 Request 对象 10
2.3.3. 解析数据 12
2.3.4. 发出请求 12
2.3.5. 处理响应 14
2.3.6. 连接 Web 表单 14
2.4. 结束语 15
3. Ajax在客户管理系统的应用 16
3.1. 系统目标 16
3.2. 系统设计结构 16
3.3. 系统需求与设计 16
3.3.1. 客户管理 17
3.3.2. 业务管理 17
3.3.3. 服务管理 18
3.3.4. 费用管理 18
3.3.5. 活动管理 18
3.3.6. 业务报表 19
3.4. 系统实现 19
3.4.1. 数据库的设计与实现 19
3.4.2. 登陆的设计与实现 19
3.4.3. 智能数据联动下拉框 21
3.4.4. 功能类的设计与实现 24
3.4.5. 系统风格的实现 24
3.4.6. 系统测试与修改 24
3.5. Ajax在本系统中应用的总结 25
结论 27
致谢 28
参考文献 29

29
毕业设计(论文) 第 29 页

1. 绪论
1.1. 背景
客户关系管理的定义：它是一种使用专用工具、工艺和技术来帮助管理部门实现业务功能运作和提高的管理原则，旨在优化客户关系产生的总价值。当客户与一个企业建立业务关系时，他们期望获得特定的价值回报。只有当这些期望获得满足时，他们才会保持并发展[1]。
自人类有商务活动以来，客户关系就一直是商务活动中的一个核心问题，也是商务活动成功与否的关键之一[2]。
1990年前后，美国许多企业为了满足日益竞争的市场需要，开始开发销售自动化系SFA，随后又着力发展客户服务系统CSS,1996年后一些公司开始把SFA和CSS 两个系统合并起来，在加上营销策划和现场服务。在此基础上再集成CTI 计算机电话集成技术，形成集销售和服务于一体的呼叫中心。这就是今天熟知CRM的雏形。1998年以后，随着电子商务的兴起，开始由CRM 向eCRM 方向发展[3]。
Ajax:Asynchronous JavaScript + XML 的缩写。Ajax 的交互模型和传统基于HTML Form 的交互模型有着非常大的区别。传统的交互模式最大的问题就是任何哪怕是微小的交互行为都需要到服务器端走一趟，这样所带来大量的延迟令用户感觉很不舒服，也降低了用户的工作效率[4]。Ajax交互模型在客户端多出来了一个 Ajax engine，而且服务器传给客户端的已经不再是 HTML/CSS，而是纯的 XML 数据，客户端通过 XMLHttp 向服务器端发送请求。所有的表示逻辑在客户端通过 JS 脚本来执行，然后通过修改 DOM 来完成展现。
当服务器负载比较小时，该种交互过程并无不妥。可是当服务器负载较大时，服务器响应用户的请求时间可能会大于1分钟甚至几分钟，这样长时间的等待服务器响应对于用户来说是难以接受的。甚至有时候用户长时间等待的却是服务器返回的一个服务超时的错误消息。另一方面，某些时候用户只是想改变页面中一小部分的数据，而在传统的B/S模式中实现时，浏览器仍然需要重新加载整个页面的数据。目前，软件设计越来越讲究人性化，上述不友好的用户体验与人性化的原则背道而驰[5]。如果能够减少用户等待服务器响应的时间，就可以提高用户体验。目前，除了程序设计、编码优化和服务器调优等措施可以缩短用户的等待时间之外，还可以采用Ajax技术。随着Gmail、Google-maps的推出，Ajax正逐渐吸引全世界开发者的目光。
本系统实现的正是Ajax在基于B/S结构的客户管理系统中的一个典型应用。
1.2. 目前发展现状
虽然Ajax的出现，带来了web2.0时代，但同时其自身不免也有些缺陷和不足。首先：对搜索引擎的支持不好，Ajax的鼻祖是Google，但却对Google自己支持最不好了，GMail主界面除过Top和Bottom外没有一个链接。虽然Mail本身是个私人的应用系统，但这个无链接的设计界面恰恰给Ajax开了个坏头。其次，Ajax在手机，PDA等移动设备上的支持还不够好。再次，冗余代码更多了，会有很多JS代码，但是如果减少了JS代码，就会增加HTML代码，增多的HTML代码分部到不同的页面的每打开也要占用网络[6]。然而大多的HTML都是通过服务器上的脚本产生的，这不是加大了服务器的负担了。把数据的处理放到客户端用JS处理可以分担服务的很多任务。
在Ajax应用程序中，当有事件发生时，这些事件是与服务器相互独立的，也就是说，当客户端出现问题时，服务器端并不会马上知道。在某个位置发现和记录客户端发生的事件以及例外，使服务器能够尽快追踪需要干涉的问题。
使用GET—GET用于重新找回数据;POST用于对GET设置。不要在不适当的时候使用GET，即使认为这样做没有危害。GET操作改变状态，改变状态的链接会令用户感到困惑;大部分都认为链接的作用是导航，而不是功能。
不兼容数据类型--JavaScript不是.NET Framework框架中的一部分。一个可能会碰到的问题：确定JavaScript能够理解其运行平台上的数据类型，反之，对于.NET或其他都是如此[7]。可能会有多种转换器，都需要把其找出来。例如，Ajax.NET Pro资料库，提供能够转换.NET 和 JavaScript对象符号的转换器。
1.3. 研究面临的困难和关键技术
实现一个实用，高效的客户关系管理系统面临以下两个困难：
1.客户关系管理系统是为了建立一套以客户为中心的销售服务体系，因此CRM系统的实施应当是以业务过程来驱动的。IT技术为CRM系统的实现提供了技术可能性，但CRM真正的驱动力应来源于业务本身。CRM项目的实施必须要把握软件提供的先进技术与企业目前的运作流程间的平衡点，以项目实施的目标来考虑当前阶段的实施方向。
2.系统对客户来源进行分类，需要生成客户的树形结构，本系统采用Ajax动态生成树形结构，对树形结构的操作需要动态与服务器交互，而不是在本地一次生成。涉及熟练使用DOM和Javascript技术。
研究使用的几个关键技术：
1.Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。Ajax技术之中，最核心的技术就是XMLHttpRequest，它最初的名称叫做XMLHTTP，XMLHttpRequest为运行于浏览器中的JavaScript脚本提供了一种在页面之内与服务器通信的手段。页面内的JavaScript可以在不刷新页面的情况下从服务器获取数据，或者向服务器提交数据。
2.ASP.NET是一种建立在通用语言上的程序构架，能被用于一台Web服务器来建立强大的Web应用程序。ASP.NET提供许多比现在的Web开发模式强大的的优势. ASP.NET是运行一些很平常的任务如表单的提交客户端的身份验证、分布系统和网站配置变得非常简单。ASP.NET已经被刻意设计成为一种可以用于多处理器的开发工具，它在多处理器的环境下用特殊的无缝连接技术，将很大的提高运行速度。
3.Web系统的三层结构，实现的三层结构不仅程序逻辑上结构清晰，而且由于容易发生需求变更的业务逻辑部分实现了分离，因此具有更强的可扩展性和可维护性。同时这种系统在部署时具有很强的灵活性，可以将各个包分别编译成.NET组件，安装在多台服务器。较典型的是用户界面包安装在Web服务器，业务逻辑包安装在应用服务器，数据访问包安装在数据库服务器或进一步分离，从而实现多级分布的部署方式，实现更好的可伸缩性和安全性，满足大规模的企业级B/S应用系统的需求。
1.4. 本文的结构
本文的所有章节：第一章讨论本文的背景，研究面临的困难和关键技术。第二章讨论Ajax的技术，介绍Ajax中使用的各种技术。第三章讨论如何利用第二章提供的Ajax的技术，设计并实现一个客户管理系统。第四章总结全文。

2. Ajax技术
2.1. 应用程序分类
目前，编写应用程序时有两种基本的选择：桌面应用程序，Web 应用程序。
两者是类似的，桌面应用程序通常以 CD 为介质（有时候可从网站下载）并完全安装到你的计算机上。桌面应用程序可能使用互联网下载更新，但运行这些应用程序的代码在桌面计算机上。Web 应用程序运行在某处的 Web 服务器上，要通过 Web 浏览器访问这种应用程序。不过，比这些应用程序的运行代码放在何处更重要的是，应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快（就在您的计算机上运行，不用等待互联网连接），具有漂亮的用户界面（通常和操作系统有关）和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游，基本上不需要等待。
另一方面，Web 应用程序是最新的潮流，它们提供了在桌面上不能实现的服务（比如 A 和 eBay）。但是，伴随着 Web 的强大而出现的是等待，等待服务器响应，等待屏幕刷新，等待请求返回和生成新的页面。
Ajax 尝试建立桌面应用程序的功能和交互性，与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件，不过是在 Web 应用程序中。Ajax 不仅仅是一种技术，更是一种构建网站的强大方法[8]。
在Ajax中，涉及到多种技术，要灵活地运用它必须深入了解这些不同的技术。Ajax 由 HTML、JavaScript技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序[9]。
2.2. Ajax
2.2.1. Ajax定义
Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写。下面是 Ajax 应用程序所用到的基本技术：
HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。
DHTML 或 Dynamic HTML，用于动态更新表单，使用div、span和其他动态 HTML 元素来标记 HTML。
文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML[10]。
2.2.2. XMLHttpRequest
XMLHttpRequest是一个 JavaScript 对象，Ajax技术之中，最核心的技术就是XMLHtpRequest，它最初的名称叫做XMLHTTP，是微软公司为了满足开发者的需要，1999年在IE5.0浏览器中率先推出的[11]。后来这个技术被上述的规范命名为XMLHtpRequest。它正是Ajax技术之所以与众不同的地方。简而言之，XMLHtpRequest为运行于浏览器中的JavaScript脚本提供了一种在页面之内与服务器通信的手段。页面内的JavaScript可以在不刷新页面的情况下从服务器获取数据，或者向服务器提交数据。而在这个技术出现之前，浏览器与服务器通信的唯一方式就是通过HTML表单的提交，这一般都会带来一次全页面的刷新。
XMLHtpRequest的出现为Web开发提供了一种全新的可能性，甚至整个改变了人们对于Web应用由什么来组成的看法。在这个技术出现之前，由于技术上的限制，人们认为Web应用就是由一系列连续切换的页面组成的。因此整个Web应用被划分成了大量的页面，其中大部分是一些很小的页面。用户大部分的交互都需要切换并刷新整个页面，而在这个过程中(下一个页面完全显示出来之前)，用户只能等，什么都做不了。然而XMLHtpRequest技术的出现使得可以打破这种笨拙的开发模式，以一种全新的方式来做Web开发，为用户提供更好的交互体验。
XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。创建该对象代码如下所示。
<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
2.2.3. JavaScript
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：
1.JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。 
2.JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 
3.JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。 
4.JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 
5.JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 
6.JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了编写一次，到处运行。
综合所述JavaScript 是一种新的描述语言，它可以被嵌入到 HTML 的文件之中。 JavaScript语言可以做到回应使用者的需求事件 (如： form 的输入) ，而不用任何的网路来回传输资料。
2.2.4. CSS
CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式[12]。
CSS是Web设计沿用已久的部分，无论在传统的Web应用还是在Ajax应用中，CSS都是一种频繁使用的技术，样式表提供了集中定义各种视觉样式的方法，并且可以非常方便的设置在页面的元素，例如，颜色，边框，背景图片，透明度和大小等。此外，样式表还可以定义元素之间的布局以及简单的用户交互功能。
在传统的Web应用中，样式表提供了一种非常有用的方法，可以在某个地方定义一些在很多页面重复使用的样式。在Ajax程序中，虽然不把应用思考为一些切换的页面，但是样式表可以用最少的代码动态的为元素设置预先定义的外观。
2.2.5. DOM
DOM，即文档对象模型。DOM是用于HTML和XML文档的API.。DOM提供了文档的结构表现，允许修改文档的内容和视觉表现。本质上，它把网页和脚本或编程语言连接了起来。DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航仪寻找特定信息[13]。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而 DOM 被认为是基于树或基于对象的。
DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航仪寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而 DOM 被认为是基于树或基于对象的。
对于特别大的文档，解析和加载整个文档可能很慢且很耗资源，因此使用其他手段来处理这样的数据会更好。这些基于事件的模型，比如 Simple API for XML（SAX），适用于处理数据流，即随着数据的流动而依次处理数据。基于事件的 API 消除了在内存中构造树的需要，但是却不允许开发人员实际更改原始文档中的数据。
另一方面，DOM 还提供了一个 API，允许开发人员添加、编辑、移动或删除树中任意位置的节点，从而创建一个引用程序。
解析器是一个软件应用程序，设计用于分析文档（这里是指 XML 文件），以及做一些特定于该信息的事情。在诸如 SAX 这样基于事件的 API 中，解析器将向某种监听器发送事件。在诸如 DOM 这样基于树的 API 中，解析器将在内存中构造一颗数据树。
2.2.6. JavaScript的安全性
保护Ajax数据流安全性是因特网服务日益重要的关注点。Web天生就是不安全的，为Ajax应用添加适当的安全性机制与为产品添加安全性机制大不相同。很明显，只要涉及用户的金钱，例如在线购物或者提供需要付款的服务，为应用提供适当的安全性就是必须考虑的基本要求。
当Ajax应用程序启动的时候，Web服务器发送一组JavaScript指令给运行在另外一台机器上的Web浏览器，它们之间可能以前从未打过交道。浏览器继续执行这些指令。在允许Web浏览器做这件事上，Ajax应用的用户对这个应用和它的作者表现出了很大的信任。浏览器厂商和标准团体意识到这样的信任并不总是恰当的，并且已经在适当的地方加入了保护，以免滥用[14]。这些保护措施，这些限制是不恰当的，因此可以放宽。直接和第三方Web服务通信的能力就是这样一种情形。
电脑硬盘上的所有东西都不过只是一堆二进制数据[15]。然而，可以将数据区分为纯粹的描述型数据和代表可执行的机器指令的数据。描述型数据本身什么也干不了，除非正在执行的某些过程使用它。在早期的客户/服务器应用中，客户端安装在用户的电脑上，就像任何其他的桌面应用一样。网上所有的数据流都是纯粹的描述型数据[16]。然而，Ajax应用的JavaScript代码是可执行代码。所以，与那些“死”的数据相比，它有潜力完成很多精彩的工作。它也可能会更加危险。只要代码是存放在一台机器上，其自身可以通过网络传输到另外一台机器上执行，将这类代码描述为“移动”的。接收到移动代码的电脑需要判断是否应该信任代码的发送者（特别是来自公共因特网上的代码），以及它可以授权移动代码访问哪些系统资源。
当在Web浏览器中执行JavaScript代码的时候，用户允许与其素不相识的人编写的代码运行在自己的机器上。移动代码能够以这种方式自动跨越网络来运行，因此是一个潜在的安全隐患。为了解决移动代码的潜在危险，浏览器厂商在一个沙箱（sandbox）中执行JavaScript代码，沙箱是一个只能访问很少计算机资源的密闭环境。Ajax应用不能读取或写入本地文件系统。大多数情况下，除了它自身所在的Web域，它也不能创建任何到其他Web域的网络连接。程序生成IFrame能够加载来自其他域的页面，并且运行页面中的代码，但是两个域的脚本不能互相交互。
2.3. Ajax的请求/响应
2.3.1. 客户端和服务器的交互
在一般的 Web 应用程序中，用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本（通常是 PHP 或 Java，也可能是 CGI 进程或者类似的东西），脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待[17]。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。
Ajax 基本上就是把 JavaScript 技术和XMLHttpRequest对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。
然后，服务器将数据返回 JavaScript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让用户感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是XMLHttpRequest的强大之处[18]。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。
加入一些 JavaScript得到XMLHttpRequest的句柄后，其他的 JavaScript 代码就非常简单了。事实上，JavaScript 代码完成非常基本的任务：
1.获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。
2.修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。
Ajax系统客户端与服务器一次的交互过程如下图：

图2.1　客户端与服务器一次交互
2.3.2. 获取 Request 对象
XMLHttpRequest是 Ajax 应用程序的核心。几年前没有一样东西在不同的浏览器上得到同样的结果，因此获得XMLHttpRequest对象可能需要采用不同的方法。下面将详细地进行解释。
1.Microsoft 浏览器
Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML（可以通过 参考资料 进一步了解 MSXML）。因此如果编写的 Ajax 应用程序要和 Internet Explorer 打交道，那么必须用一种特殊的方式创建对象。但并不是这么简单。根据 Internet Explorer 中安装的 JavaScript 技术版本不同，MSXML 实际上有两种不同的版本，因此必须对这两种情况分别编写代码。如下代码在 Microsoft 浏览器上创建了一个XMLHttpRequest。
var xmlHttp = false;
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2)
{
xmlHttp = false;
}
}
这两行代码基本上就是尝试使用MSXML 创建对象，如果失败则使用另一个版本创建该对象。如果都不成功，则将xmlHttp变量设为 false，告诉代码出现了问题。如果出现这种情况，可能是因为安装了非 Microsoft 浏览器，需要使用不同的代码。
2. Mozilla 和非 Microsoft 浏览器
如果选择的浏览器不是 Internet Explorer，或者为非 Microsoft 浏览器编写代码，就需要使用不同的代码。事实上就是如下所示的一行代码：
var xmlHttp = new XMLHttpRequest object;。
这行代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中，创建了XMLHttpRequest对象。
3.各种浏览器
要支持所有浏览器。编写一个只能用于 Internet Explorer 或者非 Microsoft 浏览器的应用程序是不健壮的，要编写一个应用程序两次。因此代码要同时支持 Internet Explorer 和非 Microsoft 浏览器。如下显示了这样的代码。
var xmlHttp = false;
/*@if (@_jscript_version >= 5)
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2)
{
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined')
{
xmlHttp = new XMLHttpRequest();
}
那些注释掉的符号，如@cc_on，这是特殊的 JavaScript 编译器命令。这段代码的核心分为三步：
1.建立一个变量xmlHttp来引用即将创建的XMLHttpRequest对象。
2.尝试在 Microsoft 浏览器中创建该对象：尝试使用Msxml2.XMLHTTP对象创建它。如果失败，再尝试Microsoft.XMLHTTP对象。
3.如果仍然没有建立xmlHttp，则以非 Microsoft 的方式创建该对象。
最后，xmlHttp应该引用一个有效的XMLHttpRequest对象，无论运行什么样的浏览器。
现在介绍了 Ajax，对XMLHttpRequest对象以及如何创建它也有了基本的了解。知道与服务器上的 Web 应用程序打交道的是 JavaScript 技术，而不是直接提交给那个应用程序的 HTML 表单。
2.3.3. 解析数据
解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM，处理 HTML 表单服务器返回的 XML 数据的结构[19]。对于前两点，需要非常熟悉getElementById()方法，如下代码用 JavaScript 代码捕获和设置字段值
// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;
// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];
掌握了XMLHttpRequest，Ajax 应用程序的其他部分就是上所示的简单 JavaScript 代码，混合有少量的 HTML。同时，还要用使用DOM。
2.3.4. 发出请求
已经创建了一个崭新的XMLHttpRequest对象，接下来该如何使用这个对象。首先需要一个 Web 页面能够调用的 JavaScript 方法（比如当用户输入文本或者从菜单中选择一项时）。接下来就是在所有 Ajax 应用程序中基本都雷同的流程：
1.从 Web 表单中获取需要的数据。
2.建立要连接的 URL。
3.打开到服务器的连接。
4.设置服务器在完成后要运行的函数。
5.发送请求。
如下示例 Ajax 方法就是按照这个顺序组织的：
function callServer()
{
var city = docume