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 相关文章推荐
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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
简单的php 验证图片生成函数
2009/05/21 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
Angular 表单控件示例代码
2017/06/26 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python转换时间的图文方法
2019/07/01 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
Django中的session用法详解
2020/03/09 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
应届专科生个人的自我评价
2014/01/05 职场文书
教师研修随笔感言
2014/01/23 职场文书
管理专员自荐信
2014/01/26 职场文书
班级安全教育实施方案
2014/02/23 职场文书
人事科岗位职责范本
2014/03/02 职场文书
教师自我鉴定范文
2014/03/20 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
圆明园观后感
2015/06/03 职场文书
酒店宣传语大全
2015/07/13 职场文书
运动会宣传语
2015/07/13 职场文书
生产实习心得体会范文
2016/01/22 职场文书