Ajax pour les débutants

admin · Spécial Inscrit le: 01 Juin 2006 Messages: 24

AJAX ?

AJAX signifie Asynchronous JAvascript and XML (Javascript et XML asynchrones). Il désigne deux grandes fonctionnalités :

* faire des requêtes vers le serveur sans avoir à recharger la page ;
* analyser et travailler avec des documents XML.

Plus précisement, c'est le fait d'employer l'objet non standard XMLHttpRequest() pour communiquer avec des scripts situés sur le serveur. L'objet permet d'échanger des informations sous différents formats (dont XML, HTML ou texte), mais son principal attrait est sa nature "asynchrone" : tout cela peut se faire sans recharger la page. Vous pouvez actualiser des parties de la page en fonction des actions de l'utilisateur. Des applications comme Gmail, Google suggest et Google Maps en font usage.

Comment lancer une requête HTTP ?

La requête HTTP se fait vers le serveur avec JavaScript, il faut disposer d'une instance d'une classe fournissant cette fonctionnalité. Une telle classe a d'abord été introduite dans Internet Explorer sous la forme d'un objet ActiveX appelé XMLHTTP. Par la suite, Mozilla, Safari et d'autres navigateurs ont suivi en implémentant une classe XMLHttpRequest qui fournit les mêmes méthodes et propriétés que l'objet ActiveX original de Microsoft.

Par conséquent, pour créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs, vous pouvez utiliser :

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

Certaines versions de certains navigateurs Mozilla ne fonctionneront pas correctement si la réponse du serveur n'a pas un en-tête XML type mime. Pour vous en assurer, vous pouvez utiliser un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml:

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

La chose suivante à faire est décider ce que vous ferez après avoir reçu la réponse du serveur. À ce stade, vous devez juste communiquer à l'objet de requête HTTP le nom de la fonction JavaScript qui effectuera le travail d'analyse de la réponse. Pour cela, assignez à la propriété onreadystatechange de l'objet le nom de la fonction JavaScript que vous envisagez d'utiliser, comme ceci :

http_request.onreadystatechange = nomDeLaFonction;

Quelques exemples

Dans l'exemple suivant, JavaScript demande un document HTML, hello.html, qui contient le texte « Hello world. », et nous affichons le contenu de ce fichier dans un alert javascript.

<script type="text/javascript" language="javascript">

function makeRequest(url) {

var http_request = false;

if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// Voir la note ci-dessous à propos de cette ligne
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request) {
alert('Abandon Sad

Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { alertContents(http_request); };
http_request.open('GET', url, true);
http_request.send(null);

}

function alertContents(http_request) {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('Un problème est survenu avec la requête.');
}
}

}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest('hello.html')">
Effectuer une requête
</span>

ans cet exemple :

* L'utilisateur clique sur le lien « Effectuer une requête » dans le navigateur ;
* Ceci appelle la fonction makeRequest() avec un paramètre – le nom test.html d'un fichier HTML situé dans le même répertoire ;
* la requête est faite et ensuite (onreadystatechange) l'exécution est passée à alertContents();
* alertContents() vérifie si la réponse a été reçue et est correcte, et affiche ensuite la contenu du fichier test.html dans un message alert().

mlr_di · Inscrit le: 30 Oct 2006 Messages: 1

Bonjour,
J'ai besoin de quelques informations, des documents et des exemples surtout sur l'utilisation d'ajax.
Un de mes amis m'a dit qu'on peut très bien contrôler les formulaires à l'aide d'ajax. Est-ce que quelqu'un peux me donner des urls intéressants et des scripts que je peux télécharger?
Merci d'avance.

ratah3 · Inscrit le: 30 Oct 2006 Messages: 8

Salut Mlr,

http://prototype-window.xilinus.com/samples.html

Il utilise le ptotoype window class. Plusieurs prototypes sont aussi disponibles sur le net:

-scriptaculous
-prototype
-lightBox 2.0

C'est ce que je sais pour le moment.
Si tu trouves d'autres, merci de me signaler car j'en ai besoin.

ratah3 · Inscrit le: 30 Oct 2006 Messages: 8

Pour les autres prototype, voir:

- http://script.aculo.us/
- http://prototype.conio.net/

mouarf · Posté le: Mar Oct 31, 2006 8:47 am Sujet du message:

Après m'être un petit peu documenté sur AJAX, il est apparu que le langage JavaScript, au coeur de AJAX, avait quelques lacunes notamment pour exécuter des commades complexes cela nécessitait beaucoup de lignes de code. Certaines librairies sont donc recommandées pour pallier au moins en partie à ce problème

dojoo

dd-bug

Atlas de Microsoft

Source : Programmez n° 88

Bon j'avoue ne pas encore avoir testé ces librairies ni même AJAX, je suis pour le moment à la phase de documentation mais je compte sur vous pour me faire part de vos avis et impressions sur la bete.

++
_________________
quand il ya une erreur sur un ordinateur, l'origine se situe entre la chaise et le clavier