现在的位置: 首页 > 综合 > 正文

AJAX.dll使用教学贴

2013年12月09日 ⁄ 综合 ⁄ 共 3928字 ⁄ 字号 评论关闭

原创
 
AJAX.dll使用教学贴
收藏

这篇文章我不会引用网上任何一篇文章的原话,全是自己的感受,相信会帮助不少想知道AJAX是什么东西和怎么应用的人,因为我也是初学者,所以写的
可能会有不对的,不对的地方希望老程序员们能指出来千万不要误人子弟,这也是我写这篇文章的另一个目的,好开始

注:我是使用
ASP.NET的

AJAX的长篇理论我不想说,什么全称,什么DOM,XMLHTTP什么的网上资料一大堆自己去查,我们了解一下就
行。

[不用AJAX的页面不叫WEB2.0,是WEB2.0的页面都会用AJAX的]
使用AJAX的目的没别的,就是实现无
刷新更新页面,所谓异步就是不用执行后台程序,前台就会得到相应的改变值,从而实现前台页面改变数据的目的,而这个改变的值还是通过后CS代码操作改变
的,听起来会很不可意,这是怎么作到的那,听我慢慢说。

经过我这几天的研究,在ASP.NET里实现AJAX的方法可不只一种
1.
有直接用框架的:这种我比较喜欢,因为比较干净,用自己的框架,我试过Ajaxpro和Prototype,这两种我用过了,觉得不错,以后我还会继续
用,Jquery其实也属于这一范畴,今天研究半天,没太明白,可能是我没找到现成的框架吧,所以就不研究了
2.还有一种就是用微软专门为
Ajax开发的控件包,叫作ASP.NET AJAX Control
Toolkit,这个我没太研究,网上有相关资料,想知道的可以自己去查,里面有很多现成的控件可以实现AJAX。
3.用VS2005的可以下
个ASPAJAXExtSetup.msi,里面有updatepanel控件也可以实现AJAX,这个我只初步试了一下,也好用,不过原理还不太明白。

以上三种是我收集到的一些AJAX的实现方法,我要讲的是第一种方法的应用,因为第一种能叫你明白AJAX的运行原理,比较适合初学
者。
我主要讲Ajaxpro,这是个组件,必须去网上下载,其实就是一个Ajaxpro.dll文件,注意,网上有两种一种叫Ajax.dll
一种叫Ajaxpro.dll,这两种功能上是一样的,就是添加引用的语句有些不同,下面我会分别说的。其实用AJAX都要下相关组件的,开始我也不习惯
下什么插件,可后来还是下了,不下不行呀。我下到的是Ajax.dll,所以讲时以Ajax.dll为准。

应用篇,这以下的东西会借鉴网上其他人的文章,在这里声明一下

1.
先把Ajax.dll添加引用到项目中,别告诉我不会,如果连这个也不会就太那个了,和添加其他DLL一样,在项目上右击,菜单上有个[添加引用],然后
一步一步把那个.DLL文件添加进来,之后你会在项目的引用中看到那个Ajax.dll就是添加成功了
2.修改Web.config。在
<system.web> 元素中添加以下代码。这里的Ajax.dll和Ajaxpro.dll引用方法是不一样的,一定要注意
<configuration>

<system.web>
<httpHandlers>
<!--
Ajax.dll的配置文件写法为,我下载到的是这个 -->
<add verb="POST,GET"
path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
<!--
AjaxPro.dll的配置文件写法为,根据你下载到的DLL文件选择不同的配置语句-->
<add verb="*"
path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>

</system.web>
</configuration>

3对AjaxPro用到的
页Page_Load事件中进行运行时注册。如:
protected void Page_Load(object sender,
EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(_Default));//
是Ajax.dll的
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));//Ajaxpro.dll

}
//这的_Default是指页面类的类名,就是这个页面的名字。如是放在命名空间,则需要写上完整的命名空间
(如:namespaces._Default)

4创建服务器端方法
[Ajax.AjaxMethod]//这句一定要有,
如果你是Ajaxpro.dll就写成[AjaxPro.AjaxMethod]
public string getValue(int
a,int b)
{
//该方法我们将实现从客户端传入两个数,在服务器端相加计算后返回到客户端。这里可以写在原来的页后台中也可以
单独写一个类。
return
Convert.ToString(a+b);//这里返回的就是前台得到的值,反正参数已经进CS文件了,想怎么操作就怎么操作,包括读库都可以。
}

5 客户端调用。
<%@ Page language="c#"
Codebehind="WebPage1.aspx.cs" AutoEventWireup="false"
Inherits="Web.WebPage1" %>
<script language="javascript">
function
getValue()
{

//这里如果是AjaxPor.dll就加Web._Default.getValue,如果是
Ajax.dll就不用加命名空间如下
_Default.getValue(1,2,getGroups_callback);//该处即调用
服务器端的_Default.getValue方法。
//_Default就是写getValue的那个类,如果写在本页CS里就是
WebPage1.getValue,1和2是参数。
//这在里边getGroups_callback指定的是个回调函数,以接受服务器端处
理完后返回客户端结果。
}

//这个方法用户接受并处理服务器端返回的结果。
function
getGroups_callback(response)
{
var
dt=response.value;//这个值就是最终传回来的值,想怎么用就怎么用,反正回前台了。
document.getElementById("Div_1").innerHTML=dt;

}
</script>
<body>
<div id="Div_1">
</div>
<button onclick=getValue()>开始 </botton>
</body>

现在我们来分析一下如果点击开始按钮都执行了些什么,首先在前台执行getValue()函数,getValue函数里的
_Default.getValue(1,2,getGroups_callback);会执行后台的CS函数,我觉得这里才是AJAX的精髓,因为这里
的执行是通过Ajax组件无刷新的执行后台CS函数的,通常我们要调用后台的CS函数都是通过正常方法刷新一下页面执行后台绑定好的CS函数,这里用
Ajax就不用刷新的执行后台的那个getValue函数了,1和2是参数,要在getValue里计算了,getGroups_callback这个参
数是必须要有了,要不然你在CS里传东西回来用什么接收呀,getValue函数在后台计算出结果来后,这种计算已经在后台了,想怎么算就怎么算,你想读
库都没问题,然后通过return返回值,这个值是什么都行,那怕是一段" <table> <tr>
<td>HelloWorld </td> </tr>
</table>"这样的HTML代码也行,前台用getGroups_callback()这个JS函数接收这个值,然后就是前台调用了,
想怎么用就怎么用了呗,随你喜欢,这就是AJAX运行的一个过程,从前台无刷新到后台,计算后再返回前台

 

 

 

 

 

 

 

 

 

 

//总结:  

             1.引用ajax.dll     

             2.配置web.config

             3.cs 后台pageload注册

 

 

public partial class _Default
: System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Ajax.Utility.RegisterTypeForAjax(typeof(_Default
));
    }
    [Ajax.AjaxMethod]
      //这个不能少

    public string getvalue(string a)
    {

        return "恭喜你,回传成功!!";

    }
}

 

 

 

前台js 调用后台事件

 

<script type="text/javascript">
        function getGroups_callback(response
) {
            var dt = response.value; //这个值就是最终传回来的值,想怎么用就怎么用,反正回前台了。
            $("#abc").val(dt);
        }
        function getvalue() {
            _Default.getvalue
("1", getGroups_callback);            //  此处getvalue 为后台事件的名称,“1”为传的   参数数,getGroups_callback 为客户端获取 回传值的 js函数

        }
   
    </script>

 

抱歉!评论已关闭.