JS Implementation of ajax Asynchronous Browser Compatibility

  • 2021-07-13 03:59:48
  • OfStack

No more nonsense, just post the code for everyone. The specific code is as follows:


<td> 
<input type="button" value=" Order details " 
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 == " Order details "){ 
// 1. Create an asynchronous object  
var xhr = createXmlHttp(); 
// 2. Set up listening  
xhr.onreadystatechange = function(){ 
if(xhr.readyState == 4){ 
if(xhr.status == 200){ 
div1.innerHTML = xhr.responseText; 
}} 
} 
// 3. Open a connection  
xhr.open("GET", 
"${pageContext.request.contextPath}/ 
adminOrder_findOrderItem.action?oid="+oid+"&time= 
"+new Date().getTime(),true); 
// 4. Send  
xhr.send(null); 
but.value = " Shut down "; 
}else{ 
div1.innerHTML = ""; 
but.value=" Order details "; 
} 
} 
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> 
//  According to the order id Query order items : 
public String findOrderItem(){ 
//  According to the order id Query order items : 
List<OrderItem> list = orderService.findOrderItem(order.getOid()); 
  //  Show to Page : 
ActionContext.getContext().getValueStack().set("list", list); 
  //  Page jump  
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>

Related articles: