******* 使用一般名值對字串傳出資料 + 使用 XML 傳回 *******

1. 前端撰寫 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);
   } 
   
   

2. 後端撰寫處理程式(使用 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;
   
   

3. 前端撰寫接收後端傳來資料的處理程式：
   在 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。