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
|
Derniers Blogs
WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBEWORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson
Depuis déjà un an, je conseille vivement les utilisateurs de Workflow Foundation 3 à migrer vers la version 4. L'information qui va suivre ne devrait donc pas trop prendre au dépourvu les personnes qui m'ont suivi. Je profite de ce poste, pour faire le re...
Cliquez pour lire la suite de l'article par JeremyJeanson TECHDAYS PARIS 2012 : NOUVELLES TENDANCES DU POSTE DE TRAVAIL - BRING YOUR OWN PCTECHDAYS PARIS 2012 : NOUVELLES TENDANCES DU POSTE DE TRAVAIL - BRING YOUR OWN PC par ROMELARD Fabrice
Speakers: Thierry Rapatout, Antoine Petit et Xavier Trebbia Cette session entre dans le cadre des RDV Décideurs des TechDays 2012, elle est liée à la consumérisation de l'IT et la mise en place du "DeskTop as a Service" dans de plus en ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2012 : SYSTEM CENTER SERVICE MANAGER 2012 VUE D'ENSEMBLETECHDAYS PARIS 2012 : SYSTEM CENTER SERVICE MANAGER 2012 VUE D'ENSEMBLE par ROMELARD Fabrice
Speakers: Julien Marechal, Gautier Confiant, Sébastien MEYER La session débute par le positionnement de la solution System Center par rapport aux concepts d'organisation ITIL. Le portail du catalogue de se...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2012 : PLEINIèRE SECOND JOURTECHDAYS PARIS 2012 : PLEINIèRE SECOND JOUR par ROMELARD Fabrice
Après une première journée dédiée aux développeurs, cette seconde journée est dédiée au monde des entreprises et de ses applications. Ainsi, cette pleinière est dédiée à faire un 360 de l'évolution des applications Business aux demandes ac...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2012 : RETOUR D'EXPéRIENCE SUR LA MISE EN PLACE D'UN CLOUD PRIVéTECHDAYS PARIS 2012 : RETOUR D'EXPéRIENCE SUR LA MISE EN PLACE D'UN CLOUD PRIVé par ROMELARD Fabrice
Speaker : Guillaume Rochette Cette session est dédiée à fournir le retour sur la mise en place d'un cloud privé (IaaS) par Osiatis pour son compte ou celui de ses clients. Ce projet s'est déroulé sur 4 mois et a permis de faire évoluer...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|