******* 使用一般名值對字串傳出資料 + 使用 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.createTextNodeElement.replaceChild 等幾個 DOM method。