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代码
Dec 01 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
Vue 修改网站图标的方法
Dec 31 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中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
script标签的 charset 属性使用说明
2010/12/04 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
jstree的简单实例
2016/12/01 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python实现自动更换ip的方法
2015/05/05 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Python星号*与**用法分析
2018/02/02 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python帮你识破双11的套路
2019/11/11 Python
在python中修改.properties文件的操作
2020/04/08 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
与美同行演讲稿
2014/09/13 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
运动会主持人开幕词
2016/03/04 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫