JS 实现 ajax 异步浏览器兼容问题


Posted in Javascript onJanuary 21, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<td> 
<input type="button" value="订单详情" 
id="but<s:property value="#o.oid"/>" 
onclick="showDetail(<s:property value="#o.oid"/>)"/> 
<div id="div<s:property value="#o.oid"/>"></div> 
 </td> 
<script type="text/javascript"> 
function showDetail(oid){ 
var but = document.getElementById("but"+oid); 
var div1 = document.getElementById("div"+oid); 
if(but.value == "订单详情"){ 
// 1.创建异步对象 
var xhr = createXmlHttp(); 
// 2.设置监听 
xhr.onreadystatechange = function(){ 
if(xhr.readyState == 4){ 
if(xhr.status == 200){ 
div1.innerHTML = xhr.responseText; 
}} 
} 
// 3.打开连接 
xhr.open("GET", 
"${pageContext.request.contextPath}/ 
adminOrder_findOrderItem.action?oid="+oid+"&time= 
"+new Date().getTime(),true); 
// 4.发送 
xhr.send(null); 
but.value = "关闭"; 
}else{ 
div1.innerHTML = ""; 
but.value="订单详情"; 
} 
} 
function createXmlHttp(){ 
var xmlHttp; 
try{ // Firefox, Opera 8.0+, Safari 
xmlHttp=new XMLHttpRequest(); 
 } 
catch (e){ 
try{// Internet Explorer 
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
 } 
catch (e){ 
try{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
catch (e){} 
 } 
 } 
return xmlHttp; 
} 
</script> 
// 根据订单的id查询订单项: 
public String findOrderItem(){ 
// 根据订单id查询订单项: 
List<OrderItem> list = orderService.findOrderItem(order.getOid()); 
  // 显示到页面: 
ActionContext.getContext().getValueStack().set("list", list); 
  // 页面跳转 
return "findOrderItem"; 
}  
<table width="100%"> 
 <s:iterator var="orderItem" value="list"> 
 <tr> 
  <td><img width="40" height="45" src="${ pageContext.request.contextPath }/<s:property value="#orderItem.product.image"/>"></td> 
  <td><s:property value="#orderItem.product.pname"/></td> 
  <td><s:property value="#orderItem.count"/></td> 
  <td><s:property value="#orderItem.subtotal"/></td> 
 </tr> 
 </s:iterator> 
</table>

以上所述是小编给大家介绍的JS 实现 ajax 异步浏览器兼容问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
vue中如何使用ztree
Feb 06 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 #Javascript
js操作浏览器的参数方法
Jan 21 #Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 #Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 #Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 #Javascript
利用transition实现文字上下抖动的效果
Jan 21 #Javascript
jQuery Ajax实现跨域请求
Jan 21 #Javascript
You might like
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
javascript radio 联动效果
2009/03/04 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
带你快速理解javascript中的事件模型
2017/08/14 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
详解vue更改头像功能实现
2019/04/28 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python如何访问字符串中的值
2020/02/09 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python while true实现爬虫定时任务
2020/06/08 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
测绘工程系学生的自我评价
2013/11/30 职场文书
大专生自我评价
2014/01/28 职场文书
护士毕业实习感言
2014/03/05 职场文书
少儿节目主持串词
2014/04/02 职场文书
小学远程教育工作总结
2015/08/13 职场文书