Der gesamte Prozess des Lesens von JSON mit AJAX von nativem JS

Zuallererst wird Ajax (asynchrones Javascript und XML) für die Interaktion zwischen Front-End- und Back-End-Dateien wie XML oder JSON verwendet. Es handelt sich um eine asynchrone Ladetechnologie, was bedeutet, dass Sie beim Klicken auf ein Ladeereignis nicht mehr die gesamte Seite aktualisieren müssen, sondern eine teilweise Anfrage und eine teilweise Antwort senden müssen. Da AJAX kein vollständiges Frontend ist und die Verwendung eines Servers erfordert, müssen bei Experimenten die HTML-Dateien und XML oder JSON im Server-Bereitstellungsverzeichnis abgelegt werden. Hier verwende ich TOMCAT 7X.

Bearbeiten Sie zunächst eine einfache JSON-Datei und benennen Sie sie wie folgt json.json:

[{  "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. Um AJAX verwenden zu können, müssen wir neu sein Eine Instanz von XMLHttpRequest(), das in niedrigeren Versionen von IE-Browsern ActiveXObject() ist. Verwenden Sie zur Beurteilung einfach die if-Anweisung.

2. Lösen Sie das onreadystatechange-Ereignis aus, indem Sie den interaktiven Status von readyState und den interaktiven Statusstatus beurteilen .

Hier ist eine Einführung in die vier Werte von readyState:

(1) Der Wert ist 0: Die Anfrage wurde nicht gestellt initialisiert, was bedeutet, dass open() noch nicht gestartet wurde

(2) Der Wert ist 1: Die Anfrage wurde initialisiert, aber nicht gesendet, was bedeutet, dass es kein send() gibt; noch;

(3) Der Wert ist 2: Die Anfrage wurde gesendet und wird im Hintergrund verarbeitet.

(4) Der Wert ist 3: Die Anfrage wird noch bearbeitet, aber einige Daten sind verfügbar. Ich verstehe jetzt nicht ganz, was das bedeutet.

(5) Der Wert ist 4: Der Hintergrundserver hat die Antwort abgeschlossen, das heißt, Sie können jetzt jederzeit die angeforderten Daten abrufen.

Aber wenn readyState==4 ist, können wir nur wissen, dass der Server geantwortet hat, aber wir wissen immer noch nicht, ob der Server die von uns angeforderte Datei gefunden hat. Wir müssen den Status zitieren.

Hier sind einige allgemeine Statuswerte:

(1) 200: Die angeforderte Datei wurde gefunden.

(2) 404: Die angeforderte Datei kann nicht gefunden werden.

(3) 500: Serverfehler.

Wenn readySate==4 und status==200 gleichzeitig erfüllt sind, können wir den gewünschten Wert erhalten.

3. Der vom Server zurückgegebene Wert wird im ResponseText-Objekt gespeichert. Zu diesem Zeitpunkt können wir JSON.parse() verwenden, um die Daten darin abzurufen.

4. Wir haben jetzt einen ganzen Datenblock in der JSON-Datei herausgenommen, aber wenn wir einen bestimmten Blockwert erhalten möchten, z. B. value, müssen wir Traversal verwenden, z als for-Schleife. Ich habe hier eine andere Form von for(var name in obj) für die for-Schleife verwendet, was bedeutet, den Wert des Objekts abzurufen und ihn im Variablennamen zu speichern. Denn die Struktur von JSON-Dateien besteht aus vielen Objekten.

5. Wenn „GET“ verwendet wird, ist der Wert in send() null. Wenn es sich um POST handelt, müssen Sie bestimmte Parameter übergeben, wie zum Beispiel: send(name);

Zum Schluss schreiben Sie es an Schüler, die neu bei AJAX sind. So führen Sie diesen Code aus (konfigurieren Sie die AJAX-Umgebung).

(1) Zuerst müssen Sie einen Server herunterladen, ich empfehle TOMCAT.

(2) Stellen Sie dann Ihre HTML- und JSON-Dateien im Ordner „webapps“ im Stammverzeichnis von Tomcat bereit (fügen Sie sie ein).

(3) Kehren Sie zum Tomcat-Stammverzeichnis zurück, öffnen Sie den Ordner „bin“ und suchen Sie „startup.bat“. Doppelklicken Sie, um den Tomcat-Server zu öffnen.

(4) Öffnen Sie den Browser und geben Sie http://localhost:8080/ ein, um zu überprüfen, ob Tomcat geöffnet ist. Wenn 404 angezeigt wird, ist Port 8080 möglicherweise belegt Öffnen Sie den Ordner conf im Stammverzeichnis von Tomcat und suchen Sie die Datei server.xml. Suchen Sie diesen Code: Connector port="8080", ändern Sie 8080 in 8081 oder 8082 und geben Sie http://localhost:8081 erneut ein im Browser /Überprüfen Sie, ob Tomcat geöffnet ist.

(5) Geben Sie Ihren HTML-Dateipfad in den Browser ein, zum Beispiel: http://localhost:8080/test/index.html.

In diesem Artikel wird der gesamte Prozess des Lesens von JSON mit AJAX und nativem JS vorgestellt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

vue.js Installation und Konfiguration

JS implementiert Browserdruck und Druckvorschau

JS-Callback-Funktionsinstanz

Das obige ist der detaillierte Inhalt vonDer gesamte Prozess des Lesens von JSON mit AJAX von nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!