写一个按钮，点击后在指定的div里显示本地txt文件内容
在本地新建一个test.txt，里面随便写点内容就好。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 </head> 6 <body> 7 <input type="button" id="btn_test" value="test" onclick="javascript:testAjax('test.txt');" /> 8 <br /><br /> 9 <div id="testDiv">Hello,World!</div> 10 11 <script> 12 function testAjax(request_url){ 13 var xmlhttp = null; 14 try{ 15 var xmlhttp = new XMLHttpRequest(); 16 }catch(e){ 17 try{ 18 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 19 }catch(e){ 20 alert("Your browser is not support AJAX"); 21 } 22 } 23 24 if (xmlhttp){ 25 xmlhttp.open("GET",request_url,true); 26 xmlhttp.onreadystatechange = function (){ 27 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 28 document.getElementById("testDiv").innerHTML = xmlhttp.responseText; 29 } 30 }; 31 xmlhttp.send(null); 32 }else{ 33 alert("Error"); 34 } 35 } 36 </script> 37 </body> 38 </html>
也可以把readystatechange的事件处理句柄单独写成一个方法，注意xmlhttp要写成全局变量。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 </head> 6 <body> 7 8 <input type="button" id="btn_test" value="test" onclick="javascript:testAjax('test.txt');" /> 9 <br /><br /> 10 <div id="testDiv">Hello,World!</div> 11 12 <script> 13 var xmlhttp = null; 14 15 function readyStateChangeHandler(){ 16 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 17 document.getElementById("testDiv").innerHTML = xmlhttp.responseText; 18 } 19 } 20 21 function testAjax(request_url){ 22 try{ 23 xmlhttp = new XMLHttpRequest(); 24 }catch(e){ 25 try{ 26 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 27 }catch(e){ 28 alert("Your browser is not support AJAX"); 29 } 30 } 31 32 if (xmlhttp){ 33 xmlhttp.open("GET",request_url,true); 34 xmlhttp.onreadystatechange = readyStateChangeHandler; 35 xmlhttp.send(null); 36 }else{ 37 alert("Error"); 38 } 39 } 40 </script> 41 </body> 42 </html>
获取XML文件的方法有点不太一样，思路是一致的，只不过具体读取response会用到一些特殊的方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 </head> 6 <body> 7 8 <input type="button" id="btn_test" value="test" onclick="javascript:testAjax();" /> 9 <br /><br /> 10 <div id="testDiv">Hello,World!</div> 11 12 <script> 13 var xmlhttp = null; 14 var testDiv = document.getElementById("testDiv"); 15 16 function readyStateChangeHandler(){ 17 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 18 var xmlDOM = xmlhttp.responseXML; 19 //拿到response后要解析出XML的根节点 20 var xmlRoot = xmlDOM.documentElement; 21 try{ 22 //Tag Name视具体需求而定，要和后端人员商量好。 23 var xmlItem = xmlRoot.getElementsByTagName("item"); 24 for(var i=0;i<xmlItem.length;i++){ 25 //具体怎么拿item里面的内容还需要根据数据结构来定 26 testDiv.innerHTML += xmlItem[i].innerHTML; 27 } 28 }catch(e){ 29 alert(e.message); 30 } 31 } 32 } 33 34 function testAjax(){ 35 try{ 36 xmlhttp = new XMLHttpRequest(); 37 }catch(e){ 38 try{ 39 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 40 }catch(e){ 41 alert("Your browser is not support AJAX"); 42 } 43 } 44 45 if (xmlhttp){ 46 xmlhttp.open("GET","test.xml",true); 47 xmlhttp.onreadystatechange = readyStateChangeHandler; 48 xmlhttp.send(null); 49 }else{ 50 alert("Error"); 51 } 52 } 53 </script> 54 </body> 55 </html>
test.xml
<?xml version="1.0" encoding="utf-8" ?> <root> <item>This is a XML test!</item> <item>Ajax is very useful!</item> </root>
可以看到每一项item的结构远比xml文件复杂，具体怎么取值还要和后端人员讨论
