Ajax besteht aus HTML, JavaScript™-Technologie, DHTML und DOM und ist eine hervorragende Möglichkeit, umständliche Webschnittstellen in interaktive Ajax-Anwendungen umzuwandeln. Für Ajax ist das Kernobjekt XMLHttpRequest, und alle Ajax-Operationen sind untrennbar mit der Operation dieses Objekts verbunden.
Lassen Sie uns zunächst verstehen, wie dieses Objekt in Javascript erstellt wird:
varxmlHttp=newXMLHttpRequest();
Diese einfache Codezeile erstellt ein XMLHttpRequest-Objekt in Mozilla, Firefox, Safari, Opera und grundsätzlich in jedem Nicht-Microsoft-Browser, der Ajax in irgendeiner Form und Art unterstützt. Für IE, der einen Marktanteil von 70 % hat, ist diese Methode jedoch nicht möglich, und verschiedene IE-Versionen haben unterschiedliche Erstellungsmethoden. Daher müssen wir die folgenden zwei Methoden zum Erstellen von Objekten unter IE verwenden:
try{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//Für neuere Browser
}catch(err){
versuchen{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//Für ältere Browser
}catch(err2){
xmlHttp=false;
}
}
Trotzdem können wir nicht vorhersagen, dass einige Browser dieses Objekt möglicherweise nicht erstellen können. Wenn die Erstellung nicht erfolgreich ist, müssen wir einen Satz hinzufügen:
if(!xmlHttp){
Alert("XMLHttpRequest-Objekt kann nicht erstellt werden!");
}
Die Kombination ist:
varxmlHttp=false;
versuchen{
xmlHttp=newXMLHttpRequest();
}catch(trymicrosoft){
versuchen{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
versuchen{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(fehlgeschlagen){
xmlHttp=false;
}
}
}
if(!xmlHttp){
Alert("XMLHttpRequest-Objekt kann nicht erstellt werden!");
}
Dann erstellen wir eine Funktion getInfo(), um asynchrone Anfragen zu ermöglichen:
functiongetInfo(){
varnum=document.getElementById("num").value;//Formulardaten abrufen
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true repräsentiert hier eine asynchrone Anfrage
}
Nach der Konfiguration mit open() können Sie Anfragen senden. Obwohl Sie Daten mit send() senden können, können Sie Daten auch über die URL selbst senden. Tatsächlich ist es bei den meisten GET-Anfragen viel einfacher, Daten über die URL zu senden, also verwenden Sie hier einfach null als Parameter von send(). Die PHP-Datei in der URL-Adresse ist die PHP-Datei, die zur Verarbeitung der erforderlichen Daten angefordert wird, genau wie bei der üblichen Verwendung von PHP. Mehrere Parameter können hinzugefügt und durch & getrennt werden.
xmlHttp.send(null);
Nach dem Senden der Daten müssen wir die Rückrufmethode verwenden, um den Status des Servers abzurufen, daher wird das Attribut onreadystatechange verwendet.
xmlHttp.onreadystatechange=updatePage;
Diese Anweisung muss vor der send()-Anweisung platziert werden, damit sie wirksam ist. Die nachfolgende updatePage ist eine Funktion, die die zurückgegebenen Informationen verarbeitet. Das vollständige getInfo() lautet wie folgt:
FunktiongetInfo(){
varnum=document.getElementById("num").value;//Formulardaten abrufen
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true repräsentiert hier eine asynchrone Anfrage
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
Wir müssen diese Funktion auch in HTML auslösen:
<inputname="num"id="num"onblur="getInfo()"type="text"/>
Als nächstes müssen wir die Funktion updatePage() schreiben:
functionupdatePage(){
if(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
Der readyState im obigen Code ist ein vom Server zurückgegebener Status. Dieser Status 4 zeigt an, dass die Anfrage gesendet und verarbeitet wurde. ResponseText dient dazu, die vom Server zurückgegebenen Informationen abzurufen und sie dann über Javascript dem Formular mit der ID-Stadt zuzuweisen.
An diesem Punkt ist ein einfaches Ajax-Programm fertig. Der vollständige Javascript-Code lautet wie folgt:
varxmlHttp=false;
versuchen{
xmlHttp=newXMLHttpRequest();
}catch(trymicrosoft){
versuchen{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
versuchen{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(fehlgeschlagen){
xmlHttp=false;
}
}
}
if(!xmlHttp){
Alert("XMLHttpRequest-Objekt kann nicht erstellt werden!");
}
FunktiongetInfo(){
varnum=document.getElementById("num").value;//Formulardaten abrufen
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true repräsentiert hier eine asynchrone Anfrage
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
functionupdatePage(){
if(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
Da die Verarbeitungsmethode und die Schreibmethode unterschiedlich sind und dies nicht der Hauptteil von Ajax ist, wird der Code hier nicht berücksichtigt. Denken Sie daran, dass PHP die erforderlichen Daten ausgibt und zurückgibt.
Ich habe dieses Tutorial heute gesehen und es ist sehr gut für Anfänger geeignet.