AJAX应用(一)

AJAX已经发展很久了,但自己还没有应用过,今天拿出一点时间,做了一个简单的DEMO,适合与我一样刚刚接触AJAX的朋友

至于什么是AJAX(Asynchronous JavaScript and XML),网上介绍的很多,这里就不再说了。总之它是多种技术的综合。包括 Javascript,XHTML,CSS,DOM,XML,XSTL,XMLHttpRequest.

看了这么多技术,是不是很头疼?没关系,因为现在已经有很多的AJAX工具包了,比如微软的Atlas.不过这里没有用它,因为以前已经下了一个ajax.net包(版本:5.7.22.2--版本比较老),为了省事,就用这个吧。可以在下面的网址下载   http://ajax.schwarz-interactive.de/ 

需要新版本的朋友可以去这里 http://www.schwarz-interactive.de/

好了,开始工作,我用的是.NET2003. 新建项目AjaxTest  然后将刚才下载的ajax.dll引用到项目中。

首先在web.config文件中添加以下代码:

<httpHandlers>
   <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory,Ajax" />
</httpHandlers>

/* 它的意思是所有的ajax/*.ashx请求都由Ajax.PageHandlerFactory处理,而不是由默认的System.Web.UI.PageHandlerFactory来处理。 */

再在Global.asax.cs文件中添加如下代码:

protected void Application_Start(Object sender, EventArgs e)
{
 Ajax.Utility.HandlerPath = "ajax"; //当前使用的Ajax.NET版本需要在这里加上这一句,新版的还没体验过
}

现在我们先在项目中添加一个类 test  然后为这个类写一个方法 ret   此方法是由客户端调用的.代码如下:

using System;

namespace AjaxTest
{
 /// <summary>
 /// test 的摘要说明。
 /// </summary>
 public class test
 {
  public test()
  {
  }
  [Ajax.AjaxMethod]     
  public string ret(string name)
  {
   string s=name+"  您好!";
   return s;
  }
 }
}

/*它和普通的服务器方法唯一不同的地方就是必须要在方法的上面添加个[Ajax.AjaxMethod],此方法是由客户端调用的,接受客户端传过来的name并返回一个字符串s   */

最后,我们在WebForm1中写javascript脚本,用于调用服务器端函数(ret()),具体代码如下,

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="AjaxTest.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 <HEAD>
  <title>WebForm1</title>
  <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
  <meta content="C#" name="CODE_LANGUAGE">
  <meta content="JavaScript" name="vs_defaultClientScript">
  <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
 

 <script type="text/javascript">
   function fun(s)
   {
   var name=s.toString();         //将文本框中的数据转换为字符串。
    test.ret(name,get_obj);       //调用服务器端方法ret(),其中test为类名。

   }  

 function get_obj(obj)  //obj是一个响应对象,它是object类型。
   {
    document.all('Text2').value=obj.value;   //注意要加上value属性。
   }
  </script>


 </HEAD>
 <body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">
   <INPUT id="Text1" style="Z-INDEX: 101; LEFT: 304px; POSITION: absolute; TOP: 160px" type="text"
    name="Text1"><INPUT id="Text2" style="Z-INDEX: 102; LEFT: 304px; POSITION: absolute; TOP: 208px" type="text"
    name="Text2"><INPUT dataFld="Button1" id="Button1" style="Z-INDEX: 103; LEFT: 344px; POSITION: absolute; TOP: 256px"
    onclick="javascript:fun(document.all('Text1').value);" type="button" value="确定"></form>
 </body>
</HTML>

/*  我们在窗体中添加了两个 文本框(HTML控件) 和一个 Button(HTML控件)。当点击Button时,调用客户端函数 fun(),并将第一个文本框中的值传递过去。

test.ret(name,get_obj); 调用服务器端的函数ret,参数name是服务器方法所需要的参数,参数get_obj 是用于处理服务器响应的客户端函数。叫做回调函数。这个参数(get_obj)就作为客户端函数名,用于处理服务器端返回的数据。如果服务器返回数据的话,就需要定义这个参数,而get_obj会接受一个服务器发送过来的响应对象(obj),它有三个属性。Value属性(服务器端函数实际返回的值,包括int,string,double,bool,DataTime,DataSet,DataTable,自定义类等类型),Error属性,Request属性,Conte 属性

*/

按F5运行,当我们在第一个文本框中输入name 时,点击 确定 后第二个文本框会显示 name 您好!。我们会发现网页根本没有刷新。呵呵,成功!

这个DEMO里,Ajax.NET包装器只是处理了服务器端返回的string类型的数据,其实它还支持部分复杂类型,如DataSet,DataTable,以及 自定义类等。对于不能正确返回的其他类型,都返回它的 ToString值。但我们可以创建对象转换器,使服务器和客户端之间传递复杂对象。没有体验新版的AJAX包装器,不知道这方面做的怎么样了。


有时间再研究一下,再让我们一同探讨吧!


posted @ 2007-01-17 00:51  随风而逝  阅读(318)  评论(0编辑  收藏  举报