ajax框架

ajax框架就是把ajax进行封装的框架，使用起来比较方便。

11 个最常用的 AJAX 开发框架

1.  jQuery 

jQuery是一个轻量级的Javascript库，兼容CSS3，还兼容各种浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 

2.  MooTools 

MooTools是一个简洁、模块化、面向对象的JavaScript库。它能够帮助你更快、更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。 

3.  Prototype 

Prototype是Sam Stephenson写的一个非常优雅的JavaScript基础类库，对JavaScript做了大量的扩展，旨在简化动态Web应用程序的开发。Prototype很好的支持AJAX，国内外有多个基于此类库实现的效果库，也做得很棒。 

4.  ASP.NET AJAX 

ASP.NET AJAX是一个完整的开发框架，容易与现有的ASP.NET程序相结合，通常实现复杂的功能只需要在页面中拖几个控件，而不必了解深层次的工作原理，除此之外服务器端编程的ASP.NET AJAX Control Toolkit含有大量的独立AJAX控件和对ASP.NET原有服务器控件的AJAX功能扩展，实现起来也非常简单。 

5.  Apache Wicket 

Apache Wicket是一个针对Java的Web开发框架，与Struts、WebWork、Tapestry类似。其特点在于对HTML和代码进行了有效的分离（有利于程序员和美工的合作），基于规则的配置（减少了XML 等配置文件的使用)，学习曲线较低（开发方式与C/S相似），更加易于调试（错误类型比较少，而且容易定位）。 

6.  Dojo Tookit 

Dojo是一个强大的面向对象的JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供AJAX、events、packaging、CSS-based querying、animations、JSON等相关操作API；Dijit是一个可更换皮肤、基于模板的WEB UI控件库；DojoX包括一些创新/新颖的代码和控件：DateGrid、charts、离线应用、跨浏览器矢量绘图等。 

7.  DWR（Direct Web Remoting） 

DWR是一个Java库，可以帮助开发者轻松实现服务器端的Java和客户端的JavaScript相互操作、彼此调用。 

8.  Spry Framework 

Adobe Spry是一个面向Web设计人员而不是开发人员的AJAX框架，它使得设计人员不需要了解复杂的AJAX技巧也能在一个HTML页面中创建丰富体验成为了可能。 

9.  YUI （Yahoo User Interface） Library 

YUI（Yahoo User Interface），是由雅虎开发的一个开源的JavaScript函数库，它采用了AJAX、 DHTML和DOM等诸多技术。YUI包含多种程序工具、函数库以及网页操作界面，能够更快速地开发互动性高且丰富的网站应用程序。 

10.  Google Web Toolkit 

Google Web Toolkit (GWT) 是一个开源的Java开发框架，可以使不会使用第二种浏览器语言的开发人员编写Google 地图和 Gmail 等 AJAX 应用程序时更加轻松。 

11.  ZK Framework 

ZK是一套开源、兼容XUL/HTML标准、使用Java编写的AJAX框架，使用该框架，你无需编写JavaScript 代码就可以创建一个支持Web 2.0的富互联网应用程序（RIA）。其最大的好处是，在设计AJAX网络应用程序时，轻松简便的操作就像设计桌面程序一样。ZK包含了一个以AJAX为基础、事件驱动（event-driven）、高互动性的引擎，同时还提供了多样丰富、可重复使用的XUL与HTML组件，以及以XML为基础的使用接口设计语言ZK User-interfaces Markup Language（ZUML）。 

如何实现最基本的AJAX框架

1.首先我们要实现一个Http处理程序(HttpHandler)来响应客户端的请求：

实现自定义的HttpHandler需要实现IHttpHandler接口。该接口包含一个属性和一个方法：

      bool IHttpHandler.IsReusable 
　　void IHttpHandler.ProcessRequest(HttpContext context)

　　Example:

　　bool IHttpHandler.IsReusable

　　{

　　get { return true; }

　　}

　　void IHttpHandler.ProcessRequest(HttpContext context)

　　{

　　context.Response.Clear(); //获取要调用的方法

　　string methodName = context.Request.QueryString["me"];

　　//获取程序集信息。

　　//Czhenq.AJAX.Class1.Dencode是自定义的字符串编码方法

　　string AssemblyName = Czhenq.AJAX.Class1.Dencode(context.Request.QueryString["as"]);

　　//获取方法的参数

　　string Arguments = context.Request.QueryString["ar"]; //开始调用方法

　　Type type = Type.GetType(AssemblyName);

　　MethodInfo method = type.GetMethod(methodName,

　　BindingFlags.NonPublic | BindingFlags.Public | BindingFlags.Static | BindingFlags.Instance);

　　if (method != null)

　　{

　　//参数使用","分隔

　　string[] args = Arguments.Split(",".ToCharArray());

　　ParameterInfo[] paras = method.GetParameters();

　　object[] argument = new object[paras.Length];

　　for (int i = 0; i < argument.Length; i++)

　　{

　　if (i < args.Length) {

　　//因为XmlHttp传递过来的参数全部时String类型，所以必须进行转换

　　//这里只将参数转换为Int32,并不做其他考虑。

　　argument[i] = Convert.ToInt32(args[i]);

　　}

　　}

　　object value = method.Invoke(Activator.CreateInstance(type, true), argument);

　　if (value != null) context.Response.Write(value.ToString());

　　else context.Response.Write("error");

　　}

　　//处理结束

　　context.Response.End();
 
　2. 客户端Javascript代码：

　　       function CallMethod(AssemblyName,MethodName,Argus) 
　　{

　　var args = "";

　　for(var i=0;i

　　args += Argus[i] + ",";

　　if(args.length>0) args = args.substr(0,args.length-1);

　　var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

　　url = "AJAX/AJAX.czhenq?as=" + AssemblyName + "&me=" + MethodName +"&ar="+ args;

　　xmlhttp.open("POST",url,false);

　　xmlhttp.send();

　　alert(xmlhttp.responseText);

　　}
 
　　3.一个简单的AJAX框架已经实现。现在写段代码来测试.

　　使用自己的AJAX

　　1.新建一个网站，并应用刚才你编写的HttpHandler。并在网站的Web.config中注册你的HttpHandler,说明那些请求将使用你编写的Handler来处理。下面的内容说明:所有以"czq"结尾的请求，都将使用"Czhenq.HttpHandlerFactory"来处理。

　　type="Czhenq.HttpHandlerFactory, Czhenq.AJAX"/>

　　2.添加一个web页面，将刚才的脚本拷贝到页面中，并添加一个你要调用的方法。

　　       private string Add(int i, int j) 
　　{

　　return TextBox1.Text;

　　}
 
　　3.在页面中放置一个HiddenField控件，命名为AssemblyName。 并在Page_Load中添加如下代码：

　　       string assemblyName = Czhenq.AJAX.Class1.Encode( 
　　typeof(_Default).AssemblyQualifiedName);

　　AssemblyName.Value = assemblyName;
 
　　4.页面中添加如下脚本：    var assemblyName = document.getElementById("AssemblyName"); 
　　var argus = new Array();

　　argus.push("100");

　　argus.push("200");

　　CallMethod(assemblyName,"Add",argus)
 

不用任何的AJAX的框架完成ajax的请求；添加如下代码

<script type="text/javascript">


     　　　　　　　　   function btnclick() {
          
     　　　　　　　　　　     //创建一个xmlhttp对象，相当于WebClient
        　　　　　　　　　　    var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            
          　　　　　　　　　　  if (!xmlHttp) {
           　　　　　　　　　　　　     alert("初始化XMLHTTP时异常！");
         　　　　　　　　　　　　       return false;
      　　　　　　　　　　　      }


          　　　　　　　　　　  //准备向服务器页面  Handler1.ashx 发出  post  请求
          　　　　　　　　　　  xmlHttp.open("post", "Handler1.ashx?f=" + new Date, false); //为了避免缓存后面以当前时间做变化实现数据的缓存现象
          　　　　　　　　　　　  //注册事件，用一个匿名的函数来响应
          　　　　　　　　　　  xmlHttp.onreadystatechange = function() {
            
        　　　　　　　　　　    //readyState表示XMLHttpRequest对象的处理状态：
　　　　　　　　　　　　　　//0:XMLHttpRequest对象还没有完成初始化。
　　　　　　　　　　　　　　//1:XMLHttpRequest对象开始发送请求。
　　　　　　　　　　　　　　//2:XMLHttpRequest对象的请求发送完成。
　　　　　　　　　　　　　　//3:XMLHttpRequest对象开始读取服务器的响应。
　　　　　　　　　　　　　　//4:XMLHttpRequest对象读取服务器响应结束
          　　　　　　　　　　  if (xmlHttp.readyState == 4) {
             　　　　　　　　　  //如果状态码为200，表示成功；300表示重定向，400表示权限问题， 500表示错误；
            　　　　　　　　　　　　  if (xmlHttp.status == 200) {
                      　　　　　　　　  //responseText属性为服务器返回的文本
                      　　　　　　　　　　　　  document.getElementById("txtId").value = xmlHttp.responseText;
                 　　　　　　　　　　　   }
               　　　　　　　　　　     else {
                  　　　　　　　　　　　　     alert("AJAX服务器返回错误");
               　　　　　　　　　　　　     }
              　　　　　　　　　　  }
         　　　　　　　　　　   }
           　　　　　　　　　　 //向服务器发送请求
     　　　　　　     　　　　  xmlHttp.send();
     　　　　　　　  　　 }
   　　　　　　　　 </script>