ajax入门例子

snowlucky · 发表于 2013-1-23 02:46:36

<span style="" class="Apple-style-span"><div style="">parseXML.html文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>parseXML.html</title> </head> <body> <script type="text/javascript"> var xmlHttp; var requestType=""; //创建XMLHttpRequest对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ //针对FireFox,mozillar,opera,Safari,IE7,IE8 xmlHttp=new XMLHttpRequest(); //针对某些特定版本的Mozillar浏览器的BUG进行修正 if(xmlHttp.overrideMimeType){ xmlHttp.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //针对IE6,IE5.5,IE5 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } //页面点击按钮事件--主函数 function startRequest(requestedList){ //从点击事件传参数给requestType赋值 requestType=requestedList; //第一步：创建XMLHttpRequest对象 createXMLHttpRequest(); //第二步：注册回调函数时，只需要函数名，不需要加括号 //需要将函数名注册，如果加上括号，就会把函数返回值注册上，这是错误的 xmlHttp.onreadystatechange=handleStateChange; //第三步：建立与服务器的调用。 //第一个参数：http的请求方式，支持所有http的请求方式，主要使用get和post //第二个参数：请求url的地址，get方式请求的参数也在url中 //第三个参数：采用异步还是同步方式交互，true表示异步 xmlHttp.open("GET","parseXML.xml",true); //第四步：发送请求，开始和服务器端进行交互 //同步方式下：send这句话会在服务器端数据回来才执行完 //异步方式下：send这句话会立即完成执行 xmlHttp.send(null); } //监听状态函数 function handleStateChange(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ //根据点击事件时requestSate参数判断 if(requestType=="north"){ //转到函数listNorthStates(),只显示所有北部州名 listNorthStates(); }else if(requestType="all"){ //转到函数listAllStates(),显示所有州名 listAllStates(); } } } } function listNorthStates(){ //xmlDoc取到值，由xmlHttp对象的responseXML方法从服务器的parseXML.xml文件取到 var xmlDoc=xmlHttp.responseXML; //返回xml文件中指定标记值 var northNode=xmlDoc.getElementsByTagName("north")[0]; var out="North States"; //返回标记内的指定标记数组 var northStates=northNode.getElementsByTagName("state"); //转到在客户端输出的函数outputList(); outputList("Northern States",northStates); } function listAllStates() { var xmlDoc = xmlHttp.responseXML; var allStates = xmlDoc.getElementsByTagName("state"); outputList("All States in Document", allStates);}//输出函数function outputList(title,states){var out=title;var currentState=null;for(var i=0;i<states.length;i++){currentState=states[i];out=out+"\n-"+currentState.childNodes[0].nodeValue;}//弹出提示框alert(out);} </script> <h1>处理XML文档</h1> <br/><br/> <form action="#"> <input type="button" value="查看所有州的列表" > <br/><br/> <input type="button" value="查看所有北部地区的州列表" > </form> </body></html>
parseXML.xml文件：

<?xml version="1.0" encoding="UTF-8"?><states><north> <state>Minnesota</state> <state>Iowa</state> <state>North Dakota</state> </north> <south> <state>Texas</state> <state>Oklahoma</state> <state>Louisiana</state> </south> <east> <state>New York</state> <state>North Carolina</state> <state>Massachusetts</state> </east> <west> <state>California</state> <state>Oregon</state> <state>Nevada</state> </west></states>

		自动登录	找回密码
密码			立即注册