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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
javascript 闭包
Sep 15 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
Uploadify上传文件方法
Mar 16 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
深入解读Node.js中的koa源码
Jun 17 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之面向对象
2013/05/15 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
python概率计算器实例分析
2015/03/25 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
python中metaclass原理与用法详解
2019/06/25 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
Django如何重置migration的几种情景
2021/02/24 Python
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
乡镇消防工作实施方案
2014/03/27 职场文书
法人代表委托书
2014/04/04 职场文书
节约能源标语
2014/06/17 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby