異步登入

     1、異步的概念

        異步也成為AJAX，即Asynchronous JavaScript And XML,表示異步的JavaScript和XML。異步不是一種程式設計語言而是一種應用技術，實作異步功能的代碼要寫<Script>标簽中。在學習異步之前需要對HTML

        、CSS、JavaScript DOM的知識有一定了解。

     2、DOM操作簡介

        DOM全稱為“文檔對象模型”，因為網頁是由HTML的節點标簽組成，為了能靈活操作頁面上的元素标簽，相關組織指定了DOM标準，該标準中提供了很多方法可以靈活操作頁面上的元素标簽，常用方法如下：

         (1)、常用的DOM方法

         getElementById(id)：擷取帶有指定id的節點元素。

         appendChild(node):插入新的子節點元素。

         removeChild(node):删除子節點元素。

         getElementByTagName():擷取帶有标簽名稱的元素節點。

         getElementByClassName():擷取帶有指定樣式名的元素節點。

         (2)、常用DOM屬性

         innerHTML:擷取節點元素的文本值。

         parentNode:擷取節點元素的父節點。

         childNodes：擷取節點元素的子節點。

         attributes:擷取節點元素的屬性節點。

     3、異步Get/Post請求

        在異步請求方式中也分為Get和Post請求，Get請求是将資料放在請求的Url中，而Post請求時将資料放到請求封包中，其中，使用異步方式發送get請求的具體代碼：

        xmlhttp.open("GET","demo_get.aspx",true);

        xmlhttp.send();

        send()表示請求開始發送

        xmlhttp.open("POST","demo_post.aspx",true);

     <script type="text/javascript">

        window. {

            var btnLogin = document.getElementById("btnLogin");

            btnLogin.onclick = function() {

                //發送異步請求

                var xhr;

                if (XMLHttpRequest) {

                    //建立異步對象

                    xhr = new XMLHttpRequest();

                } else {

                    xhr = new ActiveXObject("Microsoft.XMLHTTP");

                }

                //拿到使用者名密碼

                var txtName = document.getElementById("txtName");

                var txtPwd = document.getElementById("txtPwd");

                //由于是get請求，是以要将資料拼接到url上

                var strUrl = "ProcessLogin.ashx?name=" + txtName.value + "&pwd=" + txtPwd.value;

                //送出到背景位址，是否異步

                xhr.open("GET", strUrl, true);

                xhr.send();

                //上面發送了異步請求，然後監控頁面狀态

                xhr.onreadystatechange = function() {

                    if (xhr.readyState == 4 && xhr.status == 200) {

                        if (xhr.responseText == "OK") {

                            window.location.href = "main.aspx";

                        } else {

                            //如果錯誤就直接彈出錯誤警告

                            alert(xhr.responseText);

                        }

                    }

                };

            };

        }

    </script>

    在上述代碼中，"xhr = new XMLHttpRequest();"和"xhr = new ActiveXObject("Microsoft.XMLHTTP");" 主要用于相容性的判斷，有些IE浏覽器的版本隻支援ActiveXObject對象，并且隻有IE才支援ActiveXObject對象。

    一般處理程式

    public class ProcessLogin : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            //擷取使用者名密碼

            string txtName = context.Request["name"];

            string txtPwd = context.Request["pwd"];

            if (txtName == "bjxingch" && txtPwd == "123456")

            {

                context.Response.Write("OK");

            }

            else

                context.Response.Write("使用者名密碼錯誤");

        public bool IsReusable

            get

                return false;

    }

    将異步方法封裝在myAjax方法中

    <script type="text/javascript">

        window.onload = function() {

                //調用封裝的異步方法myAjax

                myAjax("get", strUrl, function(data) {

                    if (data == "OK") {

                        window.location.href = "main.aspx";

                    } else {

                        //如果錯誤就直接彈出錯誤警告

                        alert(xhr.responseText);

                });

        };

        //封裝後的方法

        function myAjax(httpMethod, url, callback) {

            //發送異步請求

            var xhr;

            if (XMLHttpRequest) {

                //建立異步對象

                xhr = new XMLHttpRequest();

            } else {

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            //送出到背景位址，是否異步

            xhr.open(httpMethod, url, true);

            xhr.send();

            //上面發送了異步請求，然後監控頁面狀态

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    if (xhr.responseText == "OK") {

                        callback(xhr.responseText);