ajax框架

ajax框架就是把a(bǔ)jax進(jìn)行封裝的框架，使用起來比較方便。

11 個(gè)最常用的 AJAX 開發(fā)框架

1.  jQuery 

jQuery是一個(gè)輕量級(jí)的Javascript庫，兼容CSS3，還兼容各種瀏覽器。jQuery使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。 

2.  MooTools 

MooTools是一個(gè)簡潔、模塊化、面向?qū)ο蟮腏avaScript庫。它能夠幫助你更快、更簡單地編寫可擴(kuò)展和兼容性強(qiáng)的JavaScript代碼。Mootools跟prototypejs相類似，語法幾乎一樣。但它提供的功能要比prototypejs多，而且更強(qiáng)大。比如增加了動(dòng)畫特效、拖放操作等等。 

3.  Prototype 

Prototype是Sam Stephenson寫的一個(gè)非常優(yōu)雅的JavaScript基礎(chǔ)類庫，對(duì)JavaScript做了大量的擴(kuò)展，旨在簡化動(dòng)態(tài)Web應(yīng)用程序的開發(fā)。Prototype很好的支持AJAX，國內(nèi)外有多個(gè)基于此類庫實(shí)現(xiàn)的效果庫，也做得很棒。 

4.  ASP.NET AJAX 

ASP.NET AJAX是一個(gè)完整的開發(fā)框架，容易與現(xiàn)有的ASP.NET程序相結(jié)合，通常實(shí)現(xiàn)復(fù)雜的功能只需要在頁面中拖幾個(gè)控件，而不必了解深層次的工作原理，除此之外服務(wù)器端編程的ASP.NET AJAX Control Toolkit含有大量的獨(dú)立AJAX控件和對(duì)ASP.NET原有服務(wù)器控件的AJAX功能擴(kuò)展，實(shí)現(xiàn)起來也非常簡單。 

5.  Apache Wicket 

Apache Wicket是一個(gè)針對(duì)Java的Web開發(fā)框架，與Struts、WebWork、Tapestry類似。其特點(diǎn)在于對(duì)HTML和代碼進(jìn)行了有效的分離（有利于程序員和美工的合作），基于規(guī)則的配置（減少了XML 等配置文件的使用)，學(xué)習(xí)曲線較低（開發(fā)方式與C/S相似），更加易于調(diào)試（錯(cuò)誤類型比較少，而且容易定位）。 

6.  Dojo Tookit 

Dojo是一個(gè)強(qiáng)大的面向?qū)ο蟮腏avaScript框架。主要由三大模塊組成：Core、Dijit、DojoX。Core提供AJAX、events、packaging、CSS-based querying、animations、JSON等相關(guān)操作API；Dijit是一個(gè)可更換皮膚、基于模板的WEB UI控件庫；DojoX包括一些創(chuàng)新/新穎的代碼和控件：DateGrid、charts、離線應(yīng)用、跨瀏覽器矢量繪圖等。 

7.  DWR（Direct Web Remoting） 

DWR是一個(gè)Java庫，可以幫助開發(fā)者輕松實(shí)現(xiàn)服務(wù)器端的Java和客戶端的JavaScript相互操作、彼此調(diào)用。 

8.  Spry Framework 

Adobe Spry是一個(gè)面向Web設(shè)計(jì)人員而不是開發(fā)人員的AJAX框架，它使得設(shè)計(jì)人員不需要了解復(fù)雜的AJAX技巧也能在一個(gè)HTML頁面中創(chuàng)建豐富體驗(yàn)成為了可能。 

9.  YUI （Yahoo User Interface） Library 

YUI（Yahoo User Interface），是由雅虎開發(fā)的一個(gè)開源的JavaScript函數(shù)庫，它采用了AJAX、 DHTML和DOM等諸多技術(shù)。YUI包含多種程序工具、函數(shù)庫以及網(wǎng)頁操作界面，能夠更快速地開發(fā)互動(dòng)性高且豐富的網(wǎng)站應(yīng)用程序。 

10.  Google Web Toolkit 

Google Web Toolkit (GWT) 是一個(gè)開源的Java開發(fā)框架，可以使不會(huì)使用第二種瀏覽器語言的開發(fā)人員編寫Google 地圖和 Gmail 等 AJAX 應(yīng)用程序時(shí)更加輕松。 

11.  ZK Framework 

ZK是一套開源、兼容XUL/HTML標(biāo)準(zhǔn)、使用Java編寫的AJAX框架，使用該框架，你無需編寫JavaScript 代碼就可以創(chuàng)建一個(gè)支持Web 2.0的富互聯(lián)網(wǎng)應(yīng)用程序（RIA）。其最大的好處是，在設(shè)計(jì)AJAX網(wǎng)絡(luò)應(yīng)用程序時(shí)，輕松簡便的操作就像設(shè)計(jì)桌面程序一樣。ZK包含了一個(gè)以AJAX為基礎(chǔ)、事件驅(qū)動(dòng)（event-driven）、高互動(dòng)性的引擎，同時(shí)還提供了多樣豐富、可重復(fù)使用的XUL與HTML組件，以及以XML為基礎(chǔ)的使用接口設(shè)計(jì)語言ZK User-interfaces Markup Language（ZUML）。 

如何實(shí)現(xiàn)最基本的AJAX框架

1.首先我們要實(shí)現(xiàn)一個(gè)Http處理程序(HttpHandler)來響應(yīng)客戶端的請(qǐng)求：

實(shí)現(xiàn)自定義的HttpHandler需要實(shí)現(xiàn)IHttpHandler接口。該接口包含一個(gè)屬性和一個(gè)方法：

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

　　Example:

　　bool IHttpHandler.IsReusable

　　{

　　get { return true; }

　　}

　　void IHttpHandler.ProcessRequest(HttpContext context)

　　{

　　context.Response.Clear(); //獲取要調(diào)用的方法

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

　　//獲取程序集信息。

　　//Czhenq.AJAX.Class1.Dencode是自定義的字符串編碼方法

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

　　//獲取方法的參數(shù)

　　string Arguments = context.Request.QueryString["ar"]; //開始調(diào)用方法

　　Type type = Type.GetType(AssemblyName);

　　MethodInfo method = type.GetMethod(methodName,

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

　　if (method != null)

　　{

　　//參數(shù)使用","分隔

　　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) {

　　//因?yàn)閄mlHttp傳遞過來的參數(shù)全部時(shí)String類型，所以必須進(jìn)行轉(zhuǎn)換

　　//這里只將參數(shù)轉(zhuǎn)換為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");

　　}

　　//處理結(jié)束

　　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.一個(gè)簡單的AJAX框架已經(jīng)實(shí)現(xiàn)?，F(xiàn)在寫段代碼來測(cè)試.

　　使用自己的AJAX

　　1.新建一個(gè)網(wǎng)站，并應(yīng)用剛才你編寫的HttpHandler。并在網(wǎng)站的Web.config中注冊(cè)你的HttpHandler,說明那些請(qǐng)求將使用你編寫的Handler來處理。下面的內(nèi)容說明:所有以"czq"結(jié)尾的請(qǐng)求，都將使用"Czhenq.HttpHandlerFactory"來處理。

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

　　2.添加一個(gè)web頁面，將剛才的腳本拷貝到頁面中，并添加一個(gè)你要調(diào)用的方法。

　　       private string Add(int i, int j) 
　　{

　　return TextBox1.Text;

　　}
 
　　3.在頁面中放置一個(gè)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的請(qǐng)求；添加如下代碼

<script type="text/javascript">


     　　　　　　　　   function btnclick() {
          
     　　　　　　　　　　     //創(chuàng)建一個(gè)xmlhttp對(duì)象，相當(dāng)于WebClient
        　　　　　　　　　　    var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            
          　　　　　　　　　　  if (!xmlHttp) {
           　　　　　　　　　　　　     alert("初始化XMLHTTP時(shí)異常！");
         　　　　　　　　　　　　       return false;
      　　　　　　　　　　　      }


          　　　　　　　　　　  //準(zhǔn)備向服務(wù)器頁面  Handler1.ashx 發(fā)出  post  請(qǐng)求
          　　　　　　　　　　  xmlHttp.open("post", "Handler1.ashx?f=" + new Date, false); //為了避免緩存后面以當(dāng)前時(shí)間做變化實(shí)現(xiàn)數(shù)據(jù)的緩存現(xiàn)象
          　　　　　　　　　　　  //注冊(cè)事件，用一個(gè)匿名的函數(shù)來響應(yīng)
          　　　　　　　　　　  xmlHttp.onreadystatechange = function() {
            
        　　　　　　　　　　    //readyState表示XMLHttpRequest對(duì)象的處理狀態(tài)：
　　　　　　　　　　　　　　//0:XMLHttpRequest對(duì)象還沒有完成初始化。
　　　　　　　　　　　　　　//1:XMLHttpRequest對(duì)象開始發(fā)送請(qǐng)求。
　　　　　　　　　　　　　　//2:XMLHttpRequest對(duì)象的請(qǐng)求發(fā)送完成。
　　　　　　　　　　　　　　//3:XMLHttpRequest對(duì)象開始讀取服務(wù)器的響應(yīng)。
　　　　　　　　　　　　　　//4:XMLHttpRequest對(duì)象讀取服務(wù)器響應(yīng)結(jié)束
          　　　　　　　　　　  if (xmlHttp.readyState == 4) {
             　　　　　　　　　  //如果狀態(tài)碼為200，表示成功；300表示重定向，400表示權(quán)限問題， 500表示錯(cuò)誤；
            　　　　　　　　　　　　  if (xmlHttp.status == 200) {
                      　　　　　　　　  //responseText屬性為服務(wù)器返回的文本
                      　　　　　　　　　　　　  document.getElementById("txtId").value = xmlHttp.responseText;
                 　　　　　　　　　　　   }
               　　　　　　　　　　     else {
                  　　　　　　　　　　　　     alert("AJAX服務(wù)器返回錯(cuò)誤");
               　　　　　　　　　　　　     }
              　　　　　　　　　　  }
         　　　　　　　　　　   }
           　　　　　　　　　　 //向服務(wù)器發(fā)送請(qǐng)求
     　　　　　　     　　　　  xmlHttp.send();
     　　　　　　　  　　 }
   　　　　　　　　 </script>