Récemment, je lis le livre <<Ajax in Action>>. J'ai utilisé les connaissances du livre et les ai combinées avec .net pour écrire cet article sur l'utilisation de .net pour traiter xmlHttp afin d'envoyer des requêtes asynchrones.
Ce que nous voulons réaliser, c'est cliquer sur le bouton pour obtenir l'heure actuelle du serveur. Le code HTML d'aspx est le suivant :
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="serveur">
<titre>Tester</titre>
<script langage="javascript" src="javascript/prototype/extras-array.js"></script>
<script langage="javascript" src="javascript/xmlHttp.js"></script>
<script langage="javascript" src="javascript/eventRouter.js"></script>
<script langage="javascript" src="Default.js"></script>
<langage de script="javascript">
</script>
</tête>
<corps>
<form id="form1" runat="serveur">
Obtenez l'heure actuelle du serveur en utilisant la méthode Post
<input id="btnTestPost" type="button" value="Post" />
Obtenez l'heure actuelle du serveur à l'aide de la méthode Get
<input id="btnTestGet" type="button" value="Get" />
<div id="divResult"></div>
</form>
</corps>
</html>
Pour utiliser javascript pour envoyer des requêtes xmlHttp, le problème à résoudre est la prise en charge multi-navigateurs. Nous encapsulons l'envoi de xmlHttp dans un objet javascript, et en même temps résolvons le problème de la prise en charge multi-navigateurs dans cet objet. Le code est le suivant :
objet xmlHttp
/**//*
objet de chargement d'URL et une file d'attente de requêtes construite dessus
*/
/**//* objet de nommage */
var net=nouvel Objet();
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 ;
/**//*--- objet chargeur de contenu pour les requêtes multi-navigateurs ---*/
net.xmlHttp=function(url, onload, params, méthode, contentType, onerror){
this.req=null ;
this.onload=onload;
this.onerror=(onerror) ? onerror : this.defaultError;
if(typeof(method) == "non défini" || méthode == null)
{
méthode = "POST" ;
}
this.loadXMLDoc (url, paramètres, méthode, contentType) ;
}
net.xmlHttp.prototype.loadXMLDoc=function(url, params, méthode, contentType){
si (!méthode){
méthode="GET";
}
if (!contentType && method=="POST"){
contentType='application/x-www-form-urlencoded';
}
si (window.XmlHttpRequest){
this.req=new XmlHttpRequest();
} sinon si (window.ActiveXObject){
this.req=new ActiveXObject("Microsoft.xmlHttp");
}
si (this.req){
essayer{
var chargeur = ceci ;
this.req.onreadystatechange=fonction(){
net.xmlHttp.onReadyState.call(chargeur);
}
this.req.open(méthode,url,true);
si (contentType){
this.req.setRequestHeader('Content-Type', contentType);
}
this.req.send(params);
}attraper (erreur){
this.onerror.call(this);
}
}
}
net.xmlHttp.onReadyState=fonction(){
var req=this.req;
var prêt=req.readyState;
si (ready==net.READY_STATE_COMPLETE){
var httpStatus=req.status;
si (httpStatus==200 || httpStatus==0){
this.onload.call(ce);
}autre{
this.onerror.call(this);
}
}
}
net.xmlHttp.prototype.defaultError=function(){
alert("Erreur lors de la récupération des données !"
+"nnreadyState : "+this.req.readyState
+"nstatut : "+this.req.status
+"nheaders : "+this.req.getAllResponseHeaders());
}
Commençons par écrire le code pour envoyer la requête xmlHttp :
default.js
//Objet XMLHttp global
var cobj;
/**//* Début du message*/
// Lier Post pour envoyer l'événement xmlHttp à btnTestPost
fonction loadTestPost()
{
var iobj = document.getElementById("btnTestPost");
// Liaison pour l'écoute du bouton btnTestPost
var clickRouter=new jsEvent.EventRouter(iobj,"onclick");
clickRouter.addListener(btnTestPostClick);
}
fonction btnTestPostClick()
{ // ouvre les paramètres url, onload, params, méthode, contentType, onerror
cobj = new net.xmlHttp("DefaultHandler.ashx",dealResult, "<T/>", "POST");
}
/**//* Fin de la publication*/
/**//* Commencez*/
//Bind Get pour envoyer l'événement xmlHttp à btnTestGet
fonction loadTestGet()
{
var iobj = document.getElementById("btnTestGet");
//liaison d'écoute du bouton btnTestGet
var clickRouter=new jsEvent.EventRouter(iobj,"onclick");
clickRouter.addListener(btnTestGetClick);
}
fonction btnTestGetClick()
{ // ouvre les paramètres url, onload, params, méthode, contentType, onerror
cobj = new net.xmlHttp("DefaultHandler.ashx?T=1",dealResult, null, "GET");
}
/**//* Fin*/
fonction dealResult()
{
var dobj = document.getElementById("divResult");
dobj.innerHTML = cobj.req.responseXML.text;
}
window.onload = fonction()
{
// Lier Post pour envoyer l'événement xmlHttp à btnTestPost
chargerTestPost();
//Bind Get pour envoyer l'événement xmlHttp à btnTestGet
chargerTestGet();
};
Le dernier est le code pour le traitement .net xmlHttp
.net gère les requêtes xmlHttp
classe publique DefaultHandler : IHttpHandler
{
XmlDocument protégé _xmlResult ;
public void ProcessRequest (contexte HttpContext)
{
if (context.Request["T"] != null)
{//GET test XMLhttp
contexte.Response.ContentType = "text/xml";
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.LoadXml(string.Format (@"<time>GET:{0}</time>", System.DateTime.Now));
xmlDoc.Save(context.Response.OutputStream);
contexte.Response.End();
}
autre
{//Test POST xmlhttp
contexte.Response.ContentType = "text/xml";
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.Load(context.Request.InputStream);
si (xmlDoc.DocumentElement.Name == "T")
{
xmlDoc.LoadXml(string.Format (@"<time>POST :{0}</time>", System.DateTime.Now));
xmlDoc.Save(context.Response.OutputStream);
contexte.Response.End();
}
}
}
public bool EstRéutilisable
{
obtenir
{
renvoie faux ;
}
}
}
http://www.cnblogs.com/laiwen/archive/2006/12/26/604050.html