扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
我将从Ajax时序图的起点开始:从浏览器创建并发送一个XMLHttpRequest。不幸的是,在不同的浏览器中创建XMLHttpRequest的方法都不一样。列表2中示例的JavaScript函数消除了这些与浏览器种类相关的问题,正确检测与当前浏览器相关的方法,并返回一个可以使用的XMLHttpRequest。最好将它看成备用代码,将它简单拷贝到你的JavaScript库中,在需要一个XMLHttpRequest时使用它即可。
列表2:跨浏览器创建一个XMLHttpRequest
/*
* 返回一个新建的XMLHttpRequest对象,若浏览器不支持则失败
*/
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
// 在非Microsoft浏览器中创建XMLHttpRequest对象
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//通过MS ActiveX创建XMLHttpRequest
try {
// 尝试按新版InternetExplorer方法创建
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
// 创建请求的ActiveX对象失败
try {
// 尝试按老版InternetExplorer方法创建
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
// 不能通过ActiveX创建XMLHttpRequest
}
}
}
return xmlreq;
}
稍后,我将讨论如何对待不支持XMLHttpReauest的浏览器的一些技巧。现在,列表2中展示的示例函数将总是可以返回一个XMLHttpReauest实例。
回到购物车例子的场景中,只要用户针对某一个目录条目点击了Add to Cart按钮,我就要调用一个Ajax交互。名为addToCart()的onclick函数通过Ajax调用(如列表1中所示)来负责更新购物车的状态。在列表3中,addToCart()要做的第一件事就是通过调用newXMLHttpReauest函数(如列表2中所示)来获取一个XMLHttpRequest的实例,并且注册一个回调函数来接受服务器响应(我将在稍后详细解释,请参见列表6)。
因为,此请求将会修改服务器状态,我将使用一个HTTP POST来处理它。通过POST传送数据需要三个步骤:首先,我需要打开一个到进行通讯的服务器资源的POST连接—在现在例子中是一个URL映射为cart.do的服务器端servlet。下一步,设置XMLHttpRequest的头信息,以标志请求的内容为form-encoded。最后,将form-encoded数据作为请求体,并发送此请求。
列表3中集中展示了这些步骤。
列表3:发送一个添加到购物车XMLHttpRequest
/*
* 通过产品编码,在购物车中添加一个条目
* itemCode – 需要添加条目的产品编码
*/
function addToCart(itemCode) {
// 获取一个XMLHttpRequest实例
var req = newXMLHttpRequest();
// 设置用来从请求对象接收回调通知的句柄函数
var handlerFunction = getReadyStateHandler(req, updateCart);
req.onreadystatechange = handlerFunction;
// 打开一个联接到购物车servlet的HTTP POST联接
// 第三个参数表示请求是异步的
req.open("POST", "cart.do", true);
// 指示请求体包含form数据
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 发送标志需要添加到购物车中条目的form-encoded数据
req.send("action=add&item="+itemCode);
}
结合以上内容,你可以了解到Ajax处理过程的第一部分—就是在客户端创建并发送HTTP请求。下一步是用来处理请求的Java Servlet代码。
Servlet请求处理
通过一个servlet来处理XMLHttpRequest与处理一个来自浏览器的普通的HTTP请求基本上相似。可以通过调用HttpServletRequest.getParameter()来获取由POST请求体传送过来的form-encoded数据。Ajax请求也与普通的WEB请求样都成为此应用同一HttpSession会话进程的一部分。这对于购物车例子来说很有肜,因为我们可以通过会话将多个请求的状态都保存到同一个JavaBean购物车对象中,并可以序列化。
列表4是处理Ajax请求并更新购物车的简单servlet的代码片断。从用户会话中检索出一个Cart Bean,并按请求的参数更新它。之后Cart Bean被序列化到XML,并被写回ServletRespone。注意,一定要将响应内容的类型设置为application/xml,否则,XMLHttpRequest将不能将响应内容解析为一个XML DOM。
列表4:处理Ajax请求的Servlet代码
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws java.io.IOException {
Cart cart = getCartFromSession(req);
String action = req.getParameter("action");
String item = req.getParameter("item");
if ((action != null)&&(item != null)) {
// 在购物车中添加或移除一个条目
if ("add".equals(action)) {
cart.addItem(item);
} else if ("remove".equals(action)) {
cart.removeItems(item);
}
}
// 将购物车状态序列化到XML
String cartXml = cart.toXml();
// 将XML写入response.
res.setContentType("application/xml");
res.getWriter().write(cartXml);
}
列表5展示了由Cart.toXml()方法生成的XML。注意到生成的cart元素的属性,是一个通过System.currentTimeMillis()生成的时间戳。
列表5:Cart对象序列化得到的XML
<?xml version="1.0"?>
<cart generated="1123969988414" total="$171.95">
<item code="hat001">
<name>Hat</name>
<quantity>2</quantity>
</item>
<item code="cha001">
<name>Chair</name>
<quantity>1</quantity>
</item>
<item code="dog001">
<name>Dog</name>
<quantity>1</quantity>
</item>
</cart>
如果你观察一下下载站点提供的例子应用源码中的Cart.java,你将会看到它通过简单地追加字符串来生成XML。对于本例子来说,它已经足够了,我将会在本系统文章的以后一期中介绍一些更好的方法。
现在你知道了CartServlet如何响应一个XMLHttpRequest。下一步是返回到客户端,如何用服务器响应来更新页面状态。
如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。
现场直击|2021世界人工智能大会
直击5G创新地带,就在2021MWC上海
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
寻找自己的Flag
华为开发者大会2020(Cloud)- 科技行者