ajax购物车代码servlet的简单介绍

今天给各位分享ajax购物车代码servlet的知识，其中也会对进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、Ajax 请求servlet
• 2、AJax中的js中怎么接受servlet返回的参数？
• 3、ajax与servlet的数据传送问题,servlet如何向ajax传数据，ajax如何接收servlet传来的数据
• 4、java中servlet的购物车程序是怎么样的流程？
• 5、如何应用AJAX技术实现以下效果

Ajax 请求servlet

Ajax是时下比较流行的一种web界面设计新思路,其核心思想是从浏览器获取XMLHttp对象与服务器端进行交互. DWR（Direct Web Remoting）就是实现了这种Ajax技术的一种web框架. 最近做的项目中我也将它用上了,感觉很是方便,比如动态生成javascript代码,隐藏的http协议,java代码和javascript交互的是javascript的对象(或字符串). 下面是我整理的文档.

DWR主要由两部门组成。javascript与web服务器通信并更新web页；运行在web服务器的Servlet处理请求并把响应发回浏览器。

1 . 配置web.xml

servlet

servlet-namedwr-invoker/servlet-name

servlet-classuk.ltd.getahead.dwr.DWRServlet/servlet-class

/servlet

servlet-mapping

servlet-namedwr-invoker/servlet-name

url-pattern/dwr/*/url-pattern

/servlet-mapping

2 当我们想看dwr自动生成的测试页时,可在java代码

servlet中加

init-param

param-namedebug/param-name

param-valuetrue/param-value

/init-param

这个参数DWR默认是false.如果选择true.我们可以通过url ,你就可以看到你部署的每个DWR class。并且可以测试java代码的每个方法是否运行正常。为了安全考虑，在正式环境下你一定把这个参数设为false.

3 log信息配置

我喜欢用log4j输出日志,那么在log4j.properties下加，log4j.logger.uk.ltd.getahead.dwr = debug。这样可以看DWR的调试日志。

4 配置dwr.xml (和web.xml同目录)

create creator="new" javascript="JDate"

param name="class" value="java.util.Date"/

/create

这里的多数元素都是可选的 - 你真正必须知道的是指定一个creator和一个javascript名字。

creator属性 是必须的 - 它用来指定使用那种创造器。

默认情况下DWR1.1有8种创造器。它们是：

new: 用Java的new关键字创造对象。

none: 它不创建对象，看下面的原因。 (v1.1+)

scripted: 通过BSF使用脚本语言创建对象，例如BeanShell或Groovy。

spring: 通过Spring框架访问Bean。

jsf: 使用JSF的Bean。 (v1.1+)

struts: 使用Struts的FormBean。 (v1.1+)

pageflow: 访问Beehive或Weblogic的PageFlow。 (v1.1+)

javascript属性 用于指定浏览器中这个被创造出来的对象的名字。你不能使用Javascript的关键字。

scope属性 非常类似servlet规范中的scope。 它允许你指定这个bean在什么生命范围。选项有"application", "session", "request" 和"page"。这些值对于Servlet和JSP开发者来说应该相当熟悉了。

scope属性是可选的。默认是"page"。如果要使用"session"需要cookies。当前的DWR不支持ULR重写。

param元素 被用来指定创造器的其他参数，每种构造器各有不同。例如，"new"创造器需要知道要创建的对象类型是什么。每一个创造器的参数在各自的文档中能找到。请查看上面的链接。

include和exclude元素 允许创造器来限制类中方法的访问。一个创造器必须指定include列表或exclude列表之一。如果是include列表则暗示默认的访问策略是"拒绝"；如果是exclude列表则暗示默认的访问策略是"允许"。

5 dwr.jar下载后放lib下

源码浅析

dwr的设计很象webwork2的设计,隐藏http协议,扩展性，兼容性及强。

通过研究uk.ltd.getahead.dwr.DWRServlet这个servlet来研究下dwr到底是如何工作的。

servlet

servlet-namedwr-invoker/servlet-name

servlet-classuk.ltd.getahead.dwr.DWRServlet/servlet-class

/servlet

servlet-mapping

servlet-namedwr-invoker/servlet-name

url-pattern/dwr/*/url-pattern

/servlet-mapping

这样/dwr/*下的所有的请求都是由这个servlet来处理,到底生理了什么呢,我们还是以例子来说明吧.

1 web服务器启动，DWRServlet init()方法调用，init主要做了以下工作。

设置日志级别、实例化DWR用到的单例类（这些类在jvm中只有一个实例对象）、读去配置文件（包括dwr.jar包中的dwr.xml,WEB-INF/dwr.xml. config*.xml）。

2 请求处理

DWRServlet.doGet, doPost方法都调用processor.handle(req, resp)方法处理。Processor对象在init()方法中已经初始化了。

代码

public void handle(HttpServletRequest req, HttpServletResponse resp)

throws IOException

{

String pathinfo = req.getPathInfo();

if(pathinfo == null || pathinfo.length() == 0 || pathinfo.equals("/"))

{

resp.sendRedirect(req.getContextPath() + req.getServletPath() + '/' + "index.html");

} else

if(pathinfo != null pathinfo.equalsIgnoreCase("/index.html"))

{

doIndex(req, resp);

} else

if(pathinfo != null pathinfo.startsWith("/test/"))

{

doTest(req, resp);

} else

if(pathinfo != null pathinfo.equalsIgnoreCase("/engine.js"))

{

doFile(resp, "engine.js", "text/javascript");

} else

if(pathinfo != null pathinfo.equalsIgnoreCase("/util.js"))

{

doFile(resp, "util.js", "text/javascript");

} else

if(pathinfo != null pathinfo.equalsIgnoreCase("/deprecated.js"))

{

doFile(resp, "deprecated.js", "text/javascript");

} else

if(pathinfo != null pathinfo.startsWith("/interface/"))

{

doInterface(req, resp);

} else

if(pathinfo != null pathinfo.startsWith("/exec"))

{

doExec(req, resp);

} else

{

log.warn("Page not found. In debug/test mode try viewing /[WEB-APP]/dwr/");

resp.sendError(404);

}

}

dwr/*处理的请求也就这几种。

（1）dwr/index.html，dwr/test/这种只能在debug模式下使用，调试用。

dwr/engine.js，dwr/util.js，dwr/deprecated.js当这个请求到达，从dwr.jar包中读取文件流，响应回去。（重复请求有缓存）

（2）当dwr/interface/这种请求到来，（例如我们在index.html中的 script type='text/javascript' src='dwr/interface/JDate.js'/script）DWR做一件伟大的事。把我们在WEB-INF/dwr.xml中的

create creator="new" javascript="JDate"

param name="class" value="java.util.Date"/

/create

java.util.Date转化为javascript函数。

看看吧。

细节也比较简单，通过java反射，把方法都写成javascript特定的方法。（我觉得这些转换可以放到缓存里，下次调用没必要再生成一遍，不知道作者为什么没这样做）。

（3）dwr/exec

javascript调用方法时发送这种请求，可能是XMLHttpRequest或IFrame发送。

当然，javascript调用的方法签名与java代码一致，包括参数，还有javascript的回调方法也传到了服务器端，在服务器端很容易实现。回调方法的java的执行结果 返回类似 scriptcallMethod(结果)script的javascript字符串,在浏览器执行。哈，一切就这么简单，巧妙。

AJax中的js中怎么接受servlet返回的参数？

$.ajax({

type: "POST",

url: "some.php",

data: "name=Johnlocation=Boston",

success: function(msg){

alert( "Data Saved: " + msg );

}

});

其中 success: function(msg) 的 msg 就是servlet 传回的值

ajax与servlet的数据传送问题,servlet如何向ajax传数据，ajax如何接收servlet传来的数据

你这个java代码我就不改了，改一下你的前端代码，原生ajax代码很繁杂，jquery就简单多了，我写完了你就能看懂

//首先引入js，本地文件获取cdn都行，我用cdn

script src=""/script

div id="div1"/div

input type="button" onclick="change();" value="按钮"/

function onchange(){

            $.ajax({

                url:"JDBC",

                type:"get",

                success:function(msg){

                    //msg就是你得到的后台返回值

                    $("#div1").text(msg);

                }

            });

        }

java中servlet的购物车程序是怎么样的流程？

购买过程就是选择好物品放入购物车然后结账

import java.util.Vector;public class gouwuche { /**

* @param args

*/

private static Vector vec = new Vector();

public static void gw(String name,int price,int sum)

{

gouwuchebean bean;

if(vec.size()0)

{

//说明购物车内有物品 进来比对 看是否有一样的东西 有的话让数量+sum

bean = new gouwuchebean();

int j=0;//用来计数

for(int i=0;ivec.size();i++)

{

gouwuchebean bean1 = (gouwuchebean)vec.get(i);

if(bean1.getName().equals(name))

{

j++;

bean.setName(name);

bean.setPrice(price);

bean.setSum(sum+bean1.getSum());

vec.remove(i);//去掉原来的数据

vec.add(bean);//放入新的数据

}

}

if(j==0)

{

bean.setName(name);

bean.setPrice(price);

bean.setSum(sum);

vec.add(bean);

}

}

else

{

//如果集合是空的说明购物车内没有重复的 直接放入即可

bean = new gouwuchebean();

bean.setName(name);

bean.setPrice(price);

bean.setSum(sum);

vec.add(bean);

}

}

public static void show()

{

System.out.println("=============购物车当前物品==============");

int sum = 0;//用来计一共有几件物品

int pric = 0;//用来计共消费金额

for(int i=0;ivec.size();i++)

{

gouwuchebean bean = (gouwuchebean)vec.get(i);

sum = sum+bean.getSum();

pric = pric+(bean.getPrice()*bean.getSum());

System.out.println("*第"+(i+1)+"种物品-----名称："+bean.getName()+"---数量是："+bean.getSum()+"---单价是："+bean.getPrice()+"元----共计"+(bean.getSum()*bean.getPrice()+"元"));

}

System.out.println("物品共计"+sum+"件 共计金额是："+pric+"元");

System.out.println("=============欢迎使用购物车==============");

}

public static void main(String[] args) {

// TODO Auto-generated method stub gw("电视机",100,1);//选择购买物品 价格和数量还有名字

gw("可口可乐",100,9);

gw("电视机",100,9);

gw("西瓜",10,5);

gw("电动车",3000,2);

gw("奥迪A6",4000000,2);

show();

}}测试结果

如何应用AJAX技术实现以下效果

作为J2EE开发人员，我们似乎经常关注“后端机制（backend mechanics）”。我们通常会忘记，J2EE的主要成功之处在Web应用程序方面；许多原因使得人们喜欢利用Web开发应用程序，但主要还是因为其易于部署的特点允许站点以尽可能低的成本拥有上百万的用户。遗憾的是，在过去几年中，我们在后端投入了太多的时间，而在使我们的Web用户界面对用户自然和响应灵敏方面却投入不足。

本文介绍一种方法，Ajax，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。本文也演示了启用这种方法是多么简单：利用一个Ajax框架（指DWR）构造一个应用程序，它直接从浏览器与后端服务进行通信。如果使用得当，这种强大的力量可以使应用程序更加自然和响应灵敏，从而提升用户的浏览体验。

该应用程序中所使用的示例代码已打包为单独的WAR文件，可供下载。

简介

术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。

虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。

通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会听到这样的话，“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明，这些理由再也站不住脚了：

BackPack

Google Suggest

Google Maps

PalmSphere

所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之，在涉及到用户界面的响应灵敏度时，基准设得更高了。

定义Ajax

Adaptive Path公司的Jesse James Garrett这样定义Ajax：

Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：

基于XHTML和CSS标准的表示；

使用Document Object Model进行动态显示和交互；

使用XMLHttpRequest与服务器进行异步通信；

使用JavaScript绑定一切。

这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript + XML的简写”。

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：

动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。

提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。

消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。

直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。

Ajax可用于那些场景？——一个例子：MSN Money页面

前几天，在浏览MSN Money页面的时候，有一篇关于房地产投资的文章引起了我的好奇心。我决定使用站点的“Rate this article”（评价本文）功能，鼓励其他的用户花一点时间来阅读这篇文章。在我单击vote按钮并等待了一会儿之后，整个页面被刷新，在原来投票问题所在的地方出现了一个漂亮的感谢画面。

而Ajax能够使用户的体验更加愉快，它可以提供响应更加灵敏的UI，并消除页面刷新所带来的闪烁。目前，由于要刷新整个页面，需要传送大量的数据，因为必须重新发送整个页面。如果使用Ajax，服务器可以返回一个包含了感谢信息的500字节的消息，而不是发送26,813字节的消息来刷新整个页面。即使使用的是高速Internet，传送26K和1/2K的差别也非常大。同样重要的是，只需要刷新与投票相关的一小节，而不是刷新整个屏幕。

让我们利用Ajax实现自己的基本投票系统。

原始的Ajax：直接使用XmlHttpRequest

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

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

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

function castVote(rank) {

var url = "/ajax-demo/static-article-ranking.html";

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 (window.XMLHttpRequest) {

req = new XMLHttpRequest();

req.onreadystatechange = callback;

req.open("GET", url, true);

req.send(null);

} // branch for IE/Windows ActiveX version

else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

if (req) {

req.onreadystatechange = callback;

req.open("GET", url, true);

req.send();

}

}

}

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

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

req.onreadystatechange = callback;

req.open("GET", url, true);

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

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

function processAjaxResponse() {

// only if req shows "loaded"

if (req.readyState == 4) {

// only if "OK"

if (req.status == 200) {

502 502'votes').innerHTML = req.responseText;

} else {

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

" +

req.statusText);

}

}

}

该代码相当简洁，并且使用了几个幻数，这使得难以一下子看出发生了什么。为了弄清楚这一点，下面的表格（引用自）列举了常用的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容器中——无需进行配置。部署完毕之后，就可以导航到来运行程序。

可以查看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 com.tearesolutions.service;

public interface AjaxSampleSvc {

Article castVote(int rank);

}

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

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

?xml version="1.0" encoding="UTF-8"?

!DOCTYPE dwr PUBLIC

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

""

dwr

allow

create creator="spring" javascript="ajaxSampleSvc"

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

/create

convert converter="bean" match="com.tearesolutions.model.Article"/

exclude method="toString"/

exclude method="setArticleDao"/

/allow

/dwr

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

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

?xml version="1.0" encoding="UTF-8"?

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

Web Application 2.3//EN" ""

web-app

display-nameAjax Examples/display-name

listener

listener-class

org.springframework.web.context.ContextLoaderListener

/listener-class

/listener

servlet

servlet-nameajax_sample/servlet-name

servlet-classcom.tearesolutions.web.AjaxSampleServlet/servlet-class

load-on-startup1/load-on-startup

/servlet

servlet

servlet-namedwr-invoker/servlet-name

display-nameDWR Servlet/display-name

descriptionDirect Web Remoter Servlet/description

servlet-classuk.ltd.getahead.dwr.DWRServlet/servlet-class

init-param

param-namedebug/param-name

param-valuetrue/param-value

/init-param

/servlet

servlet-mapping

servlet-nameajax_sample/servlet-name

url-pattern/ajax_sample/url-pattern

/servlet-mapping

servlet-mapping

servlet-namedwr-invoker/servlet-name

url-pattern/dwr/*/url-pattern

/servlet-mapping

/web-app

做完这些之后，可以加载，看看哪些服务可用。结果如下：

图3. 可用的服务

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

script type='text/javascript'

src='/ajax-demo/dwr/interface/ajaxSampleSvc.js'/script

script type='text/javascript'

src='/ajax-demo/dwr/engine.js'/script

ajaxSampleSvc.js是动态生成的：

function ajaxSampleSvc() { }

ajaxSampleSvc.castVote = function(callback, p0)

{

DWREngine._execute(callback, '/ajax-demo/dwr',

'ajaxSampleSvc', 'castVote', p0);

}

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

function castVote(rank) {

ajaxSampleSvc.castVote(processResponse, rank);

}

function processResponse(data) {

var voteText = "Thanks for Voting!"

+ "Current ranking: " + data.voteAverage

+ " out of 5"

+ "Number of votes placed: "

+ data.numberOfVotes + "";

502 502'votes').innerHTML = voteText;

}

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

下一步工作

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

Ajax最佳实践

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

管理跨请求的状态

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

调试技巧

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

结束语

本文介绍了Ajax方法，并展示了如何使用它来创建一个动态且响应灵敏的Web应用程序。通过使用DWR框架，可以轻松地把Ajax融合到站点中，而无需担心所有必须执行的实际管道工作。

特别感谢Getahead IT咨询公司的Joe Walker和他的团队开发出DWR这样神奇的工具。感谢你们与世界共享它！

下载

本文中演示的应用程序源代码可供下载：ajax-demo.war（1.52 MB）。

参考资料

——Getahead IT咨询公司。

Jesse James Garrett所撰写的“Ajax: A New Approach to Web Applications”（Adaptive Path，2005年二月）。

“Dynamic HTML and XML: The XMLHttpRequest Object”（Apple Developer Connection）。

原文出处

An Introduction To Ajax

分记的给我哦，呵呵~

关于ajax购物车代码servlet和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。