ajax怎样从服务器端返回xml呢？

原始的Ajax：直接使用XmlHttpRequest

如上所述，Ajax的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识：http://tearesolutionscom/ajax-demo/raw-ajaxhtml。注：如果您已经在本地WebLogic容器中安装了ajax-demowar，可以导航到http://localhost:7001/ajax-demo/raw-ajaxhtml，

浏览应用程序，参与投票，并亲眼看它如何运转。熟悉了该应用程序之后，继续阅读，进一步了解其工作原理细节。

首先，您拥有一些简单的定位点标记，它连接到一个JavaScriptcastVote(rank)函数。

function castVote(rank) {

var url = "/ajax-demo/static-article-rankinghtml";

var callback = processAjaxResponse;

executeXhr(callback, url);

}

该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr，提供一个回调JavaScript函数，一旦服务器响应可用，该函数就被执行。由于我希望它运行在一个简单的Apache环境中，“cast vote URL”只是一个简单的HTML页面。在实际情况中，被调用的URL将记录票数并动态地呈现包含投票总数的响应。

下一步是发出一个XmlHttpRequest请求：

function executeXhr(callback, url) {

// branch for native XMLHttpRequest object

if (windowXMLHttpRequest) {

req = new XMLHttpRequest();

reqonreadystatechange = callback;

reqopen("GET", url, true);

reqsend(null);

} // branch for IE/Windows ActiveX version

else if (windowActiveXObject) {

req = new ActiveXObject("MicrosoftXMLHTTP");

if (req) {

reqonreadystatechange = callback;

reqopen("GET", url, true);

reqsend();

}

}

}

如您所见，执行一个XmlHttpRequest并不简单，但非常直观。和平常一样，在JavaScript领域，大部分的工作量都花在确保浏览器兼容方面。在这种情况下，首先要确定XmlHttpRequest是否可用。如果不能用，很可能要使用Internet Explorer，这样就要使用所提供的ActiveX实现。

executeXhr()方法中最关键的部分是这两行：

reqonreadystatechange = callback;

reqopen("GET", url, true);

第一行定义了JavaScript回调函数，您希望一旦响应就绪它就自动执行，而reqopen()方法中所指定的“true”标志说明您想要异步执行该请求。

一旦服务器处理完XmlHttpRequest并返回给浏览器，使用reqonreadystatechange指派所设置的回调方法将被自动调用。

function processAjaxResponse() {

// only if req shows "loaded"

if (reqreadyState == 4) {

// only if "OK"

if (reqstatus == 200) {

502 502'votes')innerHTML = reqresponseText;

} else {

alert("There was a problem retrieving the XML data:

" +

reqstatusText);

}

}

}

该代码相当简洁，并且使用了几个幻数，这使得难以一下子看出发生了什么。为了弄清楚这一点，下面的表格（引用自http://developerapplecom/internet/webcontent/xmlhttpreqhtml）列举了常用的XmlHttpRequest对象属性。

属性

描述

onreadystatechange

每次状态改变所触发事件的事件处理程序

readyState

对象状态值：

0 = 未初始化（uninitialized）

1 = 正在加载（loading）

2 = 加载完毕（loaded）

3 = 交互（interactive）

4 = 完成（complete）

responseText

从服务器进程返回的数据的字符串形式

responseXML

从服务器进程返回的DOM兼容的文档数据对象

status

从服务器返回的数字代码，比如404（未找到）或200（就绪）

statusText

伴随状态码的字符串信息

现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成（readyStatus == 4），然后根据服务器的设定询问请求状态。如果一切正常（status == 200）,就使用innerHTML属性重写DOM的“votes”节点的内容。

既然您亲眼看到了XmlHttpRequest对象是如何工作的，就让我们利用一个旨在简化JavaScript与Java应用程序之间的异步通信的框架来对具体的细节进行抽象。

Ajax: DWR方式

按照与文章评价系统相同的流程，我们将使用Direct Web Remoting（DWR）框架实现同样的功能。

假定文章和投票结果存储在一个数据库中，使用某种对象/关系映射技术来完成抽取工作。为了部署起来尽可能地简单，我们不会使用数据库进行持久性存储。此外，为使应用程序尽可能通用，也不使用Web框架。相反，应用程序将从一个静态HTML文件开始，可以认为它由服务器动态地呈现。除了这些简化措施，应用程序还应该使用Spring Framework关联一切，以便轻松看出如何在一个“真实的”应用程序中使用DWR。

现在应该下载示例应用程序并熟悉它。该应用程序被压缩为标准的WAR文件，因此您可以把它放置到任何一个Web容器中——无需进行配置。部署完毕之后，就可以导航到http://localhost:7001/ajax_demo/dwr-ajaxhtml来运行程序。

可以查看HTML 源代码，了解它如何工作。给人印象最深的是，代码如此简单——所有与服务器的交互都隐藏在JavaScript对象ajaxSampleSvc的后面。更加令人惊讶的是，ajaxSampleSvc服务不是由手工编写而是完全自动生成的！让我们继续，看看这是如何做到的。

引入DWR

如同在“原始的Ajax”一节所演示的那样，直接使用XmlHttpRequest创建异步请求非常麻烦。不仅JavaScript代码冗长，而且必须考虑服务器端为定位Ajax请求到适当的服务所需做的工作，并将结果封送到浏览器。

设计DWR的目的是要处理将Web页面安装到后端服务上所需的所有信息管道。它是一个Java框架，可以很轻松地将它插入到Web应用程序中，以便JavaScript代码可以调用服务器上的服务。它甚至直接与Spring Framework集成，从而允许用户直接向Web客户机公开bean。

DWR真正的巧妙之处是，在用户配置了要向客户机公开的服务之后，它使用反射来生成JavaScript对象，以便Web页面能够使用这些对象来访问该服务。然后Web页面只需接合到生成的JavaScript对象，就像它们是直接使用服务一样；DWR无缝地处理所有有关Ajax和请求定位的琐碎细节。

让我们仔细分析一下示例代码，弄清它是如何工作的。

应用程序细节：DWR分析

关于应用程序，首先要注意的是，它是一个标准的Java应用程序，使用分层架构（Layered Architecture）设计模式。使用DWR通过JavaScript公开一些服务并不影响您的设计。

下面是一个简单的Java服务，我们将使用DWR框架直接将其向JavaScript代码公开：

package comtearesolutionsservice;

public interface AjaxSampleSvc {

Article castVote(int rank);

}

这是一个被简化到几乎不可能的程度的例子，其中只有一篇文章可以投票。该服务由Spring管理，它使用的bean名是ajaxSampleSvc，它的持久性需求则依赖于ArticleDao。详情请参见applicationContextxml。

为了把该服务公开为JavaScript对象，需要配置DWR，添加dwrxml文件到WEB-INF目录下：

<xml version="10" encoding="UTF-8">

<!DOCTYPE dwr PUBLIC

"-//GetAhead Limited//DTD Direct Web Remoting 04//EN"

"http://wwwgetaheadltduk/dwr/dwrdtd">

<dwr>

<allow>

<create creator="spring" javascript="ajaxSampleSvc">

<param name="beanName" value="ajaxSampleSvc" />

</create>

<convert converter="bean" match="comtearesolutionsmodelArticle"/>

<exclude method="toString"/>

<exclude method="setArticleDao"/>

</allow>

</dwr>

dwrxml文件告诉DWR哪些服务是要直接向JavaScript代码公开的。注意，已经要求公开Spring bean ajaxSampleSvc。DWR将自动找到由应用程序设置的SpringApplicationContext。为此，必须使用标准的servlet 过滤器ContextLoaderListener来初始化Spring ApplicationContext。

DWR被设置为一个servlet，所以把它的定义添加到webxml：

<xml version="10" encoding="UTF-8">

<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc//DTD

Web Application 23//EN" "http://javasuncom/dtd/web-app_2_3dtd">

<web-app>

<display-name>Ajax Examples</display-name>

<listener>

<listener-class>

orgspringframeworkwebcontextContextLoaderListener

</listener-class>

</listener>

<servlet>

<servlet-name>ajax_sample</servlet-name>

<servlet-class>comtearesolutionswebAjaxSampleServlet</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet>

<servlet-name>dwr-invoker</servlet-name>

<display-name>DWR Servlet</display-name>

<description>Direct Web Remoter Servlet</description>

<servlet-class>ukltdgetaheaddwrDWRServlet</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

<servlet-mapping>

<servlet-name>ajax_sample</servlet-name>

<url-pattern>/ajax_sample</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>dwr-invoker</servlet-name>

<url-pattern>/dwr/</url-pattern>

</servlet-mapping>

</web-app>

做完这些之后，可以加载http://localhost:7001/ajax-demo/dwr，看看哪些服务可用。结果如下：

图3 可用的服务

单击ajaxSampleSvc链接，查看有关如何在HTML页面内直接使用服务的示例实现。其中包含的两个JavaScript文件完成了大部分的功能：

<script type='text/javascript'

src='/ajax-demo/dwr/interface/ajaxSampleSvcjs'></script>

<script type='text/javascript'

src='/ajax-demo/dwr/enginejs'></script>

ajaxSampleSvcjs是动态生成的：

function ajaxSampleSvc() { }

ajaxSampleSvccastVote = function(callback, p0)

{

DWREngine_execute(callback, '/ajax-demo/dwr',

'ajaxSampleSvc', 'castVote', p0);

}

现在可以使用JavaScript对象ajaxSampleSvc替换所有的XmlHttpRequest代码，从而重构raw-ajaxhtml文件。可以在dwr-ajaxhtml文件中看到改动的结果；下面是新的JavaScript函数：

function castVote(rank) {

ajaxSampleSvccastVote(processResponse, rank);

}

function processResponse(data) {

var voteText = "

Thanks for Voting!

"

+ "

Current ranking: " + datavoteAverage + " out of 5

"

+ "

Number of votes placed: " + datanumberOfVotes + "

";

502 502'votes')innerHTML = voteText;

}

惊人地简单，不是吗？由ajaxSampleSvc对象返回的Article域对象序列化为一个JavaScript对象，允许在它上面调用诸如numberOfVotes()和voteAverage()之类的方法。在动态生成并插入到DIV元素“votes”中的HTML代码内使用这些数据。

下一步工作

在后续文章中，我将继续有关Ajax的话题，涉及下面这些方面：

Ajax最佳实践

像许多技术一样，Ajax是一把双刃剑。对于一些用例，其应用程序其实没有必要使用Ajax，使用了反而有损可用性。我将介绍一些不适合使用的模式，突出说明Ajax的一些消极方面，并展示一些有助于缓和这些消极方面的机制。例如，对Netflix**浏览器来说，Ajax是合适的解决方案吗？或者，如何提示用户确实出了一些问题，而再次单击按钮也无济于事？

管理跨请求的状态

在使用Ajax时，最初的文档DOM会发生一些变化，并且有大量的页面状态信息存储在客户端变量中。当用户跟踪一个链接到应用程序中的另一个页面时，状态就丢失了。当用户按照惯例单击Back按钮时，呈现给他们的是缓存中的初始页面。这会使用户感到非常迷惑！

调试技巧

使用JavaScript在客户端执行更多的工作时，如果事情不按预期方式进行，就需要一些调试工具来帮助弄清出现了什么问题。

参看：http://dev2devbeacomcn/techdoc/2005110103html

ajax是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊的对象

(XMLHttpRequest对象，一般称之为ajax对象)异步地（当ajax对象发请求时，浏览

器不会销毁当前页面，用户任然可以对当前页面做其他操作）向服务器发送请求，

服务器送回部分数据（并不是一个完整的页面），利用这些数据更新当前页面。整

个过程，页面无刷新，不打断用户的操作

编程步骤：

step1，获得ajax对象

比如：

var xhr=getXhr();

step2，发请求:

方式一：get请求

xhropen('get','check_usernamedousername=zs',true);

请求参数、请求资源路径、是否异步

注意：

a，get请求必须将请求参数添加到请求资源路径的后面。

b，true表示异步请求、false表示同步请求。

异步请求：发请求时，浏览器不会销毁当前页面，用户可以对当前页面做

其他操作。

同步请求：发送请求时，浏览器不会销毁当前页面，用户不可以对当前页面

做其他操作。

xhronreadystatechange=f1;

xhrsend(null);

方式二：post请求

xhropen('post','','')

step3，编写服务器端的处理程序，一般服务器只需要返回部分的数据。

step4，编写事件处理函数。

function f1(){

if(xhrreadyState==4){

var txt=xhrresponseText;

使用txt更新当前页面

}

}

java服务器端处理ajax发送的请求，和处理其他请求是一样的，只是在客户端页面表现的不同，比如：执行页面发送删除请求，服务器端在执行删除后，页面是需要刷新的。

ajax最经典的用法是验证码，注册页面如果因为验证码输入错误要刷新，之前的信息重填，估计用户会崩溃，采用ajax异步发送请求，就不会影响之前填写的信息

1：可以直接返回拼接好的片段直接放到指定位置下面 例如：contextResponseWrite("<div>内容<div>");

2:：返回json数据 例如://显示详情

public JsonResult ShowDetail() {

var id = ConvertToInt32(Request["id"]ToString());

UserInfo u = dbUserInfoSingle(ui=>uiid== id);

return Json(u,JsonRequestBehaviorAllowGet);

}

3:直接放回判断结果 contextResponseWrite("yes");

服务端读取出来以后，输出就可以了。可以以HTML的格式输出。也可以以JSON 或者XML的格式输出。这个就看你个人的喜好了。

xmlhttp读取到后台返回的值以后，再进行分析，html格式的，就直接用innerHTML加载。JSON或者XML就以DOM的形式加载进去。

ASP：<% Responsewrite MyStr %>

PHP：<php

echo $MyStr

>

ASPnet :同ASP。

JSP ：<%outprintln(MyStr)%>

Ajax并不算是一种新的技术，全称是asychronous javascript and

xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持

使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果

基本步骤：

var xhr =null;//创建对象 if(windowXMLHttpRequest){ xhr = new XMLHttpRequest();}else{ xhr = new ActiveXObject("MicrosoftXMLHTTP");} xhropen(“方式”,”地址”,”标志位”);//初始化请求 xhrsetRequestHeader(“”,””);//设置http头信息 xhronreadystatechange =function(){}//指定回调函数 xhrsend();//发送请求

js框架（jQuery/EXTJS等）提供的ajax API对原生的ajax进行了封装，熟悉了基础理论，再学习别的框架就会得心应手，好多都是换汤不换药的内容 。

by三人行慕课