理解才能創新 輕松打造自己的AJAX框架_AJAX教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      

      推薦：站長推薦：Ajax技術概述與現狀應用
      AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。 Ajax技術是目前在瀏覽器中通過JavaScript腳本可以使用的所有技術的集合。Ajax并沒有創造出某種具體的新技術，它所使用的所有技術都是在
      本文實現的只是一個最基本的AJAX框架，雖然AJAX并不是什么新技術，但是做為一個框架并不是一篇文章就能說明白的。寫這篇文章的目的:希望能幫助初學者更好的學習、運用AJAX框架。

      　　我始終相信只有你真正理解了一種技術，了解了技術本身,你才能更好、更靈活的使用它。一個程序員對技術的了解并不能僅僅停留在對技術的應用上。

      　　環境：Window Xp sp2 + .Net FramwWork 2.0.50727。

      　　Asp.Net 2.0自帶的客戶端回調

      　　Asp.Net 2.0已經發布。2.0有了許多新特性，客戶端回調就是其中之一。客戶端回調允許我們不經過回發而調用服務器端的方法，與AJAX提供的功能是一致的，但是不如AJAX靈活，AJAX可以自定義調用的方法， 2.0自帶的回調功能卻不行。

      　　要使用客戶端回調功能必須實現System.Web.UI.IcallbackEventHandler接口。

      　　這個接口包含兩個方法：

       
      //客戶端回調時固定調用此方法
      public void RaiseCallbackEvent(String eventArgument)
      //執行完RaiseCallbackEvent后將調用此方法。此方法的返回值將被發回客戶端
      public string GetCallbackResult()

      　　例一：

       
      .cs：
      String cbReference = Page.ClientScript.GetCallbackEventReference(this,"arg", "ReceiveServerData", "context");
      String callbackScript;
      callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + "} ;";
      Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"CallServer", callbackScript, true);
      javascript：
      <script type="text/javascript">
      function LookUpStock()
      {
      　var product = "";
      　var lb = document.forms[0].ListBox1;
      　if(lb.selectedIndex >= 0)
      　　product = lb.options[lb.selectedIndex].text;
      　　CallServer(product, ""); 
      }
      function ReceiveServerData(rValue) { Results.innerText = rValue; }
      </script>
       

      　　更多內容查看MSDN。
       
      　　AJAX介紹

      　　AJAX并不是一種新的技術，而是一些已有技術的有機結合，主要包括：XmlHttp、Reflect。一個AJAX框架基本上包括：一個自定義的HttpHandler、一段JavaScript代碼。

      　　AJAX運行機制：

      　　以前我們使用XmlHttp實現無刷新頁面的時候，是用XmlHttp來請求一個隱藏的頁面，使用(Asp/Asp.Net)自帶的HttpHandler，而在AJAX中，我們請求的也是一個隱藏的頁面，不同的是這個頁面的HttpHandler是由我們自己來實現。 打造自己的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<Argus.length;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"來處理。

       
      <httpHandlers>
      <add verb="POST,GET" path="*.czq" type="Czhenq.HttpHandlerFactory, 
      Czhenq.AJAX"/>
      </httpHandlers>

      　　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簡單的理解為:AjAx是對JavaScript調用XmlHttp的封裝.它改變的是代碼書寫方式.

      　　附 Encode 與 Dencode實現:

       
      public static string Encode(string value)
      {
      　byte[] bytes = ASCIIEncoding.ASCII.GetBytes(value); 
      　return Convert.ToBase64String(bytes);
      }
      public static string Dencode(string value)
      {
      　byte[] bytes = Convert.FromBase64String(value);
      　return ASCIIEncoding.ASCII.GetString(bytes);
      }
       
      作者：陳振泉  來源：天極網
      分享：剖析AJAX成為“時尚”的十大主要理由
      現在說AJAX是目下最時髦的技術一點不假，當然也有人認為其中有很多炒作的成分；估計兩邊誰也不能說服誰。因此讓我們一起分析為什么AJAX在這個時候出現，以及它為什么會繼續成長并且仍將徘徊一段時間。簡言之，我把它歸結為下面列舉的十個最主要的理由。 按數
      


      

      


      來源：模板無憂//所屬分類：AJAX教程/更新時間：2012-06-08


      


      



      


      



      相關AJAX教程：