Kürzlich habe ich das Buch <<Ajax in Action>> gelesen. Ich habe das Wissen aus dem Buch genutzt und es mit .net kombiniert, um diesen Artikel über die Verwendung von .net zur Verarbeitung von xmlHttp zum Senden asynchroner Anforderungen zu schreiben.
Was wir erreichen möchten, ist, auf die Schaltfläche zu klicken, um die aktuelle Zeit des Servers abzurufen. Der HTML-Code von ASPX lautet wie folgt:
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Linkedu.Web.WebWWW.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>Test</title>
<script language="javascript" src="javascript/prototype/extras-array.js"></script>
<script language="javascript" src="javascript/xmlHttp.js"></script>
<script language="javascript" src="javascript/eventRouter.js"></script>
<script language="javascript" src="Default.js"></script>
<script language="javascript">
</script>
</head>
<Körper>
<form id="form1" runat="server">
Rufen Sie die aktuelle Uhrzeit des Servers mithilfe der Post-Methode ab
<input id="btnTestPost" type="button" value="Post" />
Rufen Sie die aktuelle Uhrzeit des Servers mithilfe der Get-Methode ab
<input id="btnTestGet" type="button" value="Get" />
<div id="divResult"></div>
</form>
</body>
</html>
Um Javascript zum Senden von XMLHttp-Anfragen zu verwenden, muss das Problem der browserübergreifenden Unterstützung gelöst werden. Wir kapseln das Senden von xmlHttp in ein Javascript-Objekt und lösen gleichzeitig das Problem der browserübergreifenden Unterstützung in diesem Objekt. Der Code lautet wie folgt:
xmlHttp-Objekt
/**//*
URL-Ladeobjekt und eine darauf aufgebaute Anforderungswarteschlange
*/
/**//* Namepacing-Objekt */
var net=new Object();
net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;
/**//*--- Content-Loader-Objekt für browserübergreifende Anfragen ---*/
net.xmlHttp=function(url, onload, params, method, contentType, onerror){
this.req=null;
this.onload=onload;
this.onerror=(onerror) ? onerror : this.defaultError;
if(typeof(method) == "undefiniert" || method == null)
{
method = "POST";
}
this.loadXMLDoc(url, params, method, contentType);
}
net.xmlHttp.prototype.loadXMLDoc=function(url, params, method, contentType){
if (!method){
method="GET";
}
if (!contentType && method=="POST"){
contentType='application/x-www-form-urlencoded';
}
if (window.XmlHttpRequest){
this.req=new XmlHttpRequest();
} else if (window.ActiveXObject){
this.req=new ActiveXObject("Microsoft.xmlHttp");
}
if (this.req){
versuchen{
var loader=this;
this.req.onreadystatechange=function(){
net.xmlHttp.onReadyState.call(loader);
}
this.req.open(method,url,true);
if (contentType){
this.req.setRequestHeader('Content-Type', contentType);
}
this.req.send(params);
}catch (irr){
this.onerror.call(this);
}
}
}
net.xmlHttp.onReadyState=function(){
var req=this.req;
var ready=req.readyState;
if (ready==net.READY_STATE_COMPLETE){
var httpStatus=req.status;
if (httpStatus==200 || httpStatus==0){
this.onload.call(this);
}anders{
this.onerror.call(this);
}
}
}
net.xmlHttp.prototype.defaultError=function(){
alarm("Fehler beim Abrufen der Daten!"
+"nnreadyState:"+this.req.readyState
+"nstatus: "+this.req.status
+"nheaders: "+this.req.getAllResponseHeaders());
}
Beginnen wir mit dem Schreiben des Codes zum Senden einer xmlHttp-Anfrage:
default.js
//Globales xmlHttp-Objekt
var cobj;
/**//* Beitrag beginnen*/
//Post binden, um ein xmlHttp-Ereignis an btnTestPost zu senden
Funktion LoadTestPost()
{
var iobj = document.getElementById("btnTestPost");
//Bindung für das Abhören der btnTestPost-Schaltfläche
var clickRouter=new jsEvent.EventRouter(iobj,"onclick");
clickRouter.addListener(btnTestPostClick);
}
Funktion btnTestPostClick()
{ // Parameter öffnen: URL, Onload, Parameter, Methode, ContentType, Onerror
cobj = new net.xmlHttp("DefaultHandler.ashx",dealResult, "<T/>", "POST");
}
/**//* Beitragsende*/
/**//* Erste Schritte*/
//Get binden, um ein xmlHttp-Ereignis an btnTestGet zu senden
Funktion LoadTestGet()
{
var iobj = document.getElementById("btnTestGet");
//btnTestGet-Button-Listening-Bindung
var clickRouter=new jsEvent.EventRouter(iobj,"onclick");
clickRouter.addListener(btnTestGetClick);
}
Funktion btnTestGetClick()
{ // Parameter öffnen: URL, Onload, Parameter, Methode, ContentType, Onerror
cobj = new net.xmlHttp("DefaultHandler.ashx?T=1",dealResult, null, "GET");
}
/**//* Get end*/
Funktion dealResult()
{
var dobj = document.getElementById("divResult");
dobj.innerHTML = cobj.req.responseXML.text;
}
window.onload = function()
{
//Post binden, um ein xmlHttp-Ereignis an btnTestPost zu senden
LoadTestPost();
//Get binden, um ein xmlHttp-Ereignis an btnTestGet zu senden
LoadTestGet();
};
Der letzte ist der Code für die .net-Verarbeitung von xmlHttp
.net verarbeitet xmlHttp-Anfragen
öffentliche Klasse DefaultHandler: IHttpHandler
{
protected XmlDocument _xmlResult;
public void ProcessRequest(HttpContext context)
{
if (context.Request["T"] != null)
{//GET xmlhttp-Test
context.Response.ContentType = "text/xml";
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.LoadXml(string.Format(@"<time>GET:{0}</time>", System.DateTime.Now));
xmlDoc.Save(context.Response.OutputStream);
context.Response.End();
}
anders
{//POST xmlhttp-Test
context.Response.ContentType = "text/xml";
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.Load(context.Request.InputStream);
if (xmlDoc.DocumentElement.Name == "T")
{
xmlDoc.LoadXml(string.Format(@"<time>POST:{0}</time>", System.DateTime.Now));
xmlDoc.Save(context.Response.OutputStream);
context.Response.End();
}
}
}
public bool IsReusable
{
erhalten
{
return false;
}
}
}
http://www.cnblogs.com/laiwen/archive/2006/12/26/604050.html