Mit Hilfe von XMLHttpRequest kann der Browser mit dem Server interagieren, ohne die gesamte Seite zu aktualisieren. Dies ist das sogenannte Ajax (Asynchronous JavaScript and XML). Ajax kann Benutzern eine umfassendere Benutzererfahrung bieten.
Ajax-Anfragen werden über JavaScript-Code an die URL gesendet. Wenn der Server antwortet, wird eine Rückruffunktion ausgelöst. Da der gesamte Prozess des Sendens von Anfragen und Antworten asynchron ist, werden andere Javascript-Codes auf der Seite während dieses Zeitraums ohne Unterbrechung weiter ausgeführt.
jQuery bietet sicherlich eine gute Unterstützung für Ajax und abstrahiert auch die schmerzhaften Unterschiede in der Ajax-Unterstützung zwischen verschiedenen Browsern. Es bietet nicht nur die voll funktionsfähige Methode $.ajax(), sondern auch weitere Funktionen wie $.get(), $.getScript(), $.getJSON(), $.post() und $().load () usw. Für eine einfache Methode.
Obwohl es Ajax heißt, verwenden viele Ajax-Anwendungen kein XML, insbesondere jQuery-Ajax-Anwendungen. Die meisten von ihnen verwenden stattdessen kein XML, sie werden häufiger verwendet: einfacher Text, HTML und JSON (JavaScript) Object Notation. .
Im Allgemeinen kann Ajax aufgrund der Einschränkungen der Same-Origin-Richtlinie (gleiches Protokoll, gleicher Domänenname, gleicher Port) keine domänenübergreifenden Anforderungen ausführen, es sei denn, eine Lösung wie JSONP (JSON mit Padding) wird verwendet, um dies zu erreichen einige betroffene Anfragen eingeschränkte domänenübergreifende Funktionalität.
Einige wichtige Konzepte zu Ajax
GET vs. POST, das sind die beiden am häufigsten verwendeten Methoden zum Senden von Anfragen an den Server. Ein korrektes Verständnis der Unterschiede zwischen diesen beiden Methoden ist für die Ajax-Entwicklung sehr wichtig.
Die GET-Methode wird normalerweise verwendet, um einige zerstörungsfreie Vorgänge auszuführen (dh nur Informationen vom Server abzurufen, ohne die Informationen auf dem Server zu ändern). Suchabfragedienste verwenden beispielsweise normalerweise GET-Anfragen. Darüber hinaus werden GET-Anfragen möglicherweise auch vom Browser zwischengespeichert, was zu unvorhersehbaren Problemen führen kann. Im Allgemeinen können GET-Anfragen Daten nur über Abfragezeichenfolgen an den Server senden.
Die POST-Methode wird normalerweise verwendet, um einige destruktive Vorgänge auf dem Server auszuführen (d. h. die Daten auf dem Server zu ändern). Wenn Sie beispielsweise einen Blog-Beitrag veröffentlichen, sollten Sie eine POST-Anfrage verwenden. Im Gegensatz zu GET-Anfragen gibt es bei POST-Anfragen keine Caching-Probleme. Bei POST-Anfragen kann die Abfragezeichenfolge als Teil der URL auch Daten an den Server senden, diese Methode wird jedoch nicht empfohlen. Alle Daten sollten separat von der URL gesendet werden.
Datentyp, jQuery erfordert normalerweise die Angabe des vom Server zurückgegebenen Datentyps. In einigen Fällen ist der Datentyp möglicherweise bereits im Methodennamen enthalten, z. B. $.getJSON(). Andernfalls wird er als verwendet verfügbar Teil des konfigurierten Objekts, das schließlich als Parameter der $.ajax()-Methode verwendet wird. Zu den Datentypen gehören normalerweise Folgendes:
Asynchrone Ausführung, das A in Ajax bezieht sich auf asynchron. An diesem Punkt kann es für viele jQuery-Anfänger schwierig sein zu verstehen, was asynchron ist, da Ajax-Anfragen standardmäßig asynchron sind und die vom Server zurückgegebenen Informationen nicht sofort verfügbar sind. Alle vom Server zurückgegebenen Informationen können nur in einer Callback-Funktion verarbeitet werden. Beispielsweise ist der folgende Code falsch:
var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!
Der richtige Ansatz sollte darin bestehen, die vom Server zurückgegebenen Daten in der Rückruffunktion zu verarbeiten. Die Rückruffunktion wird nur ausgeführt, wenn die Ajax-Anfrage erfolgreich abgeschlossen wurde:
$.get('foo.php', function(response) { console.log(response); });
同源策略及 JSONP，前面已经说过，一般情况下 Ajax 的请求会被限制在相同协议（http 或 https）、相同端口、相同域名下才能正确执行，但是 HTML 的
