Journal du Net > Développeur > Client Web > > Pratique > Client Web > requêtes xmlhttp
Pratique
 
22/05/2007

Comment réaliser des requêtes XML en Javascript

Dans le cadre d'applications utilisant les technologies Ajax, voici un code permettant d'envoyer des requêtes XML en utilisant l'objet XMLHTTP puis d'en récupérer les réponses.
  Envoyer Imprimer  

 
En savoir plus
 
 
 

XMLHttprequest est un objet JavaScript qui permet d'obtenir des données au format XML, mais aussi HTML, ou encore un texte simple à l'aide de requêtes HTTP.

Cet objet fait parti des constituants majeurs de la technologie en temps réel Ajax et ensemble, Ajax et XMLHttprequest sont au cœur de ce qui est appelé communément le Web 2.0.

Le développement d'applications Web avec AJAX permet la mise en place de pages Web dynamiques permettant de ne recharger qu'une partie de la page. La quantité de données échangées entre le navigateur et le serveur HTTP est alors fortement réduite. Le temps de traitement de la requête côté serveur est également légèrement réduit, une partie du traitement étant réalisé sur l'ordinateur d'où provient la requête.

Voici, ci-dessous, un code permettant de faire des requêtes XML et d'en avoir la réponse

/**
 * Faire des requêtes
 * @author neolao <neo@neolao.com>
 * @version 0.4 (20/01/2006)
 * @link http://resources.neolao.com/javascript/request
 * @license http://creativecommons.org/licenses/by-sa/2.5/
 */


function Request(){
	this.__constructor.apply(this, arguments);
}

Request.prototype = {
// ------------------- CONSTANTES ----------------------
XMLHTTP_UNINITIALIZED : 0,  
      // Etat du xmlHttp, open() n'a pas encore été appelé
XMLHTTP_LOADING       : 1,  
      // Etat du xmlHttp, send() n'a pas encore été appelé
XMLHTTP_LOADED        : 2,  
      // Etat du xmlHttp, send() a été appelé, 
      //les en-têtes et le status sont disponibles
XMLHTTP_INTERACTIVE   : 3,  
      // Etat du xmlHttp, pendant le chargement
XMLHTTP_COMPLETED     : 4,  
      // Etat du xmlHttp, toutes 
      // les opérations sont terminées
	 
HTTP_OK               : 200, 
      // Etat http, la page existe
HTTP_FILENOTFOUND     : 404, 
      // Etat http, la page n'existe pas
	 
// -------------------- VARIABLES ------------------------
/**
	* La ressource xmlHttp
	* @var Object
	*/
_rsc : false,
	 
// -------------------- EVENEMENTS ----------------------
/**
	* Evénement invoqué lorsque l'url a été chargée
	* @param string pResponse : La ressource xmlHttp
	*/
onLoad : function(pResponse){},
/**
	* Evénement invoqué pendant le chargement
	* @param Object pResponse : La ressource xmlHttp
	*/
onLoading : function(pResponse){},
/**
	* Evénement invoqué lorsqu'il y a une erreur
	* @param Object pResponse La ressource xmlHttp
	*/
onError : function(pResponse){},
	 
/*==================== CONSTRUCTEUR ====================*/
/**
	* Initialisation de la class
	*/
__constructor : function(){		
	
},
/*============== FIN = CONSTRUCTEUR = FIN ==============*/
	 
/*================== METHODES PRIVEES ==================*/
/**
	* Délégation de fonction
	* @param object pTarget La cible de la fonction
	* @param function pFunction La fonction
	* @return function La fonction qui fait la 
    délégation
	*/
_delegate : function(pTarget, pFunction){
	var f = function(){
		arguments.callee.func.apply(arguments.callee.
                              target,arguments);
	};
	f.target = pTarget;
	f.func = pFunction;
	return f;
},
/**
	* Initialisation de la ressource xmlHttp
	* @return xmlHttp La ressource xmlHttp
	*/
_initRsc : function(){
	this._rsc = false;
		
	// Tentative de création d'une ressource xmlHttp
	if(window.XMLHttpRequest){
	this._rsc = new XMLHttpRequest();		
	}else if(window.ActiveXObject){
	this._rsc = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if(this._rsc != false){
	this._rsc.onreadystatechange = this._delegate(this, 
                    this._rscOnChange);
	}
	return this._rsc;
},
/**
	* Lorsque la ressource xmlHttp change d'état
	*/
_rscOnChange : function(){
	switch(this._rsc.readyState) {
		case this.XMLHTTP_INTERACTIVE:
			this.onLoading(this._rsc);
			break;
		case this.XMLHTTP_COMPLETED:
			if (this._rsc.status == this.HTTP_OK)
                    {this.onLoad(this._rsc);
			}
			break;
		default:
			if(this._rsc.status >= 400){
				// Il y a une erreur
				this.onError(this._rsc);
			}else{
				// rien
			}
	}
},
/*============ FIN = METHODES PRIVEES = FIN ============*/
	 
/*================= METHODES PUBLIQUES =================*/
/**
	* Chargement d'une url
	* @param String pUrl L'url à charger
	* @param String pMethod La méthode utilisée: 
 * GET ou POST
	* @param String pData Les données envoyées
	*/
load : function(pUrl, pMethod, pData){		
 if(this._initRsc() != false){
  pMethod = (pMethod.toUpperCase() == "GET")?"GET":"POST";
   this._rsc.open(pMethod, pUrl, true);
 if(pMethod == "POST"){
   this._rsc.setRequestHeader("Method", 
      "POST" + pUrl + "HTTP/1.01");
   this._rsc.setRequestHeader("Content-Type", 
      "application/x-www-form-urlencoded");
		}
		this._rsc.send(pData);
	}
},
/**
	* Annule le chargement
	*/
abort : function(){
	this._rsc.abort();
}
/*========== FIN = METHODES PUBLIQUES = FIN ============*/
};       

Ce contenu a été réalisé par Neolao sous licence Creative Commons.



JDN Développeur Envoyer Imprimer Haut de page
Que pensez-vous des méthodes de développement agiles ?

C’est une approche vraiment originale qui révolutionne la gestion de projet

Ce n’est pas très différent du développement itératif traditionnel

Cette notion ne me parle pas

Tous les sondages

ANNUAIRES