<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>获得书籍列表</title> <script type="text/javascript"> var xmlhttp; var txt,x,xx,i; function loadXMLDoc(url,cfunc) { if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = cfunc; xmlhttp.open("GET", "<%=request.getContextPath()%>"+url, true); xmlhttp.send(); } function myFunction1() { loadXMLDoc("/xmls/books.xml",function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200) { var xmlDoc = xmlhttp.responseXML; txt = ""; x = xmlDoc.getElementsByTagName_r("title"); for(i=0;i<x.length;i++) { txt = txt + x[i].childNodes[0].nodeValue+"<br/>"; } document.getElementByIdx_x("myDiv").innerHTML = txt; } }); } function myFunction2() { loadXMLDoc("/text/test1.txt",function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementByIdx_x("myDiv").innerHTML = xmlhttp.responseText; } }); } function myFunction3() { loadXMLDoc("/xmls/cd_catalog.xml",function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200) { txt="<table><tr><th>Title</th><th>Artist</th></tr>" x= xmlhttp.responseXML.documentElement.getElementsByTagName_r("CD"); for(i=0;i<x.length;i++) { txt = txt + "<tr>"; xx = x[i].getElementsByTagName_r("TITLE"); { try{ txt = txt + "<td>" + xx[0].firstChild.nodeValue +"</td>"; } catch(er) { txt = txt +"<td></td>"; } xx = x[i].getElementsByTagName_r("ARTIST"); try { txt = txt + "<td>" + xx[0].firstChild.nodeValue +"</td>"; } catch(er) { txt = txt + "<td></td>"; } } txt = txt + "</tr>" } txt = txt + "</table>"; document.getElementByIdx_x("myDiv").innerHTML =txt; } }); } </script> </head> <body> <h2>My Book Collection:</h2> <button type="button">获得我的图书收藏列表</button> <button type="button">这是不同的请求</button> <button type="button">获取CD信息</button> <div></div> </body> </html>
总结
以上所述是小编给大家介绍的原生JavaScrpit中异步请求Ajax实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: