不用组件实现Ajax效果

2016-02-19 18:25 8 1 收藏

下面图老师小编跟大家分享不用组件实现Ajax效果,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发 】

现在.NET的Ajax组件确实不少了,微软的ajax extensions用起来很方便,一个UpdatePanel就可以搞定一切。不过,可能有些朋友更愿意自己来写。那么在.NET里,你是否知道ICallbackEventHandler呢?

大家应该都知道ASP.NET页面调用时的几种方式:Postback/Cross-page posting/Server transfer/Callback,如果你还不太了解,你可以看看MSDN:How to: Determine How ASP.NET Web Pages Were Invoked

现在要说的,就是Callback这种调用方式。
简单的说,使用Callback可以得到你平常看到那么Ajax效果,即不刷新整个页面,只更新其中一个部分。

使用Callback,只需要做以下4步:

1、在你的页面中继承System.Web.UI.ICallbackEventHandler接口。

public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
}
#region ICallbackEventHandler Members
public string GetCallbackResult()
{
}
public void RaiseCallbackEvent(string eventArgument)
{
}
#endregion
}

如果你没有使用code-behind,那你也可以在aspx页面顶部加入下面的代码:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

2、在前台写一段自定义的javascript,更新页面

这一段javascript用来更新页面的某个局部,就像你平常操作的一样,写些document.getElementById("xxx").innerHTML="working on your request...."。

你可能有些迷糊,就得到了吗?连个什么XMLHttpRequest都没有哩……

3、在Page_Load中再注册一段javascript

string script = Page.Clientscript.GetCallbackEventReference(this, "arg", "GetFlag", "");
Page.Clientscript.RegisterClientscriptBlock(this.GetType(), .......//省略了一大串

上面的GetCallbackEventReference是用来得到客户端函数的引用,发起一个callback到服务器端的,你不必知道详细内容。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

你只需要了解:

第一个参数填this,用来handle客户端的callback的,它必须继承ICallbackEventHandler接口并提供RaiseCallbackEvent方法,我们已经在继承了这个接口,上面第一点中的代码也有RaiseCallbackEvent方法,只是还没有具体写内容呢。
第二个参数就是那个 从客户端传到服务器端的参数。如果你想要注册的检查用户是否可用,那么这里的值就是用户输的那个值。
第三个参数是前台的javascript函数名,在第二步中我们写的名字是:GetFlag。当数据好了,这个javascript函数就会用到。
第四个参数一般用不上。
返回值:一个函数的名字,是客户端调用的函数名。这个函数会调用到服务器端了。

4、调用你的函数。

上面一定是 onclick="callServer()"吗?呵呵,这要看你了,你在Page.Clientscript.RegisterClientscriptBlock注册的什么javascript函数名字,就是什么名字了。(在第3步的第二行code中)

来源:http://www.tulaoshi.com/n/20160219/1617625.html

延伸阅读
标签: Web开发
客户端部分: 代码如下: html head meta http-equiv="Content-Type" content="text/html"/ script language="javascript" var ajax; function createAjax() { if(window.ActiveXObject) { try { return new ActiveXObject("Msxm12.XMLHTTP"); } catch(e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } cat...
标签: Web开发
Adobe™ Flash™ Ajax Video (FAVideo) 组件是一个轻量级的,开源的用 Ajax+Flash 来播放flv的组件。它可以运用在 Ajax 的程序里。它可以使在 Javascript 里控制 Video 像在 Flash 那样容易。 html head   titleVarious ways to work with FAVideo /title   script src="AC_RunActiveContent.js"...
标签: Web开发
代码如下: document.write('DIV id="loadingg"  style="HEIGHT:65px; WIDTH: 205px;POSITION: absolute; Z-INDEX:1000;border:3px #fff solid;text-align:center; font-size:12px; font-family:Arial, Helvetica, sans-serif;color:#660000;background:#222;opacity:.7;-m...
标签: Web开发
由于查询返回的数据量很大,超过10w条数据,因此需要对页面查询功能进行优化。放弃原有程序中使用DataGrid的做法,自己编写分页显示模块。     首先在页面上添加几个DIV:         div id="div_trackpoint" style=" border:solid 1px gray; height:230px; width:99%; overflow-y...
标签: Web开发
主要函数: 代码如下: !-- function getObject(objectId) {      if(document.getElementById && document.getElementById(objectId)) {     // W3C DOM        return document.getElementById(objectId); ...

经验教程

954

收藏

18
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部