******* 練習範例(1) 前置共通作業 *******

設定一表單,裡面要填姓名年齡興趣三項資料,
填完之後送出,經過後端處理後顯示在前端。
後面將分成使用 XML 與 JSON 兩類程式碼來傳遞及接收資料;
步驟如下:

  1. 首先要建立 HTML 表單資料。表單資料放到 <body> 本體中如下:

    
    <form id="shower">
     姓名:<input type="text" name="name" /><br />
     年齡:<input type="text" name="age" maxlength="2"/><br/>
     興趣:
     <input type="checkbox" name="habits" value="遊泳"/>遊泳
     <input type="checkbox" name="habits" value="慢跑"/>慢跑
     <input type="checkbox" name="habits" value="逛街"/>逛街
     <input type="checkbox" name="habits" value="上網"/>上網
     <input type="checkbox" name="habits" value="玩遊戲"/>玩遊戲<br/>
     <input type="button" value="送出資料" onclick="submitForm()"/>
    </form>
    
    
  2. 然後建立 request 物件用來傳遞資料到 Web Server 及接收回傳資料。
    
    function createRequest()
    {
      var request=null;
    
      try{ request=new XMLHttpRequest(); }
      catch(trymicrosoft)
      {
        try{ request=new ActiveXObject("Msxml2.XMLHTTP"); }
        catch(othermicrosoft)
        {
          try{ request=new ActiveXObject("Microsoft.XMLHTTP"); }
          catch(failed){ request=null; }
        }
      }
    
      if(request==null) alert("Request 物件建立失敗!");
    }
    var request=createRequest();
    
    

為了不讓使用者在操作時因建立 request 發生錯誤而感到困惑,最好一開始就建立此物件,
可以將建立物件的程式碼加到網頁一開始的地方(<head> 中的 <script> 內),
或將其設定成 function,然後一開始就呼叫這個 function 建立 request,
這樣一來,只要建立 request 時發生錯誤,馬上就會出現警告,
而不會讓使用者在進行一連續操作後才出現警示,白白浪費使用者時間;

接下來分成使用一般名值對字串的方式傳出 + 使用 XML 傳回
以及使用 JSON 傳出及傳回的兩種程式碼。
兩種都用 POST method 傳出資料,且後端使用 PHP