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
COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE?COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL
Avec EF, les vues doivent être mappées sur des entity types. Le problème c'est que les entity types doivent avoir une clé. Avec EF, nous avons les complex type qui n'ont pas de clé mais les vues ne peuvent pas être mappées dessus. Avec EF4, il est possibl...
Cliquez pour lire la suite de l'article par Matthieu MEZIL [WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL?[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson
Certain d'entre vous on peut être vécu cette situation embarrassante après quelques temps passer avec WF4 : Au début avec mon " ActivityDesigner" , tout allait bien. Et puis un jour j'ai au des problèmes de " Binding" . Alors nous sommes allé sur le site ...
Cliquez pour lire la suite de l'article par JeremyJeanson MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ?MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg
La prochaine session de MyTIC aura lieu à Namur, le 23 mars prochain. Pendant presque une heure, nous parlerons de SharePoint 2010. Voici un aperçu du programme.
Accueil : 17h30 Début de la session : 18h00 - Les nouvelles int...
Cliquez pour lire la suite de l'article par junarnoalg
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|