WebForm页面使用Ajax

　关于ajax我相信做B/S开发的程序员都不陌生，在做电子商务网站，还是其他的B/S架构的系统，ajax使用的都特别频繁。那么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); 
            }  
        } 
    } 
}

　　关于Ajax，我相信做B/S开发的大虾大牛们都特别的熟练，我写这篇博客主要是针对在WebForm中使用ajax的时候，我们后台输出我们想要的数据的时候要注意的地方，那就是：我们在Response.Write("data")输出我们想要的数据，但是我们不想同时把页面的html代码也输出那怎么办?(如果异步对象把请求发送到一个ashx页面中，或者发送到一个把前台页面中的html代码给删除掉的aspx页面中，我们也不用操心如何过滤掉html代码，但开发中有的需求就是不能这样处理)，很多人用Response.End()来终止当前页面的执行。这样没错，但是要注意一点，如果你是try...catch里面使用了Response.End()的话，会被捕捉到一个异常:线程被中止"。这是因为：

Response.End 方法终止页的执行，并将此执行切换到应用程序的事件管线中的Application_EndRequest 事件,同时抛出ThreadAbortException 异常，异常信息为“正在中止线程”。

那如果我在WebForm中使用ajax，并且是把请求发送给本页面，同时我在后台页面中只输出我想要的数据，但不想输出页面的html代码那怎么办呢？这个我在上面的代码中写的很清楚了，我提供了三种解决方案，有碰到这个问题的各位朋友，可以参考我在ResponseEnd.aspx.cs里面写的代码，三种方式都能达到我们预期的效果。

　　深入去学习ajax的话，我觉得这里头的学问很大，哈哈，小弟不才，写了这篇博客，希望各位不要笑话。如果哪位觉得可以看看的话就看看，觉得不堪的话，就一笑置之吧，呵呵。

posted @ 2012-01-29 17:27 Chaoa 阅读(8724) 评论(5) 编辑收藏举报

刷新页面返回顶部

WebForm页面使用Ajax

公告