DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> ajax入門指南(一)
ajax入門指南(一)
編輯: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對象向服務器端發送請求的基本流程可以分為5步:
                  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就緒狀態
                       共有5種就緒狀態:
                        0:請求未初始化(還沒有調用XMLHttpRequest對象的open方法)

                        1:請求已經建立,但是還沒有發送(還沒有調用send方法)
                        2:請求已發送,正在處理中
                        3:請求在處理中。通常響應中已有部分數據可用了,但是服務器還沒有完成響應的生成
                        4:響應已完成,可以獲取並且使用服務器的響應了 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved