ajax入門指南（一）

ajax入門指南，對開始學習ajax的朋友應該有所協助。

1．AJAX相容IE和Firefox兩大瀏覽器，出現了AJAX開發架構．
     2．AJAX開發關鍵技術：XMLHttpRequest對象，JavaScript編程技術，DOM（文件物件模型），CSS（層疊樣式表），和XSLT（可擴充樣式表轉換）
           XMLHttpRequest對象是實現Ajax應用的核心；
           JavaScript是Ajax應用在用戶端使用的指令碼語言；
           通過JavaScript和DOM的配合才能實現頁面的動態更新；
           CSS主要用於控制頁面元素的顯示樣式；
           XSLT可以將XML文檔轉換為任何形式的文檔，在Ajax應用中使用XSLT可以實現資料和頁面顯示的完全分離；
     3．XMLHttpRequest對象：
　　　3.1 發送請求
                  使用XMLHttpRequest對象向伺服器端發送請求的基本流程可以分為５步：
                  3.1.1   從Web表單中擷取需要的資料；
                  3.1.2   建立要串連的URL；
                  3.1.3   開啟到伺服器的串連；
                  3.1.4   設定伺服器在完成後要啟動並執行函數；
                  3.1.5   發送請求；
                  function callServer(){
                        //表單中擷取必要的資料
                        var city = document.getElementById("city").value;
                        var state = document.getElementById("state").value;
                        //只有在資料不為空白時才發出請求
                        if((city == null) (city == "")) return;
                        if((state == null) (state == "")) return;
                        //請求的URL
                        var url = "getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
                        //聯絡伺服器，開啟串連
                        xmlHttp.open("GET",url,true);//"true"代表該請求是非同步
                        //佈建要求完成時的響應函數,注意這裡是請求完成時，並不是響應完成時
                        xmlHttp.onreadystatechange = updatePage;
                        //發送請求,因為已經在請求URL中添加了要發送給伺服器的資料(city和state)，所以請求中 無需再發送其他資料.
                        xmlHttp.send(null);
                    }

             3.2 ．處理HTTP響應
                        200：一切正常  
                        401：未經授權
                        403：禁止
                        404：沒找到
                        function updatePage(){
                            //readState == 4，表示請求成功完成
                            if(xmlHttp.readyState == 4){
                                if(xmlHttp.status == 200){
                                    var response = xmlHttp.responseText;//HTTP請求返回的常值內容
                                    document.getElementById("zipCode").value = response;
                                }else if(request.status == 404){
                                        //HTTP狀態代碼為404，無法找到資源
                                        alert("404 Not Found");
                                }else if(request.status == 403){
                                        //HTTP狀態代碼為403，資源不可用
                                        alert("403 Forbidden");
                                }else if(request.status == 401){
                                        //HTTP狀態代碼為401，未經授權
                                        alert("401 Unauthorized");
                                }
                            }
                        }

              3.3．HTTP就緒狀態
                       共有５種就緒狀態：
                        0：請求未初始化（還沒有調用XMLHttpRequest對象的open方法）

                        1：請求已經建立，但是還沒有發送（還沒有調用send方法）
                        2：請求已發送，正在處理中
                        3：請求在處理中。通常響應中已有部分資料可用了，但是伺服器還沒有完成響應的產生
                        4：響應已完成，可以擷取並且使用伺服器的響應了