ajax(二) ajax處理返回資料格式xml 例項
阿新 • • 發佈：2019-02-11
<html> <head> <title>使用者註冊</title> <script type = "text/javascript" language = "javascript"> //建立ajax引擎 function getXmlHttpObject() { var xmlHttp=null; //不同的瀏覽器獲取物件xmlhttprequest 物件方法不一樣 try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } var myXmlHttpRequest=""; //驗證使用者名稱是否已經存在 function checkName(){ myXmlHttpRequest=getXmlHttpObject(); //判斷建立是否成功 //如果使用post方式提交則用下面的程式碼 //建議使用post方法 因為 已經解決了中文亂碼問題，可以傳送大量資料 if(myXmlHttpRequest){ var url="registerprocess2.php"; var data1="userName1="+$("userName").value; //開啟請求 myXmlHttpRequest.open("post",url,true); //必須加的一句話 myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //指定回撥函式 onreadystatechange狀態改變事件觸發器 myXmlHttpRequest.onreadystatechange=chuli; //傳送請求,如果是get請求 填寫null即可 window.alert("52"); myXmlHttpRequest.send(data1); window.alert("54"); } } //回撥函式 function chuli(){ //window.alert("處理函式被呼叫"+myXmlHttpRequest.readyState);//readyState 物件狀態 //取出從 伺服器頁面返回的資料 if(myXmlHttpRequest.readyState==4){ //取出值，根據返回資訊的格式定 text || xml ||json //window.alert(myXmlHttpRequest.responseText); //接收xml格式的資料 //獲取mes物件 //myXmlHttpRequest.responseXML; //var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes"); window.alert(myXmlHttpRequest.responseXML); var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes")[0].childNodes[0]; window.alert("mes"); //取出mes值 var mes_val=mes.nodeValue; $('myres').value=mes_val; } } //封裝一個方法 function $(id){ return document.getElementById(id); } </script> </head> <body> <form action="???" method="post"> 使用者名稱字：<input type = "text" name = "userName" id = "userName"> <input type = "button" onclick = "checkName()" value = "驗證使用者名稱"> <input style = "border-width:0;color:red" type = "text" id = "myres"> <br/> 使用者密碼：<input type = "password" name = "password"><br> 電子郵件：<input type = "text" name = "email"><br/> <input type = "submit" value = "使用者註冊"> </form> <form action="???" method="post"> 使用者名稱字：<input type = "text" name = "userName2" id = "userName2"> <input type = "button" value = "驗證使用者名稱"> <input style = "border-width:0;color:red" type = "text" id = "myres2"> <br/> 使用者密碼：<input type = "password" name = "password"><br> 電子郵件：<input type = "text" name = "email"><br/> <input type = "submit" value = "使用者註冊"> </form> </body> </html>
<?php //這裡兩句話很重要，第一句話告訴瀏覽器返回的資料是xml格式 header("Content-Type:text/xml;charset=utf-8"); //告訴瀏覽器不要快取資料 //header("Cache-Control: no-cache"); //接收資料 POST || GET 根據前面的請求方式而定 $username=$_POST["userName1"]; $info=""; if($username=="zs"){ $info="<res><mes>使用者名稱不可以用，對不起</mes></res>"; }else{ $info="<res><mes>使用者名稱可以用，恭喜</mes></res>"; } echo $info; ?>