WebForm頁面使用Ajax

標籤：

AJAX:”Asynchronous JavaScript and XML”　　中文意思：非同步JavaScript和XML。指一種建立 互動式網頁應用的網頁開發技術。AJAX並非縮寫詞,而是由Jesse James Gaiiett創造的名詞。 　　AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術：　　1、web標準( Standards-Based Presentation )XHTML+CSS的表示；　　2、使用 DOM( Document Object Model )進行動態顯示及互動；　　3、使用 XML 和 XSLT 進行資料交換及相關操作,使用 XMLHttpRequest 進行非同步資料查詢、檢索.　　 簡單理解為：JavaScript + XMLHttpRequest + CSS +伺服器端 的集合.廢話少說，下面直接上代碼(這裡我唯寫以Post方式發送請求的代碼，關於JQuery中使用ajax跟以Get方式發送請求，我就不寫了)，在下面的代碼中，我會從建立非同步對象，到在WebForm頁面中使用非同步對象來說說我的體會。 1、用js建立相容瀏覽器的ajax非同步對象

function createAjax() {
    var ajaxObject = false;
    try {
        ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            ajaxObject = false;
        }
    }
    if (!ajaxObject && typeof (XMLHttpRequest) != ‘undefinded‘) {
        ajaxObject = new XMLHttpRequest();
    }
    return ajaxObject;
}

複製代碼 2、頁面中ajax的使用

<script type="text/javascript">
        var ajaxObject;
        window.onload = function () {
            ajaxObject = createAjax();
            getControl("btnOK").onclick = submitData1;
        }
        function submitData1() {
            var txtName = getControl("txtName").value;
            //以Post方式請求發送請求
            ajaxObject.open("POST", "ResponseEnd.aspx", true);
            //以Post方式發送非同步請求需要佈建要求頭
            ajaxObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            ajaxObject.onreadystatechange = function () {
                if (ajaxObject.readyState == 4) {
                    //狀態200表示非同步對象已經完全接收完伺服器響應的資料
                    if (ajaxObject.status == 200) {
                        var res = ajaxObject.responseText;
                        alert(res);
                    }
                }
            }
            //發送非同步請求(Post方式發送請求在send裡面書寫自己要發送給伺服器的參數)
            ajaxObject.send("flag=1&name=" + txtName);
        }
    </script>

複製代碼3、後台頁面ResponseEnd.aspx.cs對資料的處理

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;   namespace Web {     public partial class ResponseEnd : System.Web.UI.Page     {         protected void Page_Load(object sender, EventArgs e)         {             if (!string.IsNullOrEmpty(Request["flag"]))             {                   ShuChu();             }         }         private void ShuChu()         {             #region 方法一             //try             //{             //    string name = Request["name"];             //    Response.Write(name);             //}             //catch (Exception ex)             //{             //    throw new Exception(ex.Message);             //}             //finally             //{             //    Response.End();             //}              #endregion               #region 方法二             //try             //{             //    string name = Request["name"];             //    Response.Write(name);             //    this.Page.Visible = false;             //    Context.ApplicationInstance.CompleteRequest();             //}             //catch (Exception ex)             //{             //    throw new Exception(ex.Message);             //}              #endregion               try            {                 string name = Request["name"];                 Response.Write(name);                 Response.End();             }             catch (System.Threading.ThreadAbortException ex)             {             }             catch (Exception ex)             {                 throw new Exception(ex.Message);             }          }     } }

WebForm頁面使用Ajax