AJAX Exemple JSON

AJAX peut être utilisé pour une communication interactive avec des fichiers JSON.

Exemple AJAX JSON

L'exemple suivant montrera comment une page web utilise AJAX pour lire des informations à partir d'un fichier JSON :

Exemple




Essayez-le vous-même »

Analyse de l'exemple - Fonction loadXMLDoc()

Lorsque l'utilisateur clique sur le bouton ci-dessus"Obtenir les données du cours", la fonction loadXMLDoc() sera exécutée.

La fonction loadXMLDoc() crée un objet XMLHttpRequest, ajoute une fonction à exécuter lorsque la réponse du serveur est prête, et envoie la requête au serveur.

Lorsque la réponse du serveur est prête, nous utilisons la méthodeJSON.parse()pour convertir les données en un objet JavaScript.

Charger un document JSON de manière asynchrone

function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { //Les navigateurs IE7+, Firefox, Chrome, Opera, Safari exécutent le code xmlhttp=new XMLHttpRequest(); } else { //les navigateurs IE6, IE5 exécutent le code xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var myArr = JSON.parse(this.responseText); myFunction(myArr) } } xmlhttp.open("GET","/try/ajax/json_ajax.json",true); xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xmlhttp.send(); } function myFunction(arr) { var out = ""; var i; for(i = 0; i < arr.length; i++) { out += '<a href="' + arr[i].url + '">' + arr[i].title + '</a><br>'; } document.getElementById("myDiv").innerHTML=out; }

Page serveur AJAX

La page serveur utilisée dans l'exemple ci-dessus est en fait un fichier nommé "" fichier JSON.

Les données JSON sont les suivantes :

fichier json_ajax.json :

[ { "title": "Tutoriel JavaScript", "url": "https://www.example.com/js/" }, { "title": "Tutoriel HTML", "url": "https://www.example.com/html/" }, { "title": "Tutoriel CSS", "url": "https://www.example.com/css/" } ]

Envoyer des données JSON :

xmlhttp.send(JSON.stringify({ "email": "[email protected]", "response": { "name": "example" } }));
Autres extensions