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 相关文章推荐
原生js的弹出层且其内的窗口居中
May 14 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
js验证上传图片的方法
May 12 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 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
smarty模板中拼接字符串的方法
2014/02/14 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
php文件上传类完整实例
2016/05/14 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python实现的个人所得税计算器示例
2018/06/01 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
python 连续不等式语法糖实例
2020/04/15 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
python设置中文界面实例方法
2020/10/27 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
Linux的主要特性
2014/10/06 面试题
党员创先争优承诺书
2014/03/26 职场文书
师范生自荐信模板
2014/05/28 职场文书
党员干部一句话承诺
2014/05/30 职场文书
工资证明范本
2015/06/12 职场文书