下载文档原格式
简介本文介绍一种方法，Ajax(Asynchronous JavaScript andXML，提出：Jesse James Garrett)，使用它可以构建更为动态和响应更灵敏的Web应用程序。
Ajax是2005年2月才正式提出的一项综合技术，其主要特点是为Web开发提供异步的数据传输和交换方式，可以在不重载（Reload）刷新（Refresh）界面的情况下与服务器进行数据交换。
该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。
如果使用得当，这种强大的力量可以使应用程序更加自然和响应灵敏（无刷新更新局部页面），从而提升用户的浏览体验。
术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。
在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。
Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。
借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML（是利用CSS(层叠样式表),JavaScript,HTML等技术而建立的能与访问者产生互动的网页）立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。
当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。
最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。
能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。
Google Suggest、Google Maps所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。
ajax总结Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术，通过在后台与服务器进行异步数据交换，使得网页的内容可以实时更新，提升了用户体验。
在本文中，我将对Ajax进行总结并探讨其在Web开发中的应用和优势。
一、Ajax的原理和特点Ajax的核心原理是通过JavaScript异步请求数据，在不刷新整个页面的情况下，实时更新页面内容。
与传统的同步请求相比，Ajax能够大大提升用户体验，使得页面加载更为流畅。
Ajax的特点有以下几个方面:1. 异步通信：Ajax采用异步操作，不会阻塞页面的其他操作。
2. 数据交互：Ajax通过发送HTTP请求与服务器进行数据交互，可以获取数据、发送数据和更新数据。
3. 更新局部内容：与传统的页面刷新相比，Ajax只更新需要改变的部分，节省带宽并提升了页面加载速度。
二、Ajax的应用1. 表单验证：通过Ajax可以实时对用户输入的数据进行验证，例如检查用户名是否已被占用、密码是否符合规范等。
2. 动态加载内容：通过Ajax可以实现无缝加载内容，例如在社交网络中实时加载新的动态、加载评论等。
3. 自动补全：通过Ajax可以实现实时搜索建议和自动完成功能，提供更加智能的用户体验。
4. 异步提交表单：通过Ajax可以实现表单的异步提交，避免了页面的跳转，提升了用户体验。
5. 实时聊天：通过Ajax可以实现实时聊天功能，用户可以即时地发送和接收消息。
三、Ajax的优势1. 提升用户体验：Ajax能够实现页面的局部更新，使得用户只需要等待少量的数据交互，提升了用户体验。
2. 减少带宽消耗：通过Ajax只更新需要改变的部分，减少了无谓的数据传输，降低了带宽消耗。
3. 提高网站性能：Ajax可以减轻服务器的负担，提高了网站的性能，特别在同时有大量用户访问的情况下。
4. 增加交互性：Ajax使得网页可以在不刷新页面的情况下实时响应用户的操作，增加了交互性和动态性。
jsajax请求的五个步骤AJAX（Asynchronous JavaScript and XML）是一种使用JavaScript和XML来进行异步数据交互的技术。
它通过在不重新加载整个页面的情况下，动态地更新部分页面内容，提高用户体验和页面加载速度。
下面将详细介绍AJAX请求的五个步骤。
第一步：创建XMLHttpRequest对象在JavaScript中，可以使用XMLHttpRequest对象来发送AJAX请求。
该对象允许与服务器交互，并从服务器获取数据。
我们可以通过以下代码来创建XMLHttpRequest对象：```var xhr = new XMLHttpRequest(;```第二步：设置请求参数在发送AJAX请求之前，需要设置一些请求参数，例如请求类型、URL、是否异步、请求头、请求体等。
以下是设置请求参数的示例：```xhr.setRequestHeader('Content-Type', 'application/json');```第三步：设置回调函数在接收到服务器响应后，需要执行一些操作，例如更新页面内容、处理返回的数据等。
为此，我们需要设置一个回调函数，用于处理服务器响应。
通常有四个回调函数可用：- onreadystatechange：当请求状态发生变化时触发- onload：当请求成功完成时触发- onprogress：在接收服务器响应期间触发- onerror：在请求发生错误时触发以下是设置回调函数的示例：```xhr.onreadystatechange = functioif (xhr.readyState === 4 && xhr.status === 200)//执行操作}};```第四步：发送请求当所有准备工作都完成后，可以调用send方法来发送AJAX请求。
如果是GET请求，可以将参数放在URL中；如果是POST请求，需要将参数作为send方法的参数传递。
基于Ajax的应用程序架构汇总2005-08-15浏览器端框架被划分成两大类：·应用程序框架：提供浏览器的功能，但是常以包括窗口小部件抽象和另外的部件而出名，其功能主要围绕桌面GUI框架。
·基本结构框架：提供基本的管道和可移植的浏览器抽象，让开发者去创建内容。
典型的功能：* 针对XMLHttpRequest的包装器以封装浏览器-服务器的交互。
(所有的框架都提供这一功能)。
* XML操作和查询。
* 根据来自XMLHttpRequest的应答执行DOM操作。
* 在一些情况中，与另外的浏览器端技术如Flash(和潜在的Java applets)集成在一起。
而服务器端框架通常以下面两种方式工作(尽管它们在这里根据语言的不同进行了分类)：·HTML/JS生成：服务器提供完整的HTML/Javascript代码生成和浏览器-服务器协调，结果是只有浏览器端编码可以被定制。
·远程调用：Javascript调用直接被路由到服务器端功能(例如Java方法)并返回到Javascript回叫处理器；或者Javascript 调用服务器以提取信息，例如会话细节，数据库查询等。
·纯Javascript：应用程序框架1.1 Bindows(自从2003年)网址是：，Bindows是一个软件开发包(SDK)，它，通过强力联合DHTML，JavaScript，CSS和XML等技术，能生成高度交互的互联网应用程序-成为现代的桌面应用程序的强有力对手。
Bindows应用程序不要求下载和也不需要在用户端安装-仅要求有一个浏览器(也不需要Java，Flash或者ActiveX)。
Bindows有可能领导面向对象开发的AJAX 应用程序的平台。
·它是商业化的，使用来自于MB的技术(总部位于GA USA，主要开发中心在瑞典，成立于2002年)。
Bindows框架提供给你：·基于类的面向对象的API·一套完整的窗口系统，提供宽范围的窗口小部件支持，包括菜单、表单、格子、滑动条、量程，甚至更多·用于开发zero-footprint SOA客户端应用程序的领先的工具箱·本机的XML，SOAP和XML-RPC支持·单用户到企业级的支持·内建的对AJAX的支持Bindows开发环境：·支持企业级规模的工程开发·跨浏览器，跨平台支持·服务器独立结构·与新的和现有资源的互操作性·一致性开发方法学1.2 BackBase(自从2003年)网址是：，是一个全面的浏览器端框架，支持丰富的浏览器功能以及与.NET和Java的集成。
JSP Ajax 实现Web页面的局部动态更新
在浏览网页时，往往因为查看局部信息，而导致整个网页都需要从服务器端重新加载一次。
传统的Web实现方式中，实现类似的效果必须进行整个页面的刷新。
但是借助Ajax技术，可以实现对页面中局部区域的动态刷新，使得用户能够以更好的方式获得最新的数据信息。
本实例演示使用Ajax技术局部动态更新数据。
练习要点：
创建MySQL数据库，名称为test。
数据库中创建表person，表字段信息如表9 -2所示：
创建数据库连接类，打开记事本创建DB.java，代码如下：
现在建立客户端程序。
打开记事本，新建一个名为index5.jsp的页面，代码如
创建一个JSP页面来处理客户端发送的请求，该文件实现删除功能。
打开记事本，新建一个名为index5_server.jsp的文件，代码如下所示：
下面代码判断客户端请求参数，如果不为空，则执行删除操作。
然后从数据库中取出数据，以XML格式返回给客户端。
把本实例部署到Tomcat服务器上后，打开index5.jsp页面，如图9-7所示。
图9-7 局部刷新
单击【删除】，可以看到整个页面并未刷新，只是局部更新。
页面显示如图9-8
所示：
图9-8 删除操作。
在这篇文章中，我将详细介绍layui动态表格的ajax写法。
我们将从基本概念和实现方式开始，逐步深入探讨ajax在layui动态表格中的应用，以便你能更深入地理解这一主题。
1. layui动态表格简介layui是一款优秀的前端UI框架，它提供了丰富的组件和接口，其中就包括动态表格。
动态表格在实际项目开发中非常常见，它能够动态加载数据，实现分页、排序等功能，为用户提供良好的交互体验。
2. ajax的基本概念在介绍layui动态表格的ajax写法之前，我们先来简要了解一下ajax 的基本概念。
ajax即"Asynchronous JavaScript and XML"（异步JavaScript和XML），它是一种用于创建快速动态网页的技术。
通过ajax，网页可以在不重新加载整个页面的情况下，与服务器进行数据交互，并更新部分页面内容。
在实现动态表格的数据加载和交互过程中，ajax起到了关键的作用。
3. layui动态表格的ajax写法在layui中，动态表格的实现主要依赖于table模块。
通过table模块提供的接口，我们可以方便地实现动态表格的功能，包括数据加载、分页、排序等。
下面我将介绍一种常见的ajax写法，以实现动态表格的数据加载。
1) 我们需要引入layui的相关资源文件，包括css和js文件。
2) 在页面上创建一个table元素，用于显示动态表格的数据。
3) 接下来，我们可以通过ajax请求后端接口，获取需要显示的数据。
在ajax的success回调函数中，可以将数据渲染到动态表格中。
在使用ajax加载数据时，我们可以按照以下步骤进行操作：```javascripte('table', function(){var table = layui.table;//执行渲染table.render({elem: '#demo', //指定原始表格元素选择器（推荐id选择器）url: '/demo/table/user/', //数据接口method: 'get', //接口网络协议请求类型，默认：getpage: true, //开启分页limit: 10, //每页默认显示的数量limits: [10, 20, 30], //每页显示数量可选项cols: [[ //表头{field: 'id', title: 'ID', width: 80, sort: true},{field: 'username', title: '用户名', width: 80},{field: 'sex', title: '性别', width: 80, sort: true},{field: 'city', title: '城市', width: 80},{field: 'sign', title: '签名', width: 177},{field: 'experience', title: '积分', width: 80, sort: true},{field: 'score', title: '评分', width: 80, sort: true},{field: 'classify', title: '职业', width: 80},{field: 'wealth', title: '财富', width: 135, sort: true}]]});});```上面的示例中，我们使用了layui的table模块，通过url指定了数据接口，实现了对后端数据的获取和表格的渲染。
ajax调用java方法ajax调用java后台的方法,其实是通过url链接来访问。
下面是店铺为大家带来一篇ajax调用java方法，希望对大家有所帮助。
ajax调用java方法(一)public void doPost(HttpServletRequest req, HttpServletResponse resp) throwsServletException,java.io.IOException{//得到类名、方法名和参数String methodName=req.getParameter("methodName");String className=req.getParameter("className");Object[] objs=req.getParameterValues("params");Object targetObj;try {targetObj = Class.forName(className).newInstance();Object obj=MethodUtils.invokeMethod(targetObj, methodName, objs);this.dealResp(resp, obj);} catch (InstantiationException e) {e.printStackTrace();} catch (IllegalAccessException e) {e.printStackTrace();} catch (ClassNotFoundException e) {e.printStackTrace();} catch (NoSuchMethodException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}}private void dealResp(HttpServletResponse resp,Object obj) throws IOException{resp.setContentType("text/xml;charset=GBK");PrintWriter pw=resp.getWriter();pw.write(""+deal(obj)+"");pw.flush();pw.close();}private String deal(Object obj){String sbResult="";if(obj==null){sbResult="";}else if(obj instanceof ng.String){sbResult=dealString(obj);}else if(obj instanceof java.util.List){sbResult=dealList(obj);}else if(obj instanceof ng.Boolean){sbResult=dealBoolean(obj);}else if(obj instanceof ng.Double){sbResult=dealDouble(obj);}else if((obj instanceof ng.Integer) || (obj instanceof ng.Long)){sbResult=dealInteger(obj);}else if(obj instanceof ng.Throwable){sbResult=dealException(obj);}else if(obj instanceof java.util.Map){sbResult=dealMap(obj);}else if(obj instanceof java.util.Date){sbResult=dealDate(obj);}else if(obj instanceof java.util.Calendar){sbResult=dealDate(obj);}else if(obj instanceof org.w3c.dom.Document){sbResult=dealXml(obj);}else{sbResult=dealObject(obj);}return sbResult;}//处理Date或Calendar类型，返回值为yyyy-MM-dd-HH-mm-ss-SSS格式的字符串private String dealDate(Object obj){Calendar cal=null;if(obj instanceof Calendar){cal=(Calendar)obj;}else{cal=Calendar.getInstance();cal.setTime((Date)obj);}StringBuffer sb=new StringBuffer();sb.append("");sb.append(cal.get(Calendar.YEAR));sb.append("-");sb.append(cal.get(Calendar.MONTH));sb.append("-");sb.append(cal.get(Calendar.DAY_OF_MONTH));sb.append("-");sb.append(cal.get(Calendar.HOUR_OF_DAY));sb.append("-");sb.append(cal.get(Calendar.MINUTE));sb.append("-");sb.append(cal.get(Calendar.SECOND)); sb.append("-");sb.append(cal.get(LISECOND)); sb.append("");return sb.toString();}private String dealMap(Object obj){ StringBuffer sb=new StringBuffer();Map map=(Map)obj;sb.append("");Set entrys=map.entrySet();Iterator ite=entrys.iterator();Map.Entry entry=null;while(ite.hasNext()){entry=(Map.Entry)ite.next();sb.append("<");sb.append(entry.getKey());sb.append(">");sb.append(deal(entry.getValue()));sb.append(");sb.append(entry.getKey());sb.append(">");}sb.append("");return sb.toString();}ajax调用java方法(二)public class Test {public static String sayHello(String name){ return "hello, " + name;}}注意：必须是公开的静态方法。
1.$是什么2.阿贾克斯是什么，怎么创建和优点阿贾克斯是什么，怎么创建和优点1、AJAX 简介 AJAX(⾳译为：阿贾克斯) = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是指⼀种创建交互式⽹页应⽤的⽹页开发技术，也就是在⽆需重新加载整个⽹页的情况下，能够更新部分⽹页的技术。
AJAX 不是新的编程语⾔，⽽是⼀种使⽤现有标准的新⽅法，是⼀种⽤于创建快速动态⽹页的技术，通过在后台与服务器进⾏少量数据交换，AJAX 可以使⽹页实现异步更新。
这意味着可以在不重新加载整个⽹页的情况下，对⽹页的某部分进⾏更新，传统的⽹页（不使⽤ AJAX）如果需要更新内容或者⽤户注册信息、提交表单等，必需重新加载整个⽹页页⾯。
所以说 AJAX 是⼀种与服务器交换数据并更新部分⽹页的艺术，因此我们必须掌握 AJAX 这种技术。
AJAX 是基于现有的 Internet 标准，并且联合使⽤它们： ①、XMLHttpRequest 对象 (异步的与服务器交换数据) ②、JavaScript/DOM (信息显⽰/交互) ③、CSS (给数据定义样式) ④、XML (作为转换数据的格式) AJAX 的核⼼是 JavaScript 对象 XMLHttpRequest，他是⼀种⽀持异步请求的技术，也就是 XMLHttpRequest 赋予了我们可以使⽤ JS 向服务器提出请求并处理响应的能⼒，⽽不阻塞⽤户，通过这个对象，JS 可在不重载页⾯的情况下与 Web 服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使⽤异步数据传输（HTTP 请求），这样就可使⽹页从服务器请求少量的信息，⽽不是整个页⾯。
AJAX 是⼀种独⽴于 Web 服务器软件的浏览器技术，也就是 AJAX 应⽤程序独⽴于浏览器和平台！可⽤于创造动态性更强的应⽤程序 那么，简单说，AJAX 就是可以让 JS 去读取服务器上的数据，他的功能是可以在⽆需刷新页⾯的前提下，去服务器读取或者发送数据。
Ajax技术在Web开发中的应用随着互联网的快速发展，Web应用程序变得越来越复杂，需要更好的交互性、响应性和可用性。
Ajax（Asynchronous JavaScript and XML）技术的出现正好解决了这些问题。
本文将介绍Ajax技术在Web开发中的应用，并分为以下几个部分：1. Ajax技术简介Ajax技术是一种使用异步请求方式进行数据交互的技术，可以在不刷新页面的情况下更新Web页面。
它采用了JavaScript、XML或JSON等技术，可以使Web应用程序具有更好的用户体验和性能。
2. Ajax技术的优势使用Ajax技术可以显著提高Web应用程序的性能和响应速度，因为Ajax可以将数据传送到服务器并且不需要刷新整个页面。
它也可以降低Web服务器的负载，因为它只更新部分页面而不是整个页面。
此外，Ajax还可以使Web应用程序更加交互性，用户可以实时地完成数据交互。
3. Ajax技术的应用3.1 Ajax的登录验证在Web应用程序中，登录验证是不可或缺的。
使用Ajax技术可以使用户在不刷新页面的情况下完成登录验证，减少用户等待的时间。
当用户提交登录信息时，Ajax会向服务器发出异步请求，并根据服务器返回的结果在页面上显示验证结果。
3.2 Ajax的表单验证在Web表单中，Ajax可以用来实现实时的验证和错误提示。
当用户在表单中输入信息时，Ajax会向服务器发出异步请求以验证数据的正确性，并在表单下方显示验证结果。
3.3 Ajax的图片预加载在某些情况下，当用户打开Web页面时，页面需要加载大量图片，这会导致页面的加载速度变慢。
在这种情况下，可以使用Ajax技术实现图片预加载。
使用Ajax技术可以在Web页面在加载时异步加载图片，这样可以减少页面加载时间。
3.4 Ajax的异步文件上传文件上传通常需要刷新整个页面，而使用户等待。
使用Ajax 技术可以异步上传文件，使Web应用程序更具交互性。
ajax的使用方法Ajax的使用方法一、什么是AjaxAjax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。
它通过在后台与服务器进行数据交换，局部刷新页面，实现无需刷新整个页面的交互效果。
Ajax的核心技术是使用XMLHttpRequest对象与服务器进行异步通信。
二、Ajax的基本使用步骤1. 创建XMLHttpRequest对象在使用Ajax之前，首先需要创建一个XMLHttpRequest对象，用于与服务器进行通信。
可以通过以下代码创建XMLHttpRequest对象：```var xhr = new XMLHttpRequest();```2. 设置请求的参数在与服务器进行通信之前，需要设置请求的参数。
可以使用`xhr.open()`方法设置请求的方式、URL地址和是否异步等参数。
例如：```xhr.open('GET', '/api/data', true);```其中，第一个参数是请求方式（GET或POST），第二个参数是请求的URL地址，第三个参数表示是否异步。
3. 发送请求设置好请求的参数之后，可以通过`xhr.send()`方法发送请求。
例如：```xhr.send();```如果是POST方式的请求，可以在`send()`方法中传递要发送的数据。
4. 监听服务器的响应在发送请求之后，需要监听服务器的响应。
可以通过`xhr.onreadystatechange`事件来监听状态的改变，当状态码为4时表示请求已完成。
可以通过以下代码来监听响应：```xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 处理服务器的响应数据}}```其中，`xhr.readyState`表示当前请求的状态，`xhr.status`表示服务器的响应状态码。
面向Java 开发人员的Ajax: 构建动态的Java 应用程序Ajax 为更好的Web 应用程序铺平了道路级别: 中级Philip McCarthy , 软件开发顾问, 独立咨询顾问2005 年10 月20 日在Web 应用程序开发中，页面重载循环是最大的一个使用障碍，对于Java™ 开发人员来说也是一个严峻的挑战。
在这个系列中，作者Philip McCarthy 介绍了一种创建动态应用程序体验的开创性方式。
Ajax（异步JavaScript 和XML）是一种编程技术，它允许为基于Java 的Web 应用程序把Java 技术、XML 和JavaScript 组合起来，从而打破页面重载的范式。
Ajax（即异步JavaScript 和XML）是一种Web 应用程序开发的手段，它采用客户端脚本与Web 服务器交换数据。
所以，不必采用会中断交互的完整页面刷新，就可以动态地更新Web 页面。
使用Ajax，可以创建更加丰富、更加动态的Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。
Ajax 不是一项技术，而更像是一个模式——一种识别和描述有用的设计技术的方式。
Ajax 是新颖的，因为许多开发人员才刚刚开始知道它，但是所有实现Ajax 应用程序的组件都已经存在若干年了。
它目前受到重视是因为在2004 和2005 年出现了一些基于Ajax 技术的非常棒的动态Web UI，最著名的就是Google 的GMail 和Maps 应用程序，以及照片共享站点Flickr。
这些用户界面具有足够的开创性，有些开发人员称之为“Web 2.0”，因此对Ajax 应用程序的兴趣飞速上升。
在这个系列中，我将提供使用Ajax 开发应用程序需要的全部工具。
在第一篇文章中，我将解释Ajax 背后的概念，演示为基于Java 的Web 应用程序创建Ajax 界面的基本步骤。
我将使用代码示例演示让Ajax 应用程序如此动态的服务器端Java 代码和客户端JavaScript。
最后，我将指出Ajax 方式的一些不足，以及在创建Ajax 应用程序时应当考虑的一些更广的可用性和访问性问题。
更好的购物车可以用Ajax 增强传统的Web 应用程序，通过消除页面装入从而简化交互。
为了演示这一点，我采用一个简单的购物车示例，在向里面添加项目时，它会动态更新。
这项技术如果整合到在线商店，那么用户可以持续地浏览和向购物车中添加项目，而不必在每次点击之后都等候完整的页面更新。
虽然这篇文章中的有些代码特定于购物车示例，但是演示的技术可以应用于任何Ajax 应用程序。
清单1 显示了购物车示例使用的有关HTML 代码，整篇文章中都会使用这个HTML。
清单1. 购物车示例的有关片断Ajax 往返过程Ajax 交互开始于叫作XMLHttpRequest的JavaScript 对象。
顾名思义，它允许客户端脚本执行HTTP 请求，并解析XML 服务器响应。
Ajax 往返过程的第一步是创建XMLHttpRequest的实例。
在XMLHttpRequest对象上设置请求使用的HTTP 方法（GET或POST）以及目标URL。
现在，您还记得Ajax 的第一个a是代表异步（asynchronous）吗？在发送HTTP 请求时，不想让浏览器挂着等候服务器响应。
相反，您想让浏览器继续对用户与页面的交互进行响应，并在服务器响应到达时再进行处理。
为了实现这个要求，可以在XMLHttpRequest上注册一个回调函数，然后异步地分派XMLHttpRequest。
然后控制就会返回浏览器，当服务器响应到达时，会调用回调函数。
在Java Web 服务器上，请求同其他HttpServletRequest一样到达。
在解析了请求参数之后，servlet 调用必要的应用程序逻辑，把响应序列化成XML，并把XML 写入HttpServletResponse。
回到客户端时，现在调用注册在XMLHttpRequest上的回调函数，处理服务器返回的XML 文档。
最后，根据服务器返回的数据，用JavaScript 操纵页面的HTML DOM，把用户界面更新。
图1 是Ajax 往返过程的顺序图。
图 1. Ajax 往返过程现在您对Ajax 往返过程有了一个高层面的认识。
下面我将放大其中的每一步骤，进行更详细的观察。
如果过程中迷了路，请回头看图 1 ——由于Ajax 方式的异步性质，所以顺序并非十分简单。
分派XMLHttpRequest我将从Ajax 序列的起点开始：创建和分派来自浏览器的XMLHttpRequest。
不幸的是，不同的浏览器创建XMLHttpRequest的方法各不相同。
清单2 的JavaScript 函数消除了这些依赖于浏览器的技巧，它可以检测当前浏览器要使用的正确方式，并返回一个可以使用的XMLHttpRequest。
最好是把它当作辅助代码：只要把它拷贝到JavaScript 库，并在需要XMLHttpRequest的时候使用它就可以了。
清单 2. 创建跨浏览器的XMLHttpRequest/** Returns a new XMLHttpRequest object, or false if this browser * doesn't support it*/function newXMLHttpRequest() {var xmlreq = false;if (window.XMLHttpRequest) {// Create XMLHttpRequest object in non-Microsoft browsersxmlreq = new XMLHttpRequest();} else if (window.ActiveXObject) {// Create XMLHttpRequest via MS ActiveXtry {// Try to create XMLHttpRequest in later versions// of Internet Explorerxmlreq = new ActiveXObject("Msxml2.XMLHTTP");} catch (e1) {// Failed to create required ActiveXObjecttry {// Try version supported by older versions// of Internet Explorerxmlreq = new ActiveXObject("Microsoft.XMLHTTP");} catch (e2) {// Unable to create an XMLHttpRequest with ActiveX}}}return xmlreq;}稍后我将讨论处理那些不支持XMLHttpRequest的浏览器的技术。
目前，示例假设清单 2 的newXMLHttpRequest函数总能返回XMLHttpRequest实例。
返回示例的购物车场景，我想要当用户在目录项目上点击Add to Cart 时启动Ajax 交互。
名为addToCart()的onclick处理函数负责通过Ajax 调用来更新购物车的状态（请参阅清单1）。
正如清单3 所示，addToCart()需要做的第一件事是通过调用清单2 的newXMLHttpRequest()函数得到XMLHttpRequest对象。
接下来，它注册一个回调函数，用来接收服务器响应（我稍后再详细解释这一步；请参阅清单6）。
因为请求会修改服务器上的状态，所以我将用HTTP POST做这个工作。
通过POST发送数据要求三个步骤。
第一，需要打开与要通信的服务器资源的POST连接——在这个示例中，服务器资源是一个映射到URL cart.do的servlet。
然后，我在XMLHttpRequest 上设置一个头，指明请求的内容是表单编码的数据。
最后，我用表单编码的数据作为请求体发送请求。
清单3 把这些步骤放在了一起。
清单 3. 分派Add to Cart XMLHttpRequest这就是建立Ajax 往返过程的第一部分，即创建和分派来自客户机的HTTP 请求。
接下来是用来处理请求的Java servlet 代码。
servlet 请求处理用servlet 处理XMLHttpRequest，与处理普通的浏览器HTTP 请求一样。
可以用HttpServletRequest.getParameter()得到在POST 请求体中发送的表单编码数据。
Ajax 请求被放进与来自应用程序的常规Web 请求一样的HttpSession中。
对于示例购物车场景来说，这很有用，因为这让我可以把购物车状态封装在JavaBean 中，并在请求之间在会话中维持这个状态。
清单4 是处理Ajax 请求、更新购物车的简单servlet 的一部分。
Cart bean 是从用户会话中获得的，并根据请求参数更新它的状态。
然后Cart被序列化成XML，XML 又被写入ServletResponse。
重要的是把响应的内容类型设置为application/xml，否则XMLHttpRequest不会把响应内容解析成XML DOM。
清单 4. 处理Ajax 请求的servlet 代码清单5 显示了Cart.toXml()方法生成的示例XML。
它很简单。
请注意cart元素的generated属性，它是System.currentTimeMillis()生成的一个时间戳。
清单 5. Cart 对象的XML 序列化示例如果查看应用程序源代码（可以从下载一节得到）中的Cart.java，可以看到生成XML 的方式只是把字符串添加在一起。
虽然对这个示例来说足够了，但是对于从Java 代码生成XML 来说则是最差的方式。
我将在这个系列的下一期中介绍一些更好的方式。
现在您已经知道了CartServlet响应XMLHttpRequest的方式。
下一件事就是返回客户端，查看如何用XML 响应更新页面状态。
用JavaScript 进行响应处理XMLHttpRequest的readyState属性是一个数值，它指出请求生命周期的状态。
它从0（代表“未初始化”）变化到4（代表“完成”）。
每次readyState变化时，readystatechange事件就触发，由onreadystatechange属性指定的事件处理函数就被调用。
在清单3中已经看到了如何调用getReadyStateHandler()函数创建事件处理函数。
然后把这个事件处理函数分配给onreadystatechange属性。
