Ausführliche Erläuterung der Verwendung von AJAX und JavaScript

Dieses Mal werde ich Ihnen die Verwendung von AJAX und JavaScript ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung von AJAX und JavaScript? Hier sind praktische Fälle.

AJAX ist keine JavaScript-Spezifikation, sondern nur eine von einem Freund „erfundene“ Abkürzung: Asynchronous JavaScript and XML, was bedeutet, dass JavaScript zum Ausführen asynchroner Netzwerkanforderungen verwendet wird.

Wenn Sie die Übermittlung eines Formulars sorgfältig beobachten, werden Sie feststellen, dass der Browser die Seite aktualisiert, sobald der Benutzer auf die Schaltfläche „Senden“ klickt und das Formular zu senden beginnt, und Ihnen dann die neue Seite mitteilt ob die Operation erfolgreich war oder nicht. Sollte das Netzwerk leider zu langsam sein oder aus anderen Gründen, erhalten Sie eine 404-Seite.

So funktioniert das Web: Eine HTTP-Anfrage entspricht einer Seite.

Wenn Sie möchten, dass der Benutzer auf der aktuellen Seite bleibt und gleichzeitig eine neue HTTP-Anfrage stellt, müssen Sie JavaScript verwenden, um die neue Anfrage zu senden. Nachdem Sie die Daten erhalten haben, aktualisieren Sie die Seite mit JavaScript. Auf diese Weise hat der Benutzer das Gefühl, dass er immer noch auf der aktuellen Seite bleibt, die Daten jedoch kontinuierlich aktualisiert werden können.

Der früheste groß angelegte Einsatz von AJAX war Gmail. Nachdem die Gmail-Seite zum ersten Mal geladen wurde, waren alle verbleibenden Daten zur Aktualisierung auf AJAX angewiesen.

Das Schreiben eines vollständigen AJAX-Codes in JavaScript ist nicht kompliziert, aber Sie müssen darauf achten: AJAX-Anfragen werden asynchron ausgeführt, das heißt, die Antwort muss über die Rückruffunktion abgerufen werden.
Das Schreiben von AJAX in modernen Browsern basiert hauptsächlich auf dem XMLHttpRequest-Objekt:

function success(text) {
 var textarea = document.getElementById('test-response-text');
 textarea.value = text;
}
function fail(code) {
 var textarea = document.getElementById('test-response-text');
 textarea.value = 'Error code: ' + code;
}
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
 if (request.readyState === 4) { // 成功完成
  // 判断响应结果:
  if (request.status === 200) {
   // 成功，通过responseText拿到响应的文本:
   return success(request.responseText);
  } else {
   // 失败，根据响应码判断失败原因:
   return fail(request.status);
  }
 } else {
  // HTTP请求还在继续...
 }
}
// 发送请求:
request.open('GET', '/api/categories');
request.send();
alert('请求已发送，请等待响应...');

Für niedrigere Versionen von IE müssen Sie zu ActiveX wechselnObjektobjekt :

function success(text) {
 var textarea = document.getElementById('test-ie-response-text');
 textarea.value = text;
}
function fail(code) {
 var textarea = document.getElementById('test-ie-response-text');
 textarea.value = 'Error code: ' + code;
}
var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
 if (request.readyState === 4) { // 成功完成
  // 判断响应结果:
  if (request.status === 200) {
   // 成功，通过responseText拿到响应的文本:
   return success(request.responseText);
  } else {
   // 失败，根据响应码判断失败原因:
   return fail(request.status);
  }
 } else {
  // HTTP请求还在继续...
 }
}
// 发送请求:
request.open('GET', '/api/categories');
request.send();
alert('请求已发送，请等待响应...');

Wenn Sie Standardschrift und IE-Schreibweise mischen möchten, können Sie so schreiben:

var request;
if (window.XMLHttpRequest) {
 request = new XMLHttpRequest();
} else {
 request = new ActiveXObject('Microsoft.XMLHTTP');
}

Bestandenerkennungwindow Ob das Objekt das Attribut XMLHttpRequest hat, bestimmt, ob der Browser den Standard XMLHttpRequest unterstützt. Beachten Sie, dass Sie nicht den navigator.userAgent des Browsers verwenden, um festzustellen, ob der Browser eine bestimmte JavaScript-Funktion unterstützt. Zum einen, weil die Zeichenfolge selbst gefälscht werden kann, und zum anderen, um JavaScript zu beurteilen Durch die IE-Version werden die Funktionen sehr komplex sein.

Nachdem Sie das XMLHttpRequest-Objekt erstellt haben, müssen Sie zunächst die Rückruffunktion von onreadystatechange festlegen. In der Rückruffunktion müssen wir normalerweise nur anhand von readyState === 4 beurteilen, ob die Anfrage abgeschlossen ist === 200Bestimmen Sie, ob es sich um eine erfolgreiche Antwort handelt. Die Methode
XMLHttpRequest des Objekts hat 3 Parameter Zwei Parameter geben die URL-Adresse an, und der dritte Parameter gibt an, ob asynchron verwendet werden soll. Der Standardwert ist true, daher ist es nicht erforderlich, ihn zu schreiben. Hinweis: Geben Sie den dritten Parameter niemals als

false an, sonst reagiert der Browser nicht mehr, bis AJAX aktiviert ist Die Anfrage ist abgeschlossen. Wenn diese Anfrage 10 Sekunden dauert, werden Sie innerhalb von 10 Sekunden feststellen, dass sich der Browser in einem „Suspended Death“-Zustand befindet. Rufen Sie abschließend die send()-Methode auf, um die Anfrage tatsächlich zu senden. GET-Anfragen erfordern keine Parameter und POST-Anfragen erfordern die Übergabe des Textteils als Zeichenfolge oder FormData-Objekt.

SicherheitseinschränkungenDie URL im obigen Code verwendet relative Pfade. Wenn Sie es von

in „http://www.sina.com.cn/“ ändern und erneut ausführen, wird auf jeden Fall ein Fehler gemeldet. In der Chrome-Konsole wird auch eine

angezeigt. Dies wird durch die Same-Origin-Richtlinie des Browsers verursacht. Wenn JavaScript eine AJAX-Anfrage sendet, muss der Domänenname der URL standardmäßig genau mit dem der aktuellen Seite übereinstimmen.

完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。有的浏览器口子松一点，允许端口不同，大多数浏览器都会严格遵守这个限制。

<html>
<head>
 <script src="http://example.com/abc.js"></script>
 ...
</head>
<body>
...
</body>
</html>