Le format JSON, AJAX et jQuery Utilisation en AJAX avec XMLHttpRequest et jQuery

XMLHttpRequest est l'interface de base pour effectuer un appel AJAX avec JavaScript. Il convient bien entendu d'interroger la bonne URL avec la méthode GET ou POST appropriée et de développer côté serveur le script fournissant une réponse au format JSON.

var courses = {};
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function () {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
   courses = JSON.parse(xmlhttp.responseText);
 }
};
xmlhttp.send(null);

Attention : cet exemple n'est pas compatible multi-navigateurs, ceux-ci implémentant l'objet XMLHttpRequest de différentes manières, notamment les anciennes versions d'Internet Explorer au travers des ActiveX. 

 

Pouvoir effectuer des appels AJAX inter-domaines

Pour des raisons de sécurité, mieux vaut se limiter à autoriser l'usage de JSON par le navigateur client en JavaScript

L'intérêt de JSON avec les fonctions proposées par jQuery est de pouvoir effectuer des appels AJAX inter-domaines de manière simplifiée. En effet, les restrictions sur les autres types de données (HTML, texte, fichiers binaires) sont fortes : pour des raisons de sécurité de navigation et de protection des informations sur un domaine (en évitant le Cross-Site Scripting et le vol de contenu d'un site à l'autre), on se limite généralement à autoriser l'usage de JSON par le navigateur client en JavaScript.
 

L'adresse appelée par l'objet XMLHttpRequest doit résider dans le même domaine que le serveur hébergeant la page d'origine effectuant l'appel. Bien entendu les autres langages et fichiers restent disponibles du point de vue développement serveur si celui-ci autorise les connexions sortantes, par exemple pour récupérer grâce à PHP un fichier XML distant sur un serveur HTTP.