begin process at 2012 05 17 04:58:08
  Trouver un code source :
 
dans
 

Ajax : Pour un web encore plus propre

Ajax : Qu'est ce que c'est ?
Ajax est l'acronyme utilisé pour Asynchronous JavaScript + XML.
Contrairement à ce que l'on pourrait croire, Ajax n'est pas une technologie mais un concept reposant sur l'utilisation de différents standards regroupant :
  • L'utilisation de XHTML et CSS pour la couche de présentation
  • L'intéraction dynamique avec le document au travers du DOM (Document Object Model)
  • L'échange et la manipulation d'informations par XML et XSLT
  • La récuperation asynchrone d'informations par XmlHttpRequest
  • Une bonne dose de JavaScript pour joindre le tout
Contrairement au mode de fonctionnement actuel des applications web, l'Ajax propose une intéraction différente avec l'utilisateur final.
Effectivement, les modèles applicatifs web actuels reposent sur le fait qu'une action utilisateur engendre une requête HTTP repostant l'intégralité de la page et des données.
L'interêt d'Ajax réside dans la possibilité de ne recharger qu'une partie de l'environnement applicatif et amène donc une intéraction plus fine avec l'utilisateur final.

L'apparition du modèle Ajax est récent mais il utilise cependant des technologies mises à notre diposition depuis un certain temps.
Prenons par exemple XmlHttpRequest. Force est de constater que son implémentation au sein du moteur Gecko n'a fait que contribuer à la popularisation de concepts tel Ajax.
Cependant, il ne faut pas oublier que ce protocole de communication asynchrone nous a été proposé dès la sortie d'Internet Explorer 4.0 au travers de l'implémentation MSXML.
Ajax : Qui l'utilise ?
A l'heure actuelle, les plus belles implémentations d'Ajax ont été réalisés par Google.
Effectivement, les dernières réalisations de Google : GMail, GoogleMaps sont des exemples parfaits de l'implémentation d'Ajax au sein d'applicatifs web.

De plus, l'implémentation du ClientCallBack au sein du Framework .NET 2.0 ne fait que conforter l'idée que l'Ajax est promis à un bel avenir.
Pour plus d'informations relatives au ClientCallBack, je vous renvoi vers l'article de Pierre Largarde traitant du sujet : Le client Callback de ASP.NET V2
Ajax : Comment ca marche ?
Afin d'aller plus en avant dans la compréhension du modèle Ajax, nous allons ici étudier quelques lignes de code nous permettant de comprendre dans les grands axes comment tout ceci fonctionne.

Le code utilisé ici est extrait de l'excellent tutorial de mon ami Rodolphe Breton qui est un des rares articles en français traitant du sujet XmlHttpRequest.
Je vous invite donc à le consulter pour plus de détails quant à la mise en place d'une requête XmlHttp : Tutorial sur les requêtes serveur en JavaScript
Voici aussi un exemple d'implémentation de ce tutorial avec la création d'un Morpion : Morpion en ligne sans chargement de page

Comme vous l'aurez compris, Ajax repose donc sur 2 parties, la première étant l'émission d'une requête Http au travers de JavaScript, la seconde étant la page serveur recevant cette requête et renvoyant un résultat.

Voyons tout d'abord la partie JavaScript, nous allons ici étudier une fonction émettant une requête GET vers une page web afin de récupérer l'heure du serveur :
var xhr_object = null;
var xhr_url = 'http://localhost/AjaxProject/test_date.aspx';

function SendGetRequest() {
	if ( window.XMLHttpRequest ) {
		// Objet XmlHttpRequest pour les moteurs GECKO
		xhr_object = new XMLHttpRequest();   
	} else if ( window.ActiveXObject ) {
		// Objet XmlHttpRequest pour Internet Explorer
		xhr_object = new ActiveXObject( 'Microsoft.XMLHTTP' );   
	} else {
		// Navigateur non-compatible
		alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' );   
		return;
	}
	// On ouvre la requete vers la page désirée
	xhr_object.open( 'GET', xhr_url, false );
	// On lui donne le pointeur de fonction de retour
	xhr_object.onreadystatechange = CallBackRequest;
	// On envoi la requete
	xhr_object.send( null );
}

function CallBackRequest() {
	// Sur le retour de la requete, on teste son état
	if ( xhr_object.readyState == 4 ) {
		// On injecte notre retour dans la DIV prevue a cet effet
		document.getElementById( 'divResult' ).innerHTML = xhr_object.responseText;
	}
}
Dans cette même page HTML, nous allons ajouter un bouton et une div de façon à tester notre requête XmlHttp :
<input type="button" value="HttpRequest" onclick="SendGetRequest();" />	
<br />
<br />
<div id="divResult"></div>
Concernant notre page serveur, voici 3 exemples différents : en PHP, en ASP3.0, en ASP.NET / VB.NET
PHP : test_date.php
<?
echo "Bonjour, il est " . date("h:i:s") . " sur le serveur.";
?>


ASP 3.0 : test_date.asp <% Response.Write "Bonjour, il est " & Right(Now, 8) & " sur le serveur." %>

ASP.NET : test_date.aspx <%@ Page Language="vb" AutoEventWireup="false" Codebehind="test_date.aspx.vb" Inherits="AjaxProject.test_date"%>
ASP.NET : test_date.aspx.vb Private Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load Response.Write("Bonjour, il est " & DateTime.Now.ToLongTimeString & _ " sur le serveur") End Sub
Comme vous le remarquerez pour la partie .NET, la page .aspx a été épurée de tout son contenu HTML et seul la partie déclarative reste présente.
Ajax : Les limites ?
Les limites de l'Ajax connues à l'heure actuelle résident dans la politique de sécurité appliquée au Cross-Domain.
Les requêtes Ajax sont donc pour le moment limité à l'intérieur d'un même domaine.
Cependant, sur modification du paramétrage de votre navigateur, que ce soit Gecko ou Internet Explorer, vous pourrez autoriser les requêtes Cross-Domain mais cela reste à vos risques et périls.
Ajax : AjaxTextBox
Le contrôle serveur AjaxTextBox.NET a été developpé pour CodeS-SourceS par l'équipe Wygwam.

Wygwam est une société de services spécialisée dans le développement d'applications sur des technologies web, avec une volontée d'expertise de haute gamme en technologie .NET.


Wygwam c'est
   - Une expérience de 5 ans en technologie .NET
   - La réalisation de projets haut de gamme.
   - Une très forte capacité d'innovation.
   - Une force de proposition pour vos projets.
   - Une forte implication dans le monde des développeurs au travers de leur investissement constant dans les communautés et leurs blogs : www.asp-php.NET ; www.codes-sources.com
   - Une reconnaissance de l'expertise .NET au travers des titres de MVPs et CodeZone de certains de nos membres.

L'offre Wygwam :
   Nos compétences s'appliquent à un large éventail de projets :
      - sites e-commerce,
      - systèmes d'information et de collaboration,
      - outils d'analyses statistiques et prédictives,
      - portails intr.NET,
      - Agents de Génie Logiciels,
      - Factory Applicatives, développements génériques,
      - Architecture, construction de Framework d'entreprise .NET
      - ...

Notre objectif :
   Constituer chez Wygwam un groupement d'experts en technologie .NET.
   Faire de Wygwam un pôle technologique reconnu sur la plateforme .NET.

Aurélien est Chef de Projet chez Wygwam spécialisé dans la mise en place des standards du W3C et les intéractions ClientSide.
Fort de son expérience ClientSide, Aurélien se concentre sur la mise en place d'un ensemble de contrôles serveurs riches permettant une intéraction simple et intuitive avec l'utilisateur final.
Du ClientSide dans vos projets .NET, contactez-le : Cliquez ici


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,016 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales