`

ajax简易教程2(转载)

阅读更多
Servlet请求处理
*
* 通过产品编码,在购物车中添加一个条目
* 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);
}

 

      通过一个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。下一步是返回到客户端,如何用服务器响应来更新页面状态。

     通过JavaScript来处理服务器响应

      XMLHttpRequest的readyState属性是一个给出请求生命周期状态的数字值。它从表示“未初始化”的0变化到表示“完成”的4。每次readyState改变时,都会引发readystatechange事件,通过onreadystatechange属性配置回调处理函数将会被调用。

      在列表3中,你已看到通过调用函数getReadyStateHandler()创建了一个处理函数,并被配置给onreadystatechange属性。getReadyStateHandler()使用了这样的事实:函数是JavaScript中的主要对象。这意味着,函数可以作为参数被传递到其它函数,并且可以创建并返回其它函数。getReadystateHandler()要做是就是返回一个函数,来检查XMLHttpRequet是否已经完成处理,并传递XML服务器响应到由调用者指定的处理函数。列表6是getReadyStateHandler()的代码。

     

 

分享到:
评论

相关推荐

    AJAX简易教程及实例

    **AJAX简易教程及实例详解** AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验。...

    Ajax简易在线聊天室

    **Ajax简易在线聊天室** Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这个"Ajax简易在线聊天室"项目是一个很好的学习实例,它将帮助我们深入理解...

    ajax 基础教程源代码

    ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...

    ajax视频教程

    在本“Ajax视频教程”中,你将学习如何有效地使用Ajax提升用户体验,实现网页的无刷新更新。 首先,了解Ajax的工作原理至关重要。它通过创建XMLHttpRequest对象(通常简称为XHR)来实现与服务器的通信。当用户触发...

    AJAX 简易学习教程

    AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页技术。它的核心在于XMLHttpRequest对象,这个对象被所有现代浏览器支持,包括IE5和IE6(在旧版本中通过ActiveXObject...

    Ajax简易聊天室,ASP+Ajax简易聊天室

    Ajax简易聊天室,运行于ASP环境,用Access存储聊天记录,本程序纯属为了学习,请不要当成功能强大的聊天室来用,呵呵,只是想研究一下Ajax练手的,实现了聊天室的基本雏形,可以无刷新发送消息,数据库定时更新,...

    ajax 基础教程

    ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax ...

    ajax教程

    **Ajax 教程** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新,提高了用户体验,尤其是在数据...

    完全手册:ASP.net.Ajax电子教程

    **ASP.NET AJAX 全面解析** ASP.NET AJAX(Asynchronous JavaScript and XML)是微软为.NET Framework提供的一种技术,...通过深入学习《完全手册:ASP.NET AJAX电子教程》,你可以掌握这一技术,提升Web开发能力。

    Ajax简易学习教程

    课件,学习用 课件,学习用 课件,学习用 课件,学习用课件,学习用

    ajax视频教程1

    本视频教程将深入讲解Ajax的核心概念、工作原理以及实际应用,旨在帮助学习者掌握这一强大的Web开发工具。** ### 1. Ajax核心概念 Ajax的核心在于创建XMLHttpRequest对象,它是JavaScript的一个内置对象,用于在...

    ajax基础教程2

    ajax基础教程2 中文的 需要 下载四个文件再解压 (由于该资料有三十几m )(也就是还需要下载其它三个文件) Ajax基础教程1 Ajax基础教程2 Ajax基础教程3 Ajax基础教程4

    Ajax简易博客网站

    **Ajax简易博客网站** 在网页开发中,Ajax(Asynchronous JavaScript and XML)技术是一种用于创建快速、动态网页的重要方法。它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容,提升了...

    ajax中文简易教程

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这个技术由jQuery、Prototype等库广泛采用,使得Web应用能够更快速地响应用户交互,提升用户体验。Ajax的...

    Jquery Ajax简易计算器

    **jQuery AJAX简易计算器** 在Web开发中,动态交互是提升用户体验的重要手段,而jQuery的AJAX功能正是实现这种交互的核心技术。本项目“jQuery AJAX简易计算器”旨在展示如何利用jQuery库与服务器端进行异步数据...

    Ajax基础教程(扫描版)

    原书名:Foundations of Ajax 原出版社: Apress 作者: (美)Ryan Asleson,Nathaniel T.Schutta 译者: 金灵 等 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:7115144818 上架时间:2006-2-14 ...

    韩顺平 ajax视频教程 百度云

    根据提供的文件信息,我们可以推断出本教程主要围绕“韩顺平老师的Ajax视频教程”进行讲解。接下来将从Ajax的基本概念、应用场景、韩顺平老师的教程特点等方面进行详细阐述。 ### Ajax基本概念 Ajax(Asynchronous...

    四天学会ajax_ajax教程.pdf

    2. **JavaScript**:JavaScript是Ajax的核心,它负责处理用户交互、数据验证、与服务器的异步通信以及动态更新页面内容。通过JavaScript,Ajax能够实现非阻塞式请求,即在后台与服务器进行通信,用户可以继续浏览...

Global site tag (gtag.js) - Google Analytics