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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
jquery实现pager控件示例
Apr 09 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
详解JavaScript自定义函数
Jul 29 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
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
Python最长公共子串算法实例
2015/03/07 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
pandas值替换方法
2018/07/10 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
浅谈python标准库--functools.partial
2019/03/13 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
Python笔记之facade模式
2019/11/20 Python
django框架中间件原理与用法详解
2019/12/10 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
英语教师岗位职责
2014/03/16 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
初中政治教学工作总结
2015/08/13 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
详解python的异常捕获
2022/03/03 Python