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
[POWERSHELL 3] TéLéCHARGER ET INSTALLER LA DOCUMENTATION EN LIGNE[POWERSHELL 3] TéLéCHARGER ET INSTALLER LA DOCUMENTATION EN LIGNE par Pierrick CATRO-BROUILLET
Les fans de PowerShell et d'avance de phase auront surement eu le même problème que moi : la beta de PowerShell v3 n'a pas de documentation en local. Certes, on peut appeler Get-Help (je préfère "man") sur une commandlet pour avoir la liste de ses par...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET JOB DAY @MIC BRUSSELS - .NET DEVELOPERS ON MOBILE APPLICATIONSJOB DAY @MIC BRUSSELS - .NET DEVELOPERS ON MOBILE APPLICATIONS par junarnoalg
Vous recherchez des développeurs .NET spécialisés dans les applications mobiles - pour un stage, un FPIE, ou un emploi ? Afin de vous soutenir dans vos défis de recrutement, nous vous invitons à venir participer au « Job Day @MIC Brussels », qui...
Cliquez pour lire la suite de l'article par junarnoalg [SHAREPOINT 2010] - SHAREPOINT 2010, WINDOWS (SERVER) 8 ET DES ERREURS IIS SONT DANS UNE VM.[SHAREPOINT 2010] - SHAREPOINT 2010, WINDOWS (SERVER) 8 ET DES ERREURS IIS SONT DANS UNE VM. par Pierrick CATRO-BROUILLET
Je me suis récemment fait une VM de test avec Windows Server 8 Beta, Visual Studio 11, SQL Server 2012 et SharePoint 2010. Outre les difficultés d'installation de SharePoint (j'utilise essentiellement PowerShell avec le très bon http://autospinstaller...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET [EVENT] WINDOWS AZURE DEV CAMP LE 20 JUIN![EVENT] WINDOWS AZURE DEV CAMP LE 20 JUIN! par fathi
Si vous avez un peu de temps et que vous souhaitez vous mettre à Azure, MS organise un dev Camp le 20 juin à Issy les Molineaux: Au programme: · Présentations et démos exclusives des nouveautés de la plateforme · Échanges avec des membres de l'éq...
Cliquez pour lire la suite de l'article par fathi
Logiciels
974 Application Server (12.2.4.0)974 APPLICATION SERVER (12.2.4.0)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP mySongBook Player (1.0.0)MYSONGBOOK PLAYER (1.0.0)mySongBook Player est un logiciel gratuit permettant l'accès à une archive de tablatures/partitio... Cliquez pour télécharger mySongBook Player
|