[AJAX] Introduction (+JQuery)

mars073

Salut all,


Je me suis enfin motivé à faire une intro sur l'ajax et son utilisation simplifié avec JQuery.





Comme le veut la tradition du manque d'humour avec l'ajax:





<img alt="2005.png" src="<base_url>/applications/sslimageproxy/interface/image.php?url=http://www.colgate.fr/PDP/Ajax/FR/About/Story/images/2005.png"/>

Donc pour ceux qui ne savent pas ce qu'est l'ajax, en gros c'est à la place de faire recharger votre site pour quelques données vous faites une requêtes en arrière plan, c'est utile dans les shoutboxs ou pour faire certain effet sur les sites (par exemple).





L'ajax c'est du javascript rien à foutre de ce que vous dites et NON son utilisation par JQuery ne fait pas de vous un "dev" en ajax...





Comme je l'ai dis au dessus c'est l’exécution d'une requête en arrière-plan donc il faut l'initialiser > configurer la requête > l'envoyer (> récupérer réponse)





Initialisation:




<pre class="ipsCode prettyprint lang-auto prettyprinted">
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Un petit test pour IE car ils savent pas faire comme les autres...
request = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Votre système d'exploitation internet ne semble pas supporter l'ajax..");
}</pre>

Envoyer une simple requête (comme si vous alliez sur la page):




<pre class="ipsCode prettyprint lang-auto prettyprinted">
request.open("GET", "fichier.php", true);

request.send(null);</pre>

donc vous avez dans ce cas 2 fonctions .open() et .send():


-open(): vous "ouvrez" une requête enfin de lui expliquer comment elle doit s’exécuter en 3 paramètres:


-- "GET" : type d'envoie de la requête


-- "fichier.php" : le fichier/page sur le quel il va être exécute


-- true : mode asynchrone





-send(): envoie de la requête dans ce cas présent il y a null car il n'y a aucun envoie de donnée


maintenant un envoie un peut plus complexe, on va faire un système d'inscription à un newsletter par requête post ._.


code html (compliqué tousse




<pre class="ipsCode prettyprint lang-auto prettyprinted">
<input id="mail" type="email">
<input id="send" type="button" onClick="inscription();"></pre>

El js (ajax):




<pre class="ipsCode prettyprint lang-html prettyprinted">
function inscription() {
var mail = document.getElementById("mail").value;
request.open("POST", "fichier.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("?mail=" + mail);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
alert(request.responseText);
}
}
}</pre>

Dans cet exemple j'ai fais une fonction du nom d'inscription, le fichier "fichier.php" dit si l'inscription a été validé ou non,


-open(): cette fois-ci ce n'est pas une requête GET mais POST donc je récupére les données en php avec $_POST[];


-setRequestHeader(): fonction optionnel pour préciser des paramètres dans l'entête de la requête


-send(): je mets en forme la variable que j'ai récupéré du nom de mail, les variables doivent être mit selon la norme RFC-1738 exemple : ?variable=123&var2=Bonjour&page=recherche&patati=p atata


-onreadystatechange : c'est l'eventement qui est généré lors de l'envoie des différents étapes de l'envoie


-readyState et status : je test le stade de la requête pour voir si elle est valide::


--readyState:


--- 0 : requête non initialisé


--- 1 : connexion au serveur établie


--- 2 : requête envoyée


--- 3 : traitement de la requête


--- 4 : réponse reçu


--status:


--- 200: "Ok"... je sais pas comment expliquer xD 

--- 404: page non trouvée


-responseText : retourne la reponse de la requête sous forme de texte brut





et la version simplifiée (en JQuery):


vous avez 3 possibilité qui reviennent presque au même : $.ajax, $.get et $.post, j'ai expliqué la différence au dessus (le $.ajax et similaire au $.get).





La syntaxe pour un simple envoie avec $.ajax:




<pre class="ipsCode prettyprint lang-auto prettyprinted">
$.ajax({url:"fichier.php"});</pre>

La syntaxe pour un simple envoie avec $.get et un petit message à la fin de l'envoie:




<pre class="ipsCode prettyprint lang-auto prettyprinted">
$.get("fichier.php", function() {
alert("requête envoyée");
});</pre>

La syntaxe pour envoie avec variables avec $.post et recupération des données (fonctionnel avec $.get sans les variables entre {}):




<pre class="ipsCode prettyprint lang-auto prettyprinted">
$.post("fichier.php", {
page : "mmotrick",
methode : "ajax",
version : 3
}, function(data, statut){
alert("Réponse requête: " + statut + "# " + data);
});</pre>

...

Soon

Ajax professional :lol: 
Le tutoriel est fini ?

mars073

<blockquote class="ipsQuote" data-cite="Soon" data-ipsquote="" data-ipsquote-contentclass="forums_Topic" data-ipsquote-contentcommentid="2050" data-ipsquote-contentid="190" data-ipsquote-contenttype="forums" data-ipsquote-timestamp="1395004624" data-ipsquote-username="Soon"><div>Le tutoriel est fini ?</div></blockquote>je voulais ajouter encore un truc à la fin mais je sais plu quoi x'D

Azad

Très bon guide, merci de l'avoir fait pour Melinyel. 
+1 Rep.

NodeBB

[AJAX] Introduction (+JQuery)