L'ensemble du processus de lecture de json avec AJAX de JS natif

Tout d'abord, ajax (javascript asynchrone et xml) est utilisé pour l'interaction entre les fichiers front-end et back-end tels que xml ou json. Il s'agit d'une technologie de chargement asynchrone, ce qui signifie que lorsque vous cliquez sur un événement de chargement, vous n'avez plus besoin de rafraîchir la page entière, mais d'envoyer une requête partielle et une réponse partielle. Comme AJAX n'est pas un front-end complet et nécessite l'utilisation d'un serveur, lors des expériences, les fichiers html et xml ou json doivent être placés dans le répertoire de déploiement du serveur. Ici, j'utilise TOMCAT 7X.

Modifiez d'abord un fichier JSON simple et nommez-le json.json, comme suit :

[{  "key":"value"}  ]

function showJson(){
var test;
if(window.XMLHttpRequest){
    test = new XMLHttpRequest();
}else if(window.ActiveXObject){
    test = new window.ActiveXObject();
}else{
    alert("请升级至最新版本的浏览器");
}
if(test !=null){
    test.open("GET","json.json",true);
    test.send(null);
    test.onreadystatechange=function(){
        if(test.readyState==4&&test.status==200){
            var obj = JSON.parse(test.responseText);
            for (var name in obj){
                alert(obj[name].key);
            }
        }
    };
}
}
window.onload=function(){
  showJson();
};</span>

1. Pour utiliser AJAX, nous devons créer une nouvelle instance de XMLHttpRequest(), qui est ActiveXObject() dans les versions inférieures des navigateurs IE. Utilisez simplement la déclaration if pour juger.

2. Déclenchez l'événement onreadystatechange en jugeant l'état interactif de readyState et l'état interactif de status .

Voici une introduction aux quatre valeurs de readyState :

(1) La valeur est 0 : la requête n'a pas été initialisé, ce qui signifie que open() n'a pas encore démarré ;

(2) La valeur est 1 : la requête a été initialisée mais n'a pas été envoyée, ce qui signifie qu'il n'y a pas de send(). encore ;

(3) La valeur est 2 : La demande a été envoyée et est en cours de traitement en arrière-plan.

(4) La valeur est 3 : La demande est toujours en cours de traitement, mais certaines données sont disponibles. Je ne comprends pas très bien ce que cela signifie maintenant.

(5) La valeur est 4 : Le serveur d'arrière-plan a terminé la réponse, c'est-à-dire que vous pouvez désormais obtenir les données demandées à tout moment.

Mais lorsque readyState==4, nous pouvons seulement savoir que le serveur a répondu, mais nous ne savons toujours pas si le serveur a trouvé le fichier que nous avons demandé à ce moment-là, nous devons citer le statut.

Voici quelques valeurs courantes de statut :

(1) 200 : Le fichier demandé a été trouvé.

(2) 404 : Le fichier demandé est introuvable.

(3) 500 : Erreur du serveur.

Lorsque readySate==4 et status==200 sont satisfaits en même temps, nous pouvons obtenir la valeur que nous souhaitons.

3. La valeur renvoyée par le serveur est stockée dans l'objet réponseText. À ce stade, nous pouvons utiliser JSON.parse() pour récupérer les données à l'intérieur.

4. Nous avons maintenant retiré un bloc entier de données dans le fichier JSON, mais si nous voulons obtenir une certaine valeur de bloc, telle que valeur, nous devons utiliser Traversal, tel que comme une boucle for. J'ai utilisé une autre forme de for(var name in obj) pour la boucle for ici, ce qui signifie obtenir la valeur de l'objet et la stocker dans le nom de la variable. Car la structure des fichiers JSON est composée de nombreux objets.

5. Si "GET" est utilisé, la valeur dans send() est nulle. S'il s'agit de POST, vous devez transmettre des paramètres spécifiques tels que : send(name);

Enfin, écrivez-le aux étudiants qui découvrent AJAX. Comment exécuter ce code (configurer l'environnement AJAX).

(1) Vous devez d'abord télécharger un serveur, je recommande TOMCAT.

(2) Déployez (collez) ensuite vos fichiers html et json dans le dossier webapps du répertoire racine de Tomcat.

(3) Retournez au répertoire racine de Tomcat, ouvrez le dossier bin et recherchez startup.bat. Double-cliquez pour ouvrir le serveur Tomcat.

(4) Ouvrez le navigateur et entrez http://localhost:8080/ pour vérifier si Tomcat est ouvert. Si 404 apparaît, le port 8080 est peut-être occupé à ce moment-là. Ouvrez le dossier conf dans le répertoire racine de Tomcat et recherchez le fichier server.xml. Recherchez ce code : Connector port="8080", remplacez 8080 par 8081 ou 8082, puis saisissez à nouveau http://localhost:8081 dans. le navigateur /Vérifiez si Tomcat est ouvert.

(5) Saisissez le chemin de votre fichier html dans le navigateur, par exemple : http://localhost:8080/test/index.html.

Cet article présente l'ensemble du processus de lecture de json à l'aide d'AJAX à l'aide de JS natif. Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.

Recommandations associées :

Installation et configuration de vue.js

JS implémente l'impression et l'aperçu avant impression dans le navigateur

Instance de fonction de rappel JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!