Heim > Web-Frontend > js-Tutorial > Hauptteil

Ein Schritt, damit Sie wissen, was AJAX und AJAX-Cross-Domain sind

帅杰杰
Freigeben: 2020-05-06 17:02:15
Original
214 Leute haben es durchsucht

Wie AJAX funktioniert

AJAX = asynchrones JavaScript und XML Einfach ausgedrückt lädt AJAX Daten über den Hintergrund, ohne die gesamte Webseite neu zu laden Seite.

Ajax-Arbeitsprinzipdiagramm:

Ein Schritt, damit Sie wissen, was AJAX und AJAX-Cross-Domain sind

Sie können es über das Ajax-Schaltbild finden. Geben Sie die URL ein Browser Wenn die Adresse den Server anfordert, wird eine HTTP-Anfrage über Ajax an den Server gesendet. Das Antwortergebnis des Dienstes wird zunächst von Ajax verarbeitet und dann zur Anzeige auf der Seite an den Browser zurückgegeben. Wenn kein Ajax vorhanden ist, wird es in der Abbildung als obere und untere Verbindungslinie dargestellt. Der Browser sendet direkt eine HTTP-Anfrage an den Server. Nachdem der Server die Anfrage verarbeitet hat, wird das Antwortergebnis direkt zur Anzeige an den Browser zurückgegeben.

Die Funktion von Ajax besteht darin, HTTP-Anfragen über js oder jQuery zu senden. Die HTTP-Anfrage enthält die URL-Adresse, die Daten und die Wertübertragungsmethode der Daten. Nach der Antwort des Servers muss ein Rückgabeergebnis vorliegen .

Technische Zusammensetzung von AJAX:

JavaScript, CSS, DOM, XMLHttpRequest

Native Schreibmethode von AJAX:

Der Kern von Ajax ist das XMLHttpRequest-Objekt, das den Schlüssel zur Ajax-Implementierung darstellt. Es wird zum Senden asynchroner Anforderungen, zum Empfangen von Antworten und zum Ausführen von Rückrufen verwendet.

//第一步:
var xhr=new XMLHttpRequest();
//第二步:
xhr.open("post","test.php");
//第三步:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//第四步:
xhr.send("a=1&b=10");  //get请求报文体写法
//第五步:
xhr.onreadystatechange=function(){
    if(xhr.status=200 && xhr.readyState==4){
        var result=xhr.responseText;  //获取结果
        alert(result);
    }
}
Nach dem Login kopieren

AJAX-Syntax in jQuery:

jQuery bietet mehrere AJAX-bezogene Methoden. Verwenden Sie Get oder Post, um Text von einem Remote-Server anzufordern. , HTML, XML oder JSON. Diese externen Daten werden dann direkt in ausgewählte Elemente der Webseite geladen.

$.ajax({
   url:"请求的url地址",
   type:"get|post",
   data:"数据" ,
   dataType:"text|json|xml|script",
   success:function(re){
       //服务器回传数据处理
   }
});
Nach dem Login kopieren

Die Methoden get() und post() von AJAX

Die Methoden get() und post() in jQuery werden für HTTP GET verwendet oder POST-Anfrage, um Daten vom Server anzufordern. GET dient zum Anfordern von Daten von der angegebenen Ressource und POST zum Übermitteln der zu verarbeitenden Daten von der angegebenen Ressource.

Andere Möglichkeiten, Ajax in jQuery zu schreiben, sind:

$.get(url,data,callback,dataType)
$.post(url,data,callback,dataType)
Nach dem Login kopieren
参数名称 描述
url 请求的url地址
data(可选) 发送到服务器的键值类型的数据
callback(可选) 载入成功的回调函数
dataType(可选)

服务器返回内容的格式,包括xml、html、json

Parametername

Beschreibung
url Angeforderte URL-Adresse
Daten (optional) An den Server gesendete Daten vom Typ Schlüsselwert
Rückruf (optional) Rückruffunktion wird erfolgreich geladen
dataType (optional) Server gibt Inhaltsformat zurück, einschließlich xml, html, json Diese „Domäne“ bezieht sich auf zwei Domänennamen. Domänenübergreifend bedeutet, dass sich Programm A unter Domänenname A und Programm B unter Domänenname B befindet. Jetzt muss Programm A auf Programm B unter Domänenname B zugreifen Ajax. Diese Art des Zugriffs erfolgt über den Browser. AJAX kann ein Programm nicht direkt unter einem anderen Domänennamen anfordern. Die Lösung für dieses Problem lautet: Wenn eine Anfrage gestellt wird, werden die Rückgabedaten in Form von jsonp zurückgegeben, gefolgt von einem jsonpCallback. Nach erfolgreicher Anfrage wird fun1 aufgerufen, daher muss angegeben werden, dass Daten vorhanden sind Parameter in fun1, und die Daten dieses Parameters sind B. Die von Programm B unter dem Domänennamen zurückgegebenen Daten können in fun1 domänenübergreifend gesehen werden.

Vorteile von AJAX:

  • Reduzieren Sie die Belastung des Servers und beschleunigen Sie das Surfen.

  • Mehr Benutzerinteraktionen führen zu einer besseren Benutzererfahrung.

  • Basierend auf standardisierter und weithin unterstützter Technologie ist es nicht erforderlich, Plug-Ins herunterzuladen. Jetzt unterstützen Browser die AJAX-Technologie domänenübergreifend gut.

  • Erleichtert außerdem die Trennung von Seitendarstellung und Daten.

Das obige ist der detaillierte Inhalt vonEin Schritt, damit Sie wissen, was AJAX und AJAX-Cross-Domain sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!