快捷導(dǎo)航

揭開AJAX神秘的面紗(AJAX個(gè)人學(xué)習(xí)筆記)第2/5頁

更新時(shí)間：2009年09月18日 13:50:55 作者：

寫這個(gè)學(xué)習(xí)筆記，只是記載一下自己的學(xué)習(xí)經(jīng)過和體會(huì)，把一些學(xué)習(xí)重點(diǎn)記錄下來，以備今后的鞏固復(fù)習(xí)及應(yīng)用，很多知識(shí)點(diǎn)沒有詳細(xì)介紹，所以并不完全適用于初學(xué)者，如果你是初學(xué)者，最好選擇一本AJAX學(xué)習(xí)的書籍，然后與這篇學(xué)習(xí)筆記對(duì)照學(xué)習(xí)，效果會(huì)更好。

應(yīng)用方式二：
在ASP.NET 中，內(nèi)置了一種非常適合Ajax開發(fā)的后臺(tái)處理方式即HttpHandler類，實(shí)際上所有的HttpHandler類都實(shí)現(xiàn)了IHttpHandler接口，用以進(jìn)行請(qǐng)求接收和回送響應(yīng)。
IHttpHandler這個(gè)接口提供了最基本的Web請(qǐng)求和Web響應(yīng)的封裝，可以將此接口看作是Web容器提供的基本的Web實(shí)現(xiàn)方式的封裝類。
IHttpHandler接口具有一個(gè)方法：ProcessRequest(HttpContext context)，及一個(gè)布爾值屬性：IsReusable。所有實(shí)現(xiàn)IHttpHandler接口的類都必須實(shí)現(xiàn)上述方法和屬性，其中ProcessRequest方法用于接收和處理請(qǐng)求以及發(fā)送響應(yīng)，而IsReusable指示其他請(qǐng)求是否可以使用IHttpHandler實(shí)例也就是說后繼的Http請(qǐng)求是不是可以繼續(xù)使用實(shí)現(xiàn)了該接口的類的實(shí)例，一般情況下設(shè)定為true。

應(yīng)用一案例代碼：
Default.aspx 文件代碼（只有前臺(tái)代碼，后臺(tái)無任何代碼）:

復(fù)制代碼代碼如下:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>Ajax請(qǐng)求頁面</title> 
<script type="text/javascript" language=javascript src="Ajax.js"> 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div align=center> 
<div style="width:320px;height:150px" align=center> 
<table border=0 cellpadding=0 cellspacing=0 width=300px> 
<tr width=300px> 
<td>請(qǐng)輸入回傳至服務(wù)器的文本</td> 
</tr> 
<tr> 
<td><asp:TextBox runat="server" ID="txtCustomerInfo"></asp:TextBox></td> 
</tr> 
<tr> 
<td><input type=button runat=server id="btnRequest" value="發(fā)送請(qǐng)求" onclick="startRequest(document.getElementById('txtCustomerInfo').value)" /></td> 
</tr> 
<tr> 
<td>服務(wù)器處理后文本顯示如下</td> 
</tr> 
<tr> 
<td> 
<div style="width:100%;background-color:Yellow;color:black;height:48px" id="divServerMsg"> 
</div> 
</td> 
</tr> 
</table> 
</div> 
</div> 
</form> 
</body> 
</html> 

Ajax.js 文件代碼（createXmlHttp()函數(shù)部分很通用，可以在自己的應(yīng)用程序中不用修改而直接復(fù)制）：

復(fù)制代碼代碼如下:

 
var xmlHttp; 

function createXmlHttp() 
{ 
var activeKey=new Array("MSXML2.XMLHTTP.5.0", 
"MSXML2.XMLHTTP.4.0", 
"MSXML2.XMLHTTP.3.0", 
"MSXML2.XMLHTTP", 
"Microsoft.XMLHTTP"); 
if(window.ActiveXObject) 
{ 
for(var i=0;i<activeKey.length;i++) 
{ 
try 
{ 
xmlHttp=new ActiveXObject(activeKey[i]); 
if(xmlHttp!=null) 
return xmlHttp; 
} 
catch(error) 
{ 
continue; 
} 
} 
throw new Error("客戶端瀏覽器版本過低，不支持XMLHttpRequest對(duì)象，請(qǐng)更新瀏覽器"); 
} 
else if(window.XMLHttpRequest) 
{ 
xmlHttp=new window.XMLHttpRequest(); 
} 
} 

function addUrlParameter(url,parameterName,parameterValue) 
{ 
url+=(url.indexOf("?"))==-1 ? "?" : "&";//判斷當(dāng)前URL中是否存在? 即參數(shù)分隔符 
url+=encodeURIComponent(parameterName)+"="+encodeURIComponent(parameterValue); 
return url; 
} 


function startRequest(customerStr) 
{ 
xmlHttp=createXmlHttp(); 
xmlHttp.onreadystatechange=readyStateChangeHandler; 
xmlHttp.open("GET",addUrlParameter("AjaxPage.aspx","customerInfo",customerStr),null); 
xmlHttp.send(null); 
} 

function readyStateChangeHandler() 
{ 
if(xmlHttp.readyState==4) 
{ 
if(xmlHttp.status==200) 
{ 
var str=xmlHttp.responseText; 
var div=document.getElementById("divServerMsg"); 
div.innerHTML="<b>"+str+"</b>"; 
} 
} 
} 

AjaxPage.aspx 文件代碼（前臺(tái)）：

復(fù)制代碼代碼如下:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPage.aspx.cs" Inherits="AjaxPage" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>無標(biāo)題頁</title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 

</div> 
</form> 
</body> 
</html> 

AjaxPage.aspx.cs 文件代碼（后臺(tái)）：

復(fù)制代碼代碼如下:

 
using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 

public partial class AjaxPage : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
string str = this.Request["customerInfo"].ToString(); 
string msg = "服務(wù)器獲得你的消息，時(shí)間:" + DateTime.Now.ToShortTimeString() + "<br>你的消息為:" + str + "<br>你的地址:" + this.Request.UserHostAddress; 
this.Response.Write(msg); 
this.Response.End(); 
} 
} 