******* 使用一般名值對字串傳出資料 + 使用 XML 傳回 *******
-
前端撰寫 button onclick 會呼叫的 submitForm() 程式碼:
先接收表單資料,再將資料串接成名值對字串,然後指定後端處理程式的位置,
指定 POST 資料的 Content-Type,指定 readyState 改變時要呼叫的程式,
最後再送出資料;function submitForm() { var name=document.forms[0].name.value; var age=document.forms[0].age.value; var habits=document.forms[0].habits; var querystring="name="+name+"&age="+age; for(var i=0;i < habits.length;i++) { if(habits[i].checked==true) querystring+=("&habits[]="+habits[i].value); } request.open("POST","getForm.php",true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.onreadystatechange=updatePage; request.send(querystring); }
-
後端撰寫處理程式(使用 PHP):
寫個判斷是否傳來空值的 function,可以依實際狀況撰寫不一樣的處理方式;
先接收來自前端的資料,再透過 function 判斷特定的資料是否為空值,
若有空值,則產生錯誤訊息加入回傳標頭中再傳回前端,
若資料正確,則將所有資料包成 XML 文件,設定好 header 之後,
將 XML 資料輸出給前端:使用 PHP 時要注意,由於 XML 文件開頭第一行宣告含 <? 及 ?>,
如果沒有處理好 ?> 的部份,則會被認為 PHP 程式片段結束,
因此產生難以 debug 的錯誤。# 判斷是否有傳入空的資料 function checkEmpty($title,$str) { if(strlen(trim($str))<=0) return $title."沒資料;"; else return ""; } # 接收來自前端的資料 $name=$_POST["name"]; $age=$_POST["age"]; # 判斷是否接收到空的資料 $err=checkEmpty("姓名",$name); $err.=checkEmpty("年齡",$age); # 模擬處理時間 sleep(2); # 若有空資料,則傳回錯誤 if(strlen(trim($err))>0) { header("Status: ".$err,false,400); exit(); } # 取得多選資料 $habits=$_POST["habits"]; # 準備回傳的 XML 文字 $xml='<?xml version="1.0" encoding="utf-8"?>'; $xml.=<<<profile <profile> <name>$name</name> <age>$age</age> profile; # 判斷是否有多選資料,有則加入相關 Tag if($habits && count($habits)>0) { $xml.="<habits>"; foreach($habits as $habit) { $xml.="<habit>{$habit}</habit>"; } $xml.="</habits>"; } # 加入結尾的標籤 $xml.="</profile>"; # 設定標頭後送出資料 header("Content-Type: text/xml"); print $xml;
-
前端撰寫接收後端傳來資料的處理程式:
在 onreadystatechange 指定的 function 中,
先設定各 readyState 的處置,一般只要處理 readyState=4 就可以了
當 readyState=4 時,先透過 request.status 判斷是否正常處理完成,
若是,則顯示回傳的資料,若否,則顯示錯誤訊息。function updatePage() { var state=request.readyState; switch(state) { case 1: case 2: case 3: document.getElementById("shower").innerHTML="處理中 ..."; break; case 4: if(request.status==200) { var profile=request.responseXML; var name=profile.getElementsByTagName("name")[0] .childNodes[0].nodeValue; var age=profile.getElementsByTagName("age")[0] .childNodes[0].nodeValue; var habits_array=profile.getElementsByTagName("habit"); var habits=""; if(habits_array && habits_array.length>0) { for(var i=0;i < habits_array.length;i++) { habits+=(habits_array[i].childNodes[0].nodeValue+","); } habits=habits.substring(0,habits.length-1); } document.getElementById("shower").innerHTML ="姓名:"+name+"<br />" +"年齡:"+age+"<br />" +"興趣:"+habits; } else { if(request.getResponseHeader("Status")) { document.getElementById("shower").innerHTML ="發生錯誤:"+request.getResponseHeader("Status"); } else { document.getElementById("shower").innerHTML ="發生錯誤:狀態碼="+request.status; } } } }
透過以上幾個簡單步驟,就可以完成一個簡易的 Ajax 應用。
為求快速,顯示方式使用 innerHTML。
如果要依照標準的 DOM,則使用 document.createElement、
document.createTextNode、Element.replaceChild 等幾個 DOM method。
TrackBack URL
https://www.actman.tw/~blog/2010/10/ajax-%e4%bd%bf%e7%94%a8%e5%bf%83%e5%be%97%e4%b9%9d%e7%b7%b4%e7%bf%92%e7%af%84%e4%be%8b2-%e4%bd%bf%e7%94%a8%e4%b8%80%e8%88%ac%e5%90%8d%e5%80%bc%e5%b0%8d%e5%ad%97%e4%b8%b2%e5%82%b3%e5%87%ba/trackback/