Recentemente, estou lendo o livro <<Ajax in Action>>. Usei o conhecimento do livro e combinei com .net para escrever este artigo sobre como usar .net para processar xmlHttp para enviar solicitações assíncronas.
O que queremos conseguir é clicar no botão para obter a hora atual do servidor. O html do aspx é o seguinte:
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="servidor">
<título>Teste</título>
<script language="javascript" src="javascript/prototype/extras-array.js"></script>
<script idioma="javascript" src="javascript/xmlHttp.js"></script>
<script language="javascript" src="javascript/eventRouter.js"></script>
<script idioma="javascript" src="Default.js"></script>
<linguagem script="javascript">
</script>
</head>
<corpo>
<form id="form1" runat="servidor">
Obtenha a hora atual do servidor usando o método Post
<input id="btnTestPost" type="button" value="Post" />
Obtenha a hora atual do servidor usando o método Get
<input id="btnTestGet" type="button" value="Get" />
<div id="divResult"></div>
</form>
</body>
</html>
Para usar javascript para enviar solicitações xmlHttp, o problema que deve ser resolvido é o suporte entre navegadores. Encapsulamos o envio de xmlHttp em um objeto javascript e ao mesmo tempo resolvemos o problema de suporte entre navegadores neste objeto. O código é o seguinte:
objeto xmlHttp
/**//*
objeto de carregamento de URL e uma fila de solicitações construída sobre ele
*/
/**//* objeto de namepacing */
var net=novo Objeto();
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;
/**//*--- objeto carregador de conteúdo para solicitações entre navegadores ---*/
net.xmlHttp=function(url, onload, params, método, contentType, onerror){
este.req=nulo;
this.onload=onload;
this.onerror=(onerror)? onerror: this.defaultError;
if(typeof(método) == "indefinido" || método == nulo)
{
método = "POST";
}
this.loadXMLDoc(url, parâmetros, método, contentType);
}
net.xmlHttp.prototype.loadXMLDoc=function(url, parâmetros, método, contentType){
if (!método){
método = "OBTER";
}
if (!contentType && método=="POST"){
contentType='application/x-www-form-urlencoded';
}
if (window.XmlHttpRequest){
this.req=new XmlHttpRequest();
} senão if (window.ActiveXObject){
this.req=new ActiveXObject("Microsoft.xmlHttp");
}
if (este.req){
tentar{
var carregador=este;
this.req.onreadystatechange=função(){
net.xmlHttp.onReadyState.call(carregador);
}
this.req.open(método,url,true);
if (contentType){
this.req.setRequestHeader('Content-Type', contentType);
}
this.req.send(params);
}pegar (errar){
isto.onerror.call(isto);
}
}
}
net.xmlHttp.onReadyState=função(){
var req=este.req;
var pronto=req.readyState;
if (pronto==net.READY_STATE_COMPLETE){
var httpStatus=req.status;
if (httpStatus==200 || httpStatus==0){
isto.onload.call(isto);
}outro{
isto.onerror.call(isto);
}
}
}
net.xmlHttp.prototype.defaultError=function(){
alert("erro ao buscar dados!"
+"nnreadyState:"+this.req.readyState
+"nstatus: "+this.req.status
+"nheaders: "+this.req.getAllResponseHeaders());
}
Vamos começar a escrever o código para enviar solicitação xmlHttp:
default.js
//objeto xmlHttp global
var cobj;
/**//* Início da postagem*/
//Bind Post para enviar evento xmlHttp para btnTestPost
função carregarTestPost()
{
var iobj = document.getElementById("btnTestPost");
// Vinculação para escuta do botão btnTestPost
var clickRouter=new jsEvent.EventRouter(iobj,"onclick");
clickRouter.addListener(btnTestPostClick);
}
função btnTestPostClick()
{ //abre os parâmetros url, onload, params, method, contentType, onerror
cobj = new net.xmlHttp("DefaultHandler.ashx",dealResult, "<T/>", "POST");
}
/**//* Fim da postagem*/
/**//* Começar*/
//Bind Get para enviar evento xmlHttp para btnTestGet
função loadTestGet()
{
var iobj = document.getElementById("btnTestGet");
// ligação de escuta do botão btnTestGet
var clickRouter=new jsEvent.EventRouter(iobj,"onclick");
clickRouter.addListener(btnTestGetClick);
}
função btnTestGetClick()
{ //abre os parâmetros url, onload, params, method, contentType, onerror
cobj = new net.xmlHttp("DefaultHandler.ashx?T=1",dealResult, null, "GET");
}
/**//* Chegar ao fim*/
função dealResult()
{
var dobj = document.getElementById("divResult");
dobj.innerHTML = cobj.req.responseXML.text;
}
janela.onload=função()
{
//Bind Post para enviar evento xmlHttp para btnTestPost
carregarTestPost();
//Bind Get para enviar evento xmlHttp para btnTestGet
carregarTestGet();
};
O último é o código para processamento .net xmlHttp
.net lida com solicitações xmlHttp
classe pública DefaultHandler: IHttpHandler
{
XmlDocument protegido _xmlResult;
public void ProcessRequest (contexto HttpContext)
{
if (context.Request["T"]! = nulo)
{//GET teste xmlhttp
context.Response.ContentType = "texto/xml";
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.LoadXml(string.Format(@"<time>GET:{0}</time>", System.DateTime.Now));
xmlDoc.Save(context.Response.OutputStream);
context.Response.End();
}
outro
{//teste POST xmlhttp
context.Response.ContentType = "texto/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();
}
}
}
bool público IsReusable
{
pegar
{
retornar falso;
}
}
}
http://www.cnblogs.com/laiwen/archive/2006/12/26/604050.html