深入淺出AJAX （一） 輕鬆入門

1. 簡介
   1. AJAX是利用JavaScript指令碼將XHTML CSS XML DOM等技術融合在一起，並通過XMLHttpResquest對象進行非同步資料請求的新思想，利用它提高了使用者體驗度，可以說各種架構的出現，比如EXT  DOJO等的出現都是為了提高使用者體驗度而開發的，全新全意為使用者考慮是我們設計軟體的宗旨。
2. 與傳統區別Web請求區別
   1. 它與傳統Web頁面資料處理流程有所不同，可以非同步進行操作和處理，即使用者對瀏覽器的和伺服器處理可以同步進行，不需要等待。
   2. 看下面這張圖
   3.  
      1. 經典Web應用中瀏覽器向伺服器提交資料後，需要等待伺服器返回結果，才能繼續執行，返回的是整個頁面，一般為HTML頁。
      2. Ajax web中並不需要等待伺服器返回結果，瀏覽器還可以繼續做其他的操作，而且伺服器也不一定返回整個頁面，返回的是Data,部分我們需要的資料，格式根據我們需要自己選擇，如JSON XML 等等。
3. 實現步驟
   1. 擷取瀏覽器端資料
   3. 將擷取的資料提交到伺服器端
   4. 接收伺服器返回資料
   5. 將接受的資料動態顯示在頁面上
4. 執行個體介紹

                 省市下拉式清單串聯功能表實現

1. 介面

3. $(function (){    //註冊下拉式清單方塊的改變事件    $('#dropProvince').change(function (){        //1.擷取瀏覽器(下拉式清單選擇項)的ID值        var proID = $(this).val();        //伺服器位址        var url = "../Hander/test.ashx?proID=" + proID        //2.通過JQuery的get()方法，向伺服器提交資料        $.get(url, function (data) {            //3、4.處理伺服器返回的資料並載入到介面上            var dtJSON = eval(data);            //清空上次改變添加的資料，避免累加            $('#dropCity').html("");            $("<option value=''>" + "請選擇城市" + "</option>").appendTo($('#dropCity'));            for (var i = 0; i < dtJSON.length; i++)            {                //建立新的選擇項，並添加到下拉式清單中                $("<option value=" + dtJSON[i].cityName + ">" + dtJSON[i].cityName + "</option>").appendTo($('#dropCity'));            }        })    });});

   伺服器端代碼，並把資料轉換成JSON格式

        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            //接受用戶端請求的參數            string proID = context.Request.QueryString["proID"];            //執行個體化操作類            VoteManager voteManager = new VoteManager();            DataTable dt = new DataTable();            //執行方法            dt = voteManager.SelectCityByProvince(proID);            //將資料轉換為JSON格式            string strJson = DataTableToJson("Json", dt);            context.Response.Write(strJson);            context.Response.End();        }        //將DataTable資料轉換成JSON資料格式        public string DataTableToJson(string jsonName, DataTable dt)        {            StringBuilder Json = new StringBuilder();            Json.Append("[");            if (dt.Rows.Count > 0)            {                for (int i = 0; i < dt.Rows.Count; i++)                {                    Json.Append("{");                    for (int j = 0; j < dt.Columns.Count; j++)                    {                        Json.Append(dt.Columns[j].ColumnName.ToString() + ":\"" + dt.Rows[i][j].ToString() + "\"");                        if (j < dt.Columns.Count - 1)                        {                            Json.Append(",");                        }                    }                    Json.Append("}");                    if (i < dt.Rows.Count - 1)                    {                        Json.Append(",");                    }                }            }            Json.Append("]");            return Json.ToString();        }

 

1. 應用前景
   1. 既然Ajax可以解決並提高使用者體驗度，那麼以後Web開發中必然少不了Ajax應用，它的應用前景應該很廣泛。
   2. Ajax將使的瀏覽器快速方法，提高使用者體驗度，有可能瀏覽器的作用將會被更多的挖掘和利用，隨著互連網和網速的提高，以後，可能會替代一些本地軟體的應用，讓我們的電腦更輕巧、便捷。