ajax umfasst die folgenden Technologien: 1. HTML oder asynchrone Kommunikation durchführen; 5. JavaScript, Bindung und Aufruf implementieren.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
Ajax ist ein neuer Begriff, der 2005 von Jesse James Garrett vorgeschlagen wurde, um eine „neue“ Methode zu beschreiben, die eine Sammlung bestehender Technologien verwendet, darunter: HTML oder XHTML, CSS, JavaScript, DOM, XML, XSLT und vor allem XMLHttpRequest.
Mithilfe der Ajax-Technologie können Webanwendungen schnell inkrementelle Aktualisierungen der Benutzeroberfläche präsentieren, ohne dass die gesamte Seite neu geladen (aktualisiert) werden muss, wodurch das Programm schneller auf Benutzervorgänge reagieren kann.
In Ajax enthaltene Technologie:
Jeder weiß, dass Ajax keine neue Technologie ist, sondern eine Kombination mehrerer Originaltechnologien. Es besteht aus den folgenden Technologien.
1. HTML oder XHTML, wird zum Erstellen von Webinhalten verwendet
2, wird zum Verschönern von Webinhalten verwendet
3.
4. Verwenden Sie XMLHttpRequest, um asynchron mit dem Server zu kommunizieren.
5. Verwenden Sie Javascript zum Binden und Aufrufen.
Unter den oben genannten Technologien basieren alle anderen Technologien mit Ausnahme des XmlHttpRequest-Objekts auf Webstandards und sind weit verbreitet. Obwohl XMLHttpRequest noch nicht vom W3C übernommen wurde, ist es bereits ein De-facto-Standard unterstütze es derzeit.
Ajax-Prinzip und XmlHttpRequest-Objekt
Das Prinzip von Ajax besteht einfach darin, eine asynchrone Anforderung über das XmlHttpRequest-Objekt an den Server zu senden, Daten vom Server abzurufen und dann Javascript zu verwenden, um das DOM zu betreiben und die Seite zu aktualisieren. Der wichtigste Schritt dabei ist das Abrufen der Anforderungsdaten vom Server. Um diesen Prozess und dieses Prinzip zu verstehen, müssen wir etwas über XMLHttpRequest verstehen.
XMLHttpRequest ist der Kernmechanismus von Ajax. Er wurde erstmals in IE5 eingeführt und ist eine Technologie, die asynchrone Anforderungen unterstützt. Vereinfacht ausgedrückt kann JavaScript Anfragen an den Server stellen und Antworten zeitnah verarbeiten, ohne den Benutzer zu blockieren. Erzielen Sie keinen Refresh-Effekt.
Also fangen wir mit XMLHttpRequest an und sehen, wie es funktioniert.
Werfen wir zunächst einen Blick auf die Eigenschaften des XMLHttpRequest-Objekts.
Seine Eigenschaften sind:
onreadystatechange Der Ereignishandler für das Ereignis, das jedes Mal ausgelöst wird, wenn sich der Status ändert.
responseText gibt die Zeichenfolgenform der Daten vom Serverprozess zurück.
responseXML DOM-kompatibles Dokumentdatenobjekt, das vom Serverprozess zurückgegeben wird.
status Der vom Server zurückgegebene numerische Code, z. B. die üblichen 404 (nicht gefunden) und 200 (bereit)
status Textzeichenfolgeninformationen, die den Statuscode begleiten
readyState-Objektstatuswert
0 (nicht initialisiert) Das Objekt wurde eingerichtet, aber noch nicht initialisiert (die offene Methode wurde noch nicht aufgerufen)
1 (Initialisierung) Das Objekt wurde erstellt, aber die Sendemethode wurde nicht aufgerufen
2 (Daten werden gesendet) Die Sendemethode wurde erstellt aufgerufen, aber der aktuelle Status und der HTTP-Header sind unbekannt
3 (Datenübertragung) Ein Teil der Daten wurde empfangen. Da die Antwort und der HTTP-Header unvollständig sind, tritt beim Abrufen eines Teils der Daten über ResponseBody und ResponseText ein Fehler auf.
4 (Vollständig) Die Daten werden zu diesem Zeitpunkt empfangen. Die vollständige Antwort kann jedoch über „ResponseXml“ und „ResponseText“ abgerufen werden. Aufgrund der Unterschiede zwischen den Browsern sind jedoch möglicherweise unterschiedliche Methoden erforderlich. Dieser Unterschied spiegelt sich hauptsächlich zwischen dem IE und anderen Browsern wider. Im Folgenden finden Sie eine relativ standardmäßige Methode zum Erstellen eines XMLHttpRequest-Objekts.
function CreateXmlHttp()
{
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}
catch(ex){}
}
}
}
function TestAjax()
{
var data=document.getElementByIdx("username").value;
CreateXmlHttp();
if(!xmlhttp)
{
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp.open("POST",url,false);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementByIdx("user1").innerHTML="数据正在加载...";
if(xmlhttp.status==200)
{
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}Wie oben gezeigt, prüft die Funktion zunächst den Gesamtstatus von XMLHttpRequest und stellt sicher, dass dieser abgeschlossen ist (readyStatus=4), also die Daten gesendet wurden. Fragen Sie dann den Anforderungsstatus gemäß den Servereinstellungen ab. Wenn alles bereit ist (Status=200), führen Sie die folgenden erforderlichen Vorgänge aus.
Für die beiden Methoden von XmlHttpRequest, open und send, gibt die open-Methode Folgendes an:
a Die Art der an den Server übermittelten Daten, also posten oder abrufen.
b, angeforderte URL-Adresse und übergebene Parameter.
c. Übertragungsmodus, false bedeutet synchron, true bedeutet asynchron. Der Standardwert ist wahr. Wenn es sich um einen asynchronen Kommunikationsmodus handelt (true), wartet der Client nicht auf die Antwort des Servers; wenn es sich um einen synchronen Modus handelt (false), muss der Client warten, bis der Server eine Nachricht zurückgibt, bevor er andere Vorgänge ausführt. Wir müssen die Synchronisierungsmethode entsprechend den tatsächlichen Anforderungen festlegen. Auf einigen Seiten werden möglicherweise mehrere Anforderungen ausgegeben, oder es werden sogar umfangreiche Anforderungen mit hoher Intensität organisiert, geplant und erstellt, wobei die letztere die vorherige überschreibt . Natürlich müssen Sie die Synchronisationsmethode angeben.
Send-Methode wird zum Senden von Anfragen verwendet.
Wenn wir den Workflow von XMLHttpRequest kennen, können wir sehen, dass XMLHttpRequest vollständig zum Senden einer Anforderung an den Server verwendet wird und seine Rolle darauf beschränkt ist. Seine Rolle ist jedoch der Schlüssel zur gesamten Ajax-Implementierung, da Ajax nicht mehr als zwei ist Der Prozess des Stellens und Beantwortens von Anfragen. Und es handelt sich ausschließlich um eine clientseitige Technologie. XMLHttpRequest behandelt das Kommunikationsproblem zwischen dem Server und dem Client, weshalb es so wichtig ist.
Jetzt können wir wahrscheinlich die Prinzipien von Ajax verstehen. Wir können uns den Server als eine Datenschnittstelle vorstellen, die einen einfachen Textstream zurückgibt. Natürlich kann dieser Textstream im XML-Format, HTML, Javascript-Code oder einfach nur als Zeichenfolge vorliegen. Zu diesem Zeitpunkt fordert XMLHttpRequest diese Seite vom Server an und der Server schreibt das Textergebnis in die Seite. Dies ist derselbe wie beim normalen Webentwicklungsprozess. Der Unterschied besteht darin, dass der Client das Ergebnis nicht direkt erhält wird auf der Seite angezeigt, aber zuerst von Javascript verarbeitet und dann auf der Seite angezeigt. Viele beliebte Ajax-Steuerelemente wie Magicajax usw. können nur das Ergebnis dieses Prozesses zurückgeben. Im Wesentlichen gibt es keinen großen Unterschied zwischen ihnen.
【Ähnliche Tutorial-Empfehlung: AJAX-Video-Tutorial】
Das obige ist der detaillierte Inhalt vonWas sind Ajax-Technologien?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
