- 浏览: 601807 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (448)
- 字符串相关 (16)
- Struts2页面显示 (15)
- Hibernate错误记录 (6)
- linux命令 (2)
- java项目测试 (5)
- 个人作品 (10)
- hibernate应用 (15)
- struts1 (7)
- 数据库(除了hibernate) (42)
- J2ME/WAP (37)
- servlet/jsp (49)
- java桌面应用+java综合 (14)
- 服务器配置,报错解决 (24)
- Myeclipse配置,抛错解决 (8)
- linux (18)
- JavaScript+jquery+ajax (45)
- div css 页面设计 (16)
- 互联网综合运营 (14)
- 编程工具类 (3)
- 论文 报告 文献 (14)
- PHP (26)
- struts2 (9)
- spring (1)
- 我的IT生活 (14)
- Resin (6)
- java项目记录 (14)
- https安全 (11)
- 支付技术 (3)
最新评论
-
yihaijunyxr:
很好呀,我好久没用iteye了,今天找出两个帐号(yihaij ...
c/c++的监听tmlisten启动缓慢解决 -
yihaijun:
好像这不算是技术博客,是工作博客
c/c++的监听tmlisten启动缓慢解决 -
ml365:
后来还优化了webservice的前置框架,不用cxf,用了另 ...
c/c++的监听tmlisten启动缓慢解决 -
Jayliuying:
有点晚哈 但是也支持一下 楼主
java相关论文的参考文献【转】 -
gqsunrise:
...
我是项目经理,我的项目管理日记【20120229】
* Returns a function that waits for the specified XMLHttpRequest
* to complete, then passes its XML response to the given handler function.
* req - The XMLHttpRequest whose state is changing
* responseXmlHandler - Function to pass the XML response to
*/
function getReadyStateHandler(req, responseXmlHandler) {
// 返回一个监听XMLHttpRequest实例的匿名函数
return function () {
// 如果请求的状态是“完成”
if (req.readyState == 4) {
// 检查是否成功接收了服务器响应
if (req.status == 200) {
// 将载有响应信息的XML传递到处理函数
responseXmlHandler(req.responseXML);
} else {
// 有HTTP问题发生
alert("HTTP error: "+req.status);
}
}
}
}
HTTP状态码
在列表6中,XMLHttpRequest的status属性被测试用来确定请求是否成功完成。当处理简单的GET与POST请求,你可以认为只要不是200(OK)的状态就表示发生了错误。若服务器发送了一个重定向响应(例如,301或302),浏览器会透明地完成重定向并从新位置获取相应的资源;XMLHttpRequest不会看到重定向状态码。同时,浏览器自动添加一个缓存控制:对于所有XMLHttpRequest都使用no-cache header,这样客户端代码就可以不用处理304(not-modified)响应。
关于getReadyStateHandler()
getReadyStateHandler()是相对比较复杂的一段代码,特别当你不能熟悉阅读JavaScript时。折中方案是在你的JavaScript库中包含此函数,你可以简单地处理Ajax服务器响应,而不用去注意XMLHttpRequest的内部细节。重要是你自己要理解在代码中如何使用getReadyStateHandler()。
在列表3中,你看到getReadyStateHandler()被这样调用:
handlerFunction=getReadyStateHandler(req,updateCart)。
由它返回的函数将会检查在req变量中的XMLHttpRequest是否已完成,并调用由updateCart指定的回调方法处理响应XML。
提取购物车数据
列表7中展示了updateCart()中的代码。此函数使用DOM来解析购物车XML文档,并更新WEB页面(参见列表1)来反映新的购物车内容。注意对用来提取数据的XML DOM的调用。Cart元素上生成的属性,即序列化时生成的时间戳,通过检测它可以保证不会用老的数据来覆盖新的购物车数据。Ajax请求天生就是异步的,通过这个检测可以有效避免在过程外到达的服务器响应的干扰。
列表7:更新页面来反映出购物车XML文档内容
// 从文档中获取根元素“cart”
var cart = cartXML.getElementsByTagName("cart")[0];
// 保证此文档是最新的
var generated = cart.getAttribute("generated");
if (generated > lastCartUpdate) {
lastCartUpdate = generated;
// 清除HTML列表,用来显示购物车内容
var contents = document.getElementById("cart-contents");
contents.innerHTML = "";
// 在购物车内按条目循环
var items = cart.getElementsByTagName("item");
for (var I = 0 ; I < items.length ; I++) {
var item = items[I];
// 从name与quantity元素中提取文本节点
var name = item.getElementsByTagName("name")[0].firstChild.nodeValue;
var quantity = item.getElementsByTagName("quantity")[0].firstChild.nodeValue;
// 为条目创建并添加到HTML列表中
var li = document.createElement("li");
li.appendChild(document.createTextNode(name+" x "+quantity));
contents.appendChild(li);
}
}
// 更新购物车的金额累计
document.getElementById("total").innerHTML = cart.getAttribute("total");
}
到现在,关于Ajax处理过程的教程已经结束,也许你想让应用运行起来,并看看它的实际运作(参见下载部分)。这个例子非常简单,有非常大的改进的余地。比如,我在服务器端代码中包含了从购物车中移除条目的代码,但从客户端UI中没有访问的途径。作为一个练习,尝试在现有的JavaScript基础上实际这个功能。
。 使用Ajax的挑战
发表评论
-
解决了json回调函数不执行的问题!
2011-12-11 21:56 1393找了好久 网上的解说千姿百态 不过还是有灵感! 后来发现,是 ... -
解决了myeclipse因为js乱码而使得程序需要这个js的地方运行不了
2011-12-11 16:08 781这是一个城市的三级联机菜单效果,很熟悉了吧 呵呵。项目是我半途 ... -
Ajax使用范例【原创】
2011-02-10 16:30 893以下是一个例子,以后遇到需要Ajax的地方,都可以参考。实现效 ... -
刷新页面时保存radio状态
2010-12-29 16:35 1996嗯。只是留个底,让自己以后需要的话可以用到。 a. 在< ... -
window.location.Reload()和window.location.href=window.location.href【转】
2010-12-12 16:48 1541<a onclick="javascrip ... -
jQuery实例CSS 样式表动态选择【转】
2010-12-12 16:33 1050jQuery实例CSS 样式表动态选择本实例主要说的还是jqu ... -
jQuery框架+cookie选择样式表文件【转】
2010-12-12 16:33 865HTML: DOCTYPE html PUBLIC &q ... -
转】 《15天学会Jqurey》之第七天--样式表切换
2010-12-12 16:32 859转载自 jiangqincong 最终编辑 jiangqi ... -
转】 window.open和window.showModalDialog用法
2010-12-12 16:30 846转载自 liuduohello 最终 ... -
js弹出页面大全[转]
2010-12-12 16:29 923【1、最基本的弹出窗口代码】 其实代码非常简单: &l ... -
点击输入框出现提示语[转]
2010-12-12 16:28 1198这需要和脚本配合,下面是简单示例,当你鼠标点文本框后,出现 ... -
Ajax简单易懂实例教程【原创】
2010-12-12 16:24 990jsp页面如下: <%@ page content ... -
jquery技巧总结【转】
2010-12-12 16:19 655一、简介1.1、概述随着WEB2.0及ajax思想在互联网上的 ... -
jquery的粗略概述【转】
2010-12-12 16:17 704一,找到你了! 还记得$()这个东西吧?prototype还是 ... -
js改变iframe的src【原创】
2010-12-12 15:25 1374顺便记下用<a>来调用js方法的写法: &l ... -
setTimeout使用细节【转】
2010-12-12 15:25 1314今天的用的时候,想隔一段时间之后运行一个方法,可是页面会报 ... -
js鼠标滑过新闻标题列表显示对应新闻内容【原创】
2010-12-12 11:00 1068有一个页面,左边是新闻列表标题,鼠标划过相应的标题,在右侧 ... -
js截取select下拉列表框当前选择项的文本【原创】
2010-12-12 10:44 1106var selectObj = document.getEle ... -
jsp删除前弹出js提示【转】
2010-12-12 10:40 1444<script type="text/ja ... -
js实现菜单展开和收缩,兼容多种浏览器【原创】
2010-12-12 10:36 1717菜单从上到下排列,要在上下实现展开和收缩,思路如下: 用 ...
相关推荐
AJAX 简易 学习 教程
Ajax简易在线聊天室 Ajax简易在线聊天室 学习ajax的好例子
Ajax电子教程Ajax电子教程Ajax电子教程Ajax电子教程Ajax电子教程Ajax电子教程Ajax电子教程
ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...
AJAX的简易教程,包涵AJAX的基本概貌,并伴随简单的例子讲解. 可让初学都轻松学习掌握AJAX,分享一下
ajax高级教程ajax高级教程ajax高级教程. 适合有一定js基础的人看的.
不错的 ajax视频教程
参加培训时老师给发的教程课件和例子,很经典。
ajax基础教程ajax基础教程ajax基础教程ajax基础教程ajax基础教程aax基础教程ajax基础教程ajax基础教程ajax础教程ajax基础教程aja基础教程ajax基础教程ajax基础教程ajax基础教程ajax基础教程aax基础教程ajax基础教程
Ajax简易聊天室,运行于ASP环境,用Access存储聊天记录,本程序纯属为了学习,请不要当成功能强大的聊天室来用,呵呵,只是想研究一下Ajax练手的,实现了聊天室的基本雏形,可以无刷新发送消息,数据库定时更新,...
ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax ...
W3School Ajax教程 Ajax 教程 整理的W3School Ajax教程
介绍ajax的教程,感觉还行,建议下载使用
课件,学习用 课件,学习用 课件,学习用 课件,学习用课件,学习用
ajax基础教程3 中文需要 下载四个文件再解压 (由于该资料有三十几m )(也就是还需要下载其它三个文件) Ajax基础教程1 Ajax基础教程2 Ajax基础教程3 Ajax基础教程4
ajax视频教程,希望对大家有帮助
AJAX教程AJAX教程AJAX教程AJAX教程AJAX教程
完全手册:ASP.net.Ajax电子教程
原书名:Foundations of Ajax 原出版社: Apress 作者: (美)Ryan Asleson,Nathaniel T.Schutta 译者: 金灵 等 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:7115144818 上架时间:2006-2-14 ...