Ajax在ASP.NET的应用原理

Asynchronous JavaScript andXML(Ajax)最近掀起的高潮，要完全归功于Google在Google Suggest和Google Maps中的使用。对ASP.NET而言，Ajax不需要回传就能进行服务器端处理，从而使客户机(浏览器)具有丰富的服务器端能力。换句话说，它为异步指派和处理请求与服务器响应提供了一个框架。Ajax利用了一些不是很新颖的已有技术，但是对这些技术(加到一起就是Ajax)的爱好最近突然升温。

  

 

 

 

 

 

 

 

 

 

 

 

 

 publicint Add(int firstNumber, int secondNumber)

 {

   return firstNumber + secondNumber;

 }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 <configuration>

   <system.web>

    <httpHandlers>

<addverb="POST,GET" path=" Ajax /*.ashx"

type="Ajax.PageHandlerFactory, Ajax "/>

    </httpHandlers>

    

   <system.web>

</configuration>

 

 

 

 

 

 

 

 

 

 

 publicclass Index : System.Web.UI.Page{

   private void Page_Load(objectsender, EventArgs e){

Ajax.Utility.RegisterTypeForAjax(typeof(Index));

//

   }

   //

 }

 

 

 

 

 

 

 <scriptlanguage="javascript" src="Ajax/common.ashx">

 <scriptlanguage="javascript"

 src="Ajax/Namespace.PageClass,AssemblyName.ashx">

 

 

 

 

 

 

 

 

 

 

 <%@ PageInherits="AjaxPlay.Sample" Codebehind="sample.aspx.cs"  %>

 

 

   <scriptlanguage="javascript" src="Ajax/common.ashx">

   <scriptlanguage="javascript"

src="Ajax/AjaxPlay.Sample,AjaxPlay.ashx">

 

    <form id="Form1" method="post" runat="server">

    </form>   

 

 

 

 

 

 

 

 

 

 

 

 

 [Ajax.AjaxMethod()]

 publicint ServerSideAdd(int firstNumber, int secondNumber)

 {

   return firstNumber + secondNumber;

 }

 

 

 

 

 

 

 

 <%@ PageInherits="AjaxPlay.Sample" Codebehind="sample.aspx.cs"  %>

 

 

   <scriptlanguage="javascript" src="Ajax/common.ashx">

   <scriptlanguage="javascript"

src="Ajax/AjaxPlay.Sample,AjaxPlay.ashx">

 

    <form id="Form1" method="post" runat="server">

<scriptlanguage="javascript">

var response = Sample.ServerSideAdd(100,99);

alert(response.value);

    </form>   

  

 

 

 

 

 

 

 

 

 Sample.ServerSideAdd(100,99,ServerSideAdd_CallBack);

 

 functionServerSideAdd_CallBack(response){

  if(response.error != null){

   alert(response.error);

   return;

  }

  alert(response.value);

 }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 <scriptlanguage="JavaScript">

 //Asynchronous callto the mythical "GetDataSet" server-sidefunction

 functiongetDataSet(){

   AjaxFunctions.GetDataSet(GetDataSet_callback);

 }

 functionGetDataSet_callback(response){

   var ds =response.value;

   if(ds != null && typeof(ds) == "object"&& ds.Tables != null){

     var s = new Array();

     s[s.length] = "<tableborder=1>";

     for(var i=0;i<ds.Tables[0].Rows.length; i++){

s[s.length] = "<tr>";

s[s.length] ="<td>" + ds.Tables[0].Rows[i].FirstName +"</td>";

s[s.length] ="<td>" + ds.Tables[0].Rows[i].Birthday + "</td>";

s[s.length] = "</tr>";

    }

     s[s.length] = "</table>";

     tableDisplay.innerHTML = s.join("");

   }

   else {

     alert("Error. [3001] " + response.request.responseText);

   }

 }

 

 

 

 

 

 

 [Serializable()]

 publicclass User{

   private int _userId;

   private string _firstName;

   private string _lastName;

 

   public int userId{

     get { return _userId; }

   }

   public string FirstName{

     get { return _firstName; }

   }

   public string LastName{

     get { return _lastName; }

   }

   public User(int _userId, string _firstName, string_lastName){

     this._userId = _userId;

     this._firstName = _firstName;

     this._lastName = _lastName;

   }

   public User(){}

   [AjaxMethod()]

   public static User GetUser(int userId){

    //Replace this with a DB hit or something :)

     return new User(userId,"Michael","Schwarz");

   }

 }

 

 

 

 

 privatevoid Page_Load(object sender, EventArgse){

   Utility.RegisterTypeForAjax(typeof(User));

 }

 

 

 <scriptlanguage="javascript">

 functiongetUser(userId){

   User.GetUser(GetUser_callback);

 }

 functionGetUser_callback(response){

   if (response != null && response.value!= null){

     var user = response.value;

     if (typeof(user) =="object"){

alert(user.FirstName + "" + user.LastName);

    }

   }

 }

 getUser(1);

 

 

 

 

 

 

 

 

 

 

 

 

 Public Class AjaxFunctions

   <Ajax.AjaxMethod()>_

   PublicFunction Validate(username As String, password AsString) As Boolean

    'do something

    'Return something

   End Function

 End Class

 

 

 privatevoid Page_Load(object sender, EventArgse){

   Ajax.Utility.RegisterTypeForAjax(typeof(AjaxFunctions));

   //

 }

 

 

 

 

 

 

 

 

 

 

 [Ajax.AjaxMethod]

 publicstring Test1(string name, string email, string comment){

   string html = "";

   html += "Hello " + name + "<br>";

   html += "Thank you for your comment <b>";

   html += System.Web.HttpUtility.HtmlEncode(comment);

   html += "</b>.";

   return html;

 }

 SessionState

 

 

 

 

 

 

 [Ajax.AjaxMethod(HttpSessionStateRequirement.Read)]

 publicArrayList DocumentReleased(){

   if (HttpContext.Current.Session["DocumentsWaiting"] == null){

     return null;

   }

   ArrayList readyDocuments = new ArrayList();

   int[]documents = (int[])HttpContext.Current.Session["DocumentsWaiting"];

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

    Document document = Document.GetDocumentById(documents[i]);

     if (document != null && document.Status== DocumentStatus.Ready){

readyDocuments.Add(document);

  }

   }

   return readyDocuments;

   }

 }

 

 

 

 

 <scriptlanguage="javascript">

 functionDocumentsReady_CallBack(response){

   if (response.error != null){

     alert(response.error);

     return;

   }

   if (response.value != null&& response.value.length > 0){

     var div = document.getElementById("status");

     div.innerHTML = "The following documents are ready!<br />";

     for (var i= 0; i < response.value.length;++i){

div.innerHTML += "<a href=/"edit.aspx?documentId=" + response.value[i].DocumentId + "/">" + response.value[i].Name + "</a><br/>";

    }     

   }

   setTimeout('page.DocumentReleased(DocumentsReady_CallBack)',10000);

 }

  

 <body onload="setTimeout('Document.DocumentReleased(DocumentsReady_CallBack)', 10000);">