Heim > Web-Frontend > js-Tutorial > Ajax-Grundlagen

Ajax-Grundlagen

巴扎黑
Freigeben: 2016-11-25 14:45:47
Original
1245 Leute haben es durchsucht

1. Ajax ist asynchrones JavaScript und XML. Ist eine Technologie zur Erstellung schneller dynamischer Webseiten. Durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund kann die Webseite asynchron aktualisiert werden, sodass ein teilweises Laden durchgeführt werden kann, ohne dass die Webseite neu geladen werden muss.

Zwei. Erstellung von Objekten. XMLHttpRequest ist die Basis von Ajax.

1. Erstellungssyntax: new XMLHttpRequest();

2. Erstellung der alten Version: neues ActiveXObject("Microsoft.XMLHTTP").

Drei. Serveranfrage.

open(method,url,async).

Methode: stellt den Anforderungstyp dar: GET oder POST

URL: der Speicherort der Datei auf dem Server.

async: true (asynchrone Anfrage) oder false (synchrone Anfrage).

send(string).

Senden Sie die Anfrage an den Server.

string: Wird nur für POST-Anfragen verwendet. Stellt die zu übertragenden Parameter

vier dar. Die Antwort des Servers.

responseText(): Antwortdaten in Stringform abrufen. Für Nicht-XML-Anfragen verwenden Sie das Attribut „responseText“.

responseXML(): Erhalten Sie die entsprechenden Daten in XML-Form.

Fünf. onreadystatechange-Ereignis.

wird verwendet, um reaktionsbasierte Aufgaben auszuführen.

onreadystatechange: Speicherfunktion. Diese Funktion wird immer dann aufgerufen, wenn sich das readyState-Attribut ändert.

readyState: Stellt den Status von XMLHttpRequest dar. wechselt von 0 auf 4.

0: Die Anfrage wurde nicht initialisiert

1: Die Serververbindung wurde hergestellt

2: Die Anfrage wurde empfangen

                                                                                                                                                                     >           4: Die Die Anfrage ist abgeschlossen und die Antwort ist bereit.

Status: 200: 'OK' 404: Seite nicht gefunden.

Beispiel:

<html><!DOCTYPE html>  
<html>  
<head>  
<script>  
function loadXMLDoc()  
{  
var xmlhttp;  
if (window.XMLHttpRequest)  
  {// code for IE7+, Firefox, Chrome, Opera, Safari  
  xmlhttp=new XMLHttpRequest();  
  }  
else  
  {// code for IE6, IE5  
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
  }  
xmlhttp.onreadystatechange=function()  
  {  
  if (xmlhttp.readyState==4 && xmlhttp.status==200)  
    {  
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  
    }  
  }  
xmlhttp.open("GET","文件的地址",true);  
xmlhttp.send();  
}  
</script>  
</head>  
<body>  
  
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>  
<button type="button" onclick="loadXMLDoc()">修改内容</button>  
  
</body>  
</html>
Nach dem Login kopieren

Sie müssen die Adresse der Datei hinzufügen, um den entsprechenden Inhalt zu erhalten.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage