ASP.Net之笔记09-05（原生对象异步请求）

异步登录案例和封装异步请求
1、使用JS的原生对象，做异步请求的处理。代码如下，
   1）eg：
    <script type="text/javascript">
        window.onload = function(){
            //窗体元素全部加载完毕，触发该事件
            
            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");
                var strUrl = "ProcessLogin.aspx?name=" + txtName.Value + "&pwd=" + txtPwd.Value;
                
                xhr.open("Get", strUrl, true);//true,表示这是一个异步请求
                xhr.send();//发送请求。
                
                //监听状态改变事件
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 && xhr.status == 200)
                    {
                        if(xhr.responseText == "ok")
                        {
                            window.location.href = "MainFrame.aspx";
                        }
                        else
                        {
                            alert(xhr.responseText);
                        }
                    }
                }
            }
        }
    </script>
   2）如果有多个异步请求，这个代码量有点大，我们来封装一个。
        eg：
        <script type="text/javascript">
        window.onload = function(){
            //窗体元素全部加载完毕，触发该事件
            
            var btnLogin = document.getElementById("btnLogin");
            btnLogin.onclick = function(){
                //获取页面数据，拼接到连接的后面。
                var txtName = document.getElementById("txtName");
                var txtPwd = document.getElementById("txtPwd");
                var strUrl = "ProcessLogin.aspx?name=" + txtName.Value + "&pwd=" + txtPwd.Value;
                myAjax("Get", strUrl, function(data){
                    if(data == "ok")
                    {
                        window.location.href = "MainFrame.aspx";
                    }
                    else
                    {
                        alert(data);
                    }
                });
            }
        }
        //httpMethod:http请求方法（Post、Get）；url：请求的地址；callback：回调函数
        function myAjax(httpMethod, url, callback)
        {
            //发起请求
            var xhr;
            if(XMLHttpRequest)
            {
                xhr = new XMLHttpRequest();
            }
            else
            {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
                        
            xhr.open("Get", url, true);//true,表示这是一个异步请求
            xhr.send();//发送请求。
            
            //监听状态改变事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200)
                {
                    callback(xhr.responseText);
                }
            }
        }
    </script>
2、用WebForm（aspx）页面，作为异步请求的处理程序。我们只需要在后台进行逻辑的处理，在返回的时候，无需将前台的页面返回给浏览器。
    1）如果使用了页面，必然要走页面的声明周期。但是我们无需把多余的内容返回给客户端。写法如下，
        eg：
            Response.Clear();//清空之前的响应内容
            Response.Write("ok");
            Response.End();//结束响应，立即向客户端发送响应内容。后续的响应将不再执行。这样就可以避免将页面前端的控件内容也发送到前端。
    2）上述的方式，很不方便，我们直接使用  一般处理程序就可以了。性能不仅得到了优化，也减少了我们少写两行代码。