In diesem Artikel geht es hauptsächlich um das Grundwissen über Ajax, die Geschichte von Ajax und die grundlegende Verwendung von Ajax. Schauen wir uns nun gemeinsam diesen Artikel an
AJAX-Grundlagen
AJAX bezieht sich auf asynchrones JavaScript und XML.
AJAX ist ein Programmiermodell, das 2005 von Google populär gemacht wurde.
AJAX ist keine neue Programmiersprache, sondern eine neue Art, bestehende Standards zu nutzen.
Mit AJAX können Sie bessere, schnellere und benutzerfreundlichere WEB-Anwendungen erstellen.
AJAX basiert auf JavaScript- und HTTP-Anfragen (HTTP-Anfragen).
Einführung in AJAX
AJAX bezieht sich auf asynchrones JavaScript und XML.
Grundkenntnisse, die Sie haben sollten
Bevor Sie fortfahren, müssen Sie über grundlegende Kenntnisse über Folgendes verfügen:
* HTML / XHTML
* JavaScript
Wenn Sie diese Elemente zuerst erlernen möchten, wenden Sie sich bitte an uns Greifen Sie auf diese Tutorials auf unserer Homepage zu.
AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML)
AJAX ist keine neue Programmiersprache, sondern eine Technologie zur Erstellung besserer, schnellerer und interaktiverer Webanwendungen.
Mit AJAX kann Ihr JavaScript über das XMLHttpRequest-Objekt von JavaScript direkt mit dem Server kommunizieren. Über dieses
-Objekt tauscht Ihr JavaScript-Webserver Daten aus. AJAX kann die asynchrone Datenübertragung (HTTP-Anfragen) zwischen dem Browser und dem Webserver verwenden, ohne die Seite neu zu laden, wodurch die Webseite eine kleine Menge an Informationen vom Server anfordern kann, anstatt
die gesamte Seite.
AJAX macht Internetanwendungen kleiner, schneller und benutzerfreundlicher.
AJAX ist eine Browser-Technologie, die unabhängig von der Webserver-Software ist.
AJAX basiert auf Webstandards
AJAX basiert auf den folgenden Webstandards:
* JavaScript
* XML
* HTML
* CSS
Die in AJAX verwendeten Webstandards sind gut definiert und werden von allen gängigen Browsern unterstützt. AJAX-Anwendungen sind browser- und plattformunabhängig.
Bei AJAX geht es um bessere Anwendungen
Webanwendungen haben gegenüber Desktopanwendungen viele Vorteile: Sie können ein breiteres Benutzerspektrum erreichen, sind einfacher zu installieren und zu warten und einfacher zu entwickeln.
Internetanwendungen sind jedoch nicht so vollständig und benutzerfreundlich wie herkömmliche Desktop-Anwendungen.
Durch AJAX können Internetanwendungen vollständiger und benutzerfreundlicher werden. (Wenn Sie mehr sehen möchten, besuchen Sie die Spalte
AJAX-Entwicklungshandbuch auf der chinesischen PHP-Website, um mehr zu erfahren)
AJAX-HTTP-Anfrage Eine JAX verwendet HTTP-Anfrage
Wenn Sie in der herkömmlichen JavaScript-Programmierung Informationen aus Dateien oder Datenbanken auf dem Server abrufen oder Informationen an den Server senden möchten
, müssen Sie ein HTML-Formular verwenden, um Daten an den Server abzurufen oder zu posten. Der Benutzer muss auf die Schaltfläche „Senden“ klicken, um Informationen zu senden/abzurufen, auf die Antwort des Servers warten und dann wird eine neue Seite mit den Ergebnissen geladen.
Herkömmliche Webanwendungen werden langsam und zunehmend unfreundlich, da der Server jedes Mal, wenn der Benutzer eine Eingabe übermittelt, eine neue Seite zurückgibt.
Durch die Nutzung von AJAX kommuniziert Ihr JavaScript direkt mit dem Server über das XMLHttpRequest-Objekt von JavaScript.
Durch die Verwendung von HTTP-Anfragen kann eine Webseite eine Anfrage an den Server stellen und eine Antwort vom Server erhalten, ohne die Seite zu laden. Der Benutzer kann auf der gleichen
Seite bleiben und merkt nicht, dass das Skript im Hintergrund die Seite anfordert oder Daten an den Server sendet.
XMLHttpRequest-Objekt
Mithilfe des XMLHttpRequest-Objekts können Webentwickler Seiten vom Server aktualisieren, nachdem die Seite geladen wurde!
AJAX wurde 2005 von Google populär gemacht (Google Suggest).
Google empfiehlt die Verwendung des XMLHttpRequest-Objekts, um eine sehr dynamische Weboberfläche zu erstellen: Wenn Sie mit der Eingabe einer
-Anfrage in das Suchfeld von Google beginnen, sendet JavaScript die Wörter an einen Server, der dann eine Reihe von Suchvorschlägen zurückgibt.
Das XMLHttpRequest-Objekt wird von den folgenden Browsern unterstützt: Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0/Firefox, Opera 8+ und Netscape 7.
Ihre erste AJAX-Anwendung
Zuerst benötigen wir ein HTML-Formular mit zwei Textfeldern: Benutzername und Uhrzeit. Das Textfeld „Benutzername“ wird vom Benutzer ausgefüllt, während das Textfeld „Zeit“ mit
AJAX ausgefüllt wird.
Diese HTML-Datei heißt „testAjax.htm“ (bitte beachten Sie, dass dieses HTML-Formular keinen Senden-Button hat!):
<html> <body> <form name="myForm"> 用户: <input type="text" name="username" /> 时间: <input type="text" name="time" /> </form> </body> </html>
AJAX-Browserunterstützung
AJAX – Der Hauptpunkt der Browserunterstützung
AJAX ist das XMLHttpRequest-Objekt.
Verschiedene Browser erstellen XMLHttpRequest-Objekte auf unterschiedliche Weise.
Der IE-Browser verwendet ActiveXObject, während andere Browser ein in JavaScript integriertes Objekt namens XMLHttpRequest verwenden.
Um dieses Objekt für verschiedene Browser zu erstellen, müssen wir eine „Try and Catch“-Anweisung verwenden. Weitere Informationen zu Try- und Catch-Anweisungen finden Sie in unserem JavaScript-Tutorial
.
Aktualisieren wir unsere Datei „testAjax.htm“ mit diesem JavaScript, das ein XMLHttpRequest-Objekt erstellt:
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
return false;
}
}
}
}
</script>
<form name="myForm">
用户: <input type="text" name="username" />
时间: <input type="text" name="time" />
</form></body>
</html>Erklärung des Beispiels:
Zuerst deklarieren eine xmlHttp-Variable, die das XMLHttpRequest-Objekt enthält.
Dann verwenden Sie XMLHttp=new XMLHttpRequest(), um dieses Objekt zu erstellen. Diese Erklärung gilt für die Browser Firefox, Opera und Safari.
Wenn dies fehlschlägt, versuchen Sie es mit xmlHttp=new ActiveXObject("Msxml2. XMLHTTP").
Wenn keine dieser drei Methoden funktioniert, verwendet der Benutzer einen veralteten Browser und ihm wird eine Meldung angezeigt, dass dieser Browser
AJAX nicht unterstützt.
Hinweis: Die Codes zum Anpassen der oben genannten Browser sind sehr lang und komplex. Dieser Code
ist jedoch immer dann praktisch, wenn Sie ein XMLHttpRequest-Objekt erstellen möchten, sodass Sie diesen Code jederzeit kopieren und einfügen können. Die oben genannten Codes sind mit allen gängigen Browsern kompatibel:
Internet Explorer, Opera, Firefox und Safari.
AJAX – XMLHttpRequest-Objekt AJAX – Mehr Wissen über XMLHttpRequest-Objekt
Bevor wir Daten an den Server senden, müssen wir die drei wichtigen Eigenschaften des XMLHttpRequest-Objekts erklären.
onreadystatechange-Attribut
onreadystatechange-Attribut speichert Funktionen, die Serverantworten verarbeiten. Der folgende Code definiert eine leere Funktion, die auch das Attribut
onreadystatechange festlegen kann:
xmlHttp.onreadystatechange=function()
{
// Wir müssen hier etwas Code schreiben
}
readyState-Attribut
readyState-Attribut speichert die Statusinformationen der Serverantwort. Immer wenn sich readyState ändert, wird die Funktion onreadystatechange ausgeführt.
Hier sind die möglichen Werte für das readyState-Attribut:
Statusbeschreibung
0
Die Anfrage wurde nicht initialisiert (vor dem Aufruf von open())
1
Die Anfrage wurde gemacht (bevor das Senden() aufgerufen wird) )
2
Die Anfrage wurde gesendet (der Inhaltsheader kann normalerweise hier aus der Antwort abgerufen werden)
3
Die Anfrage wird verarbeitet (einige Daten ist normalerweise in der Antwort verfügbar, aber der Server hat die Antwort noch nicht abgeschlossen)
4
Die Anfrage ist abgeschlossen (kann auf die Serverantwort zugreifen und sie verwenden)
Wir werden ein If hinzufügen Anweisung zu dieser onreadystatechange-Funktion, um zu testen, ob unsere Antwort vollständig ist (was bedeutet, dass Daten verfügbar sind)
:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
//Daten aus der Antwort des Servers abrufen
}
}
ResponseText-Attribut
Die vom Server zurückgegebenen Daten können über das ResponseText-Attribut abgerufen werden.
In unserem Code setzen wir den Wert des Zeittextfelds auf „responseText“:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
AJAX – Anfrage an den ServerAJAX – Eine Anfrage an den Server senden
Um die Anfrage an den Server zu senden, müssen wir die Methoden open() und send() verwenden.
Die open()-Methode erfordert drei Parameter. Der erste Parameter definiert die Methode, mit der die Anfrage gesendet wird (GET oder POST). Der zweite Parameter gibt die URL des serverseitigen
-Skripts an. Der dritte Parameter gibt an, dass die Anfrage asynchron verarbeitet werden soll.
Die send()-Methode sendet die Anfrage an den Server. Wenn wir davon ausgehen, dass sich die HTML-Datei und die ASP-Datei im selben Verzeichnis befinden, sieht der Code wie folgt aus:
xmlHttp.open("GET","time.asp",true);
xmlHttp. send(null);
Jetzt müssen wir entscheiden, wann die AJAX-Funktion ausgeführt werden soll. Wenn der Benutzer etwas in das Textfeld „Benutzername“ eingibt, wird die Funktion „hinter den Kulissen“ ausgeführt
.
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();"/>
时间: <input type="text" name="time" />
</form>
</body>
</html>AJAX – Serverseitiges Skript Jetzt erstellen wir ein Skript, das die aktuelle Serverzeit anzeigt.
Das Attribut „responseText“ speichert die vom Server zurückgegebenen Daten. Hier wollen wir die aktuelle Zeit zurückgeben. Dies ist der Code für „time.asp“:
<%response.expires=-1 response.write(time)%>
注释：Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被
缓存。
运行您的 AJAX 应用程序
请在下面的文本框中键入一些文本，然后单击时间文本框：
用户 : 时间 :
时间文本框可在不加载页面的情况下从 "time.asp" 获得服务器的时间！
本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。
Das obige ist der detaillierte Inhalt vonWie verwende ich eine Ajax-HTTP-Anfrage? Wie fordert Ajax den Server an? (Beigefügt mit Beispielanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
