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的话,我觉得这里头的学问很大,哈哈,小弟不才,写了这篇博客,希望各位不要笑话。如果哪位觉得可以看看的话就看看,觉得不堪的话,就一笑置之吧,呵呵。

转载于:https://www.cnblogs.com/chaoa/archive/2012/01/29/2331314.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值