首页 > 代码库 > AJAX 学习笔记 2017_05_04
AJAX 学习笔记 2017_05_04
1、使用 AJAX 修改该文本内容
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 function loadXMLDoc(){ 15 var xmlHttpRequest; 16 if(window.XMLHttpRequest){ 17 // IE7+,Firefox,Chrome,Opera,Safari 浏览器执行代码 18 xmlHttpRequest = new XMLHttpRequest(); 19 } else{ 20 // IE6,IE5 浏览器执行代码 21 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 22 } 23 xmlHttpRequest.onreadystatechange = function(){ 24 /* alert(xmlHttpRequest.status); */ 25 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 26 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText; 27 } 28 } 29 xmlHttpRequest.open("get","demo01?t="+Math.random(),true); 30 xmlHttpRequest.send(); 31 } 32 </script> 33 </head> 34 <body> 35 <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div><br> 36 <button type="button" onClick="loadXMLDoc()">修改内容</button> 37 </body> 38 </html>
2、处理浏览器缓存问题：url后面加上一个随机函数，改变每次请求的路径： 1 ?t="+Math.random()
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 function loadXMLDoc(){ 15 var xmlHttpRequest; 16 if(window.XMLHttpRequest){ 17 xmlHttpRequest = new XMLHttpRequest(); 18 } else { 19 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 22 xmlHttpRequest.onreadystatechange = function(){ 23 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 24 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText; 25 } 26 } 27 28 xmlHttpRequest.open("get","demo02?t="+Math.random(),true); 29 xmlHttpRequest.send(); 30 } 31 </script> 32 </head> 33 <body> 34 <h2>您可能得到的是缓存的结果。为了避免这种情况，请向 URL 添加一个唯一的 ID</h2> 35 <button type="button" onClick="loadXMLDoc()">请求数据</button> 36 <p>多次点击按钮，可以看到时间变化。</p> 37 <div id="myDiv"></div> 38 </body> 39 </html>
3、 GET 方法发送信息
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 function loadXMLDoc(){ 15 var xmlHttpRequest; 16 if(window.XMLHttpRequest){ 17 xmlHttpRequest = new XMLHttpRequest(); 18 } else { 19 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 22 xmlHttpRequest.onreadystatechange = function(){ 23 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 24 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText; 25 } 26 } 27 28 xmlHttpRequest.open("get","demo03?fname=Shawn&lname=Yang&t="+Math.random(),true); 29 xmlHttpRequest.send(); 30 } 31 </script> 32 </head> 33 <body> 34 <h2>如果您希望通过 GET 方法发送信息，请向 URL 添加信息</h2> 35 <button type="button" onClick="loadXMLDoc()">请求数据</button> 36 <p>多次点击按钮，可以看到时间变化。</p> 37 <div id="myDiv"></div> 38 </body> 39 </html>
4、POST 请求
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 function loadXMLDoc(){ 15 var xmlHttpRequest; 16 if(window.XMLHttpRequest){ 17 xmlHttpRequest = new XMLHttpRequest(); 18 } else { 19 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 22 xmlHttpRequest.onreadystatechange = function(){ 23 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 24 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText; 25 } 26 } 27 28 xmlHttpRequest.open("post","demo04",true); 29 xmlHttpRequest.send(); 30 } 31 </script> 32 </head> 33 <body> 34 <h2>一个简单 POST 请求</h2> 35 <button type="button" onClick="loadXMLDoc()">请求数据</button> 36 <p>多次点击按钮，可以看到时间变化。</p> 37 <div id="myDiv"></div> 38 </body> 39 </html>
5、使用 setRequestHeader() 来添加 HTTP 头
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 function loadXMLDoc(){ 15 var xmlHttpRequest; 16 if(window.XMLHttpRequest){ 17 xmlHttpRequest = new XMLHttpRequest(); 18 } else { 19 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 22 xmlHttpRequest.onreadystatechange = function(){ 23 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 24 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText; 25 } 26 } 27 28 xmlHttpRequest.open("post","demo05",true); 29 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 30 xmlHttpRequest.send("fname=Shawn&lname=Yang"); 31 } 32 </script> 33 </head> 34 <body> 35 <h2>如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据</h2> 36 <button type="button" onClick="loadXMLDoc()">请求数据</button> 37 <p>多次点击按钮，可以看到时间变化。</p> 38 <div id="myDiv"></div> 39 </body> 40 </html>
6、使用 async=true
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 function loadXMLDoc(){ 15 var xmlHttpRequest; 16 if(window.XMLHttpRequest){ 17 xmlHttpRequest = new XMLHttpRequest(); 18 } else { 19 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 22 xmlHttpRequest.onreadystatechange = function(){ 23 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 24 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText; 25 } 26 } 27 28 xmlHttpRequest.open("get","ajax_info2.txt?t=" + Math.random(),true); 29 xmlHttpRequest.send(); 30 } 31 </script> 32 </head> 33 <body> 34 <h2>当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数</h2> 35 <button type="button" onClick="loadXMLDoc()">修改内容</button> 36 <div id="myDiv"></div> 37 </body> 38 </html>
7、async=false
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 function loadXMLDoc(){ 15 var xmlHttpRequest; 16 if(window.XMLHttpRequest){ 17 xmlHttpRequest = new XMLHttpRequest(); 18 } else { 19 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 22 xmlHttpRequest.open("get","ajax_info2.txt?t=" + Math.random(),false); 23 xmlHttpRequest.send(); 24 //alert(xmlHttpRequest.responseText); 25 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText; 26 } 27 </script> 28 </head> 29 <body> 30 <p>我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。</p> 31 <p>请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。</p> 32 <p>注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可</p> 33 <button type="button" onClick="loadXMLDoc()">修改内容</button> 34 <div id="myDiv"></div> 35 </body> 36 </html>
8、来自服务器的响应并非 XML，请使用 responseText 属性
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 function loadXMLDoc(){ 15 var xmlHttpRequest; 16 if(window.XMLHttpRequest){ 17 xmlHttpRequest = new XMLHttpRequest(); 18 } else { 19 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 22 xmlHttpRequest.onreadystatechange = function(){ 23 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 24 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText; 25 } 26 } 27 28 xmlHttpRequest.open("get","ajax_info2.txt?t=" + Math.random(),false); 29 xmlHttpRequest.send(); 30 } 31 </script> 32 </head> 33 <body> 34 <p>如果来自服务器的响应并非 XML，请使用 responseText 属性。</p> 35 <p>responseText 属性返回字符串形式的响应。</p> 36 <button type="button" onClick="loadXMLDoc()">修改内容</button> 37 <div id="myDiv"></div> 38 </body> 39 </html>
9、来自服务器的响应是 XML，而且需要作为 XML 对象进行解析
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 function loadXMLDoc(){ 15 var xmlHttpRequest; 16 var txt,x,i; 17 var xmlDoc; 18 if(window.XMLHttpRequest){ 19 xmlHttpRequest = new XMLHttpRequest(); 20 } else { 21 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 22 } 23 24 xmlHttpRequest.onreadystatechange = function(){ 25 /* alert(xmlHttpRequest.readyState); */ 26 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 27 xmlDoc = xmlHttpRequest.responseXML; 28 txt = ""; 29 x = xmlDoc.getElementsByTagName("ARTIST"); 30 for(i=0;i<x.length;i++){ 31 txt = txt + x[i].childNodes[0].nodeValue + "<br>"; 32 } 33 document.getElementById("myDiv").innerHTML = txt; 34 } 35 } 36 37 xmlHttpRequest.open("get","cd_catalog.xml?t=" + Math.random(),true); 38 xmlHttpRequest.send(); 39 } 40 </script> 41 </head> 42 <body> 43 <p>如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。</p> 44 <button type="button" onClick="loadXMLDoc()">修改内容</button> 45 <div id="myDiv"></div> 46 </body> 47 </html>
10、用户在输入框中键入字符时，网页与 web 服务器进行通信
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 function showHint(o){ 15 var xmlHttpRequest; 16 if(window.XMLHttpRequest){ 17 xmlHttpRequest = new XMLHttpRequest(); 18 } else { 19 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 22 xmlHttpRequest.onreadystatechange = function(){ 23 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 24 document.getElementById("txtHint").innerHTML = xmlHttpRequest.responseText; 25 } 26 } 27 //传递 hint 参数 28 //t 参数防止客户端缓存 29 xmlHttpRequest.open("get","gethint?hint="+o+"&t="+Math.random(),true); 30 xmlHttpRequest.send(); 31 } 32 </script> 33 </head> 34 <body> 35 <p>用户在输入框中键入字符时，网页如何与 web 服务器进行通信： 请在下面的输入框中键入字母（A - Z）：</p> 36 <p><b>在输入框中尝试输入字母 a:</b></p> 37 <p><input type="text" id="txt1" onkeyup="showHint(this.value)"/></p> 38 <p>提示信息：<span id="txtHint"></span></p> 39 </body> 40 </html>
11、通过 AJAX 从数据库（没连数据库，模拟了类似的功能）读取信息
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 function showCustmer(o){ 15 var xmlHttpRequest; 16 if(window.XMLHttpRequest){ 17 xmlHttpRequest = new XMLHttpRequest(); 18 } else { 19 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 22 xmlHttpRequest.onreadystatechange = function(){ 23 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 24 document.getElementById("txtHint").innerHTML = xmlHttpRequest.responseText; 25 } 26 } 27 //传递 hint 参数 28 //t 参数防止客户端缓存 29 xmlHttpRequest.open("get","getcustomer?q="+o+"&t="+Math.random(),true); 30 xmlHttpRequest.send(); 31 } 32 </script> 33 </head> 34 <body> 35 <p>下面的例子将演示网页如何通过 AJAX 从数据库读取信息： 请在下面的下拉列表中选择一个客户：</p> 36 <p> 37 <select name="customers" onclick="showCustmer(this.value)"> 38 <option value="APPLE">Apple Computer, Inc.</option> 39 <option value="BAIDU">BAIDU, Inc</option> 40 <option value="Canon">Canon USA, Inc.</option> 41 <option value="Google">Google, Inc.</option> 42 <option value="Nokia">Nokia Corporation</option> 43 <option value="SONY">Sony Corporation of America</option> 44 </select> 45 </p> 46 <div id="txtHint">客户信息将显示在这...</div> 47 </body> 48 </html>
12、读取XML案例
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <style type="text/css"> 14 table,th,td { 15 border : 1px solid black; 16 border-collapse: collapse; 17 } 18 th,td { 19 padding: 5px; 20 } 21 </style> 22 <script type="text/javascript"> 23 function loadDoc(){ 24 var xmlHttpRequest; 25 var i; 26 if(window.XMLHttpRequest){ 27 xmlHttpRequest = new XMLHttpRequest(); 28 } else { 29 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 30 } 31 32 xmlHttpRequest.onreadystatechange = function(){ 33 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 34 myFunction(this); 35 } 36 } 37 //t 参数防止客户端缓存 38 xmlHttpRequest.open("get","cd_catalog2.xml?t="+Math.random(),true); 39 xmlHttpRequest.send(); 40 } 41 42 function myFunction(xmlHttpRequest){ 43 var xmlDoc = xmlHttpRequest.responseXML; 44 var table = "<table><tr><th>Artist</th><th>Title</th></tr>" 45 var cds = xmlDoc.getElementsByTagName("CD"); 46 for(i=0;i<cds.length;i++){ 47 var artist = cds[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue; 48 var title= cds[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue; 49 table += "<tr><td>" + artist + "</td><td>" + title + "</td></tr>"; 50 } 51 table += "</table>"; 52 document.getElementById("myDiv").innerHTML = table; 53 } 54 55 function hide(o){ 56 document.getElementById("myDiv").innerHTML = ""; 57 } 58 59 </script> 60 </head> 61 <body> 62 <p>加载XML文件</p> 63 <p> 64 <input type="button" value="收藏我的CD" onclick="loadDoc()"/> 65 <input type="button" value="收起" onclick="hide(this)"/> 66 </p> 67 <div id="myDiv"></div> 68 </body> 69 </html>
13、应用callback函数
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>AJAX Demo</title> 13 <script type="text/javascript"> 14 var xmlHttpRequest; 15 function loadDoc(url,func){ 16 if(window.XMLHttpRequest){ 17 xmlHttpRequest = new XMLHttpRequest(); 18 } else { 19 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 22 xmlHttpRequest.onreadystatechange = func; 23 xmlHttpRequest.open("get",url+"?t="+Math.random(),true); 24 xmlHttpRequest.send(); 25 } 26 function myFunction(){ 27 loadDoc("ajax_info2.txt",function(){ 28 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ 29 document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText; 30 } 31 }); 32 }; 33 </script> 34 </head> 35 <body> 36 <p>callback函数创建一个XMLHttpRequest，并从一个TXT文件中检索数据。</p> 37 <p> 38 <input type="button" value="更新数据" onclick="myFunction()"/> 39 </p> 40 <div id="myDiv"></div> 41 </body> 42 </html>
代码链接: http://pan.baidu.com/s/1mhJDsEG 密码: tmxr
AJAX 学习笔记 2017_05_04
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。