Was sind die Ajax-Funktionen?

Ajax-Funktionen umfassen: 1. „$(selector).load()“, die zum Laden von Remote-Daten in das ausgewählte Element verwendet wird; 2. „$.get()“; . "$.post()"; 5. "$.getJSON()" 6. "$.getScript()".

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer. „AJAX-Anforderungsfunktion“ ( Optionen)

Entfernte Daten in das XMLHttpRequest-Objekt laden

$.get(url,data,callback,type)HTTP-GET verwenden, um entfernte Daten zu laden$.post(url, data, callback, Typ)Verwenden Sie HTTP POST, um Remote-Daten zu laden$.getJSON(url,data,callback)Verwenden Sie HTTP GET, um Remote-JSON-Daten zu laden$.getScript(url,callback)Laden und Remote-JavaScript-Dateien ausführen

(URL) Die URL (Adresse) der zu ladenden Daten

(Daten) Das Schlüssel-/Wertobjekt der an den Server gesendeten Daten

(Rückruf) Wenn die Daten geladen werden, wird die Funktion ausgeführt

(Typ) wird zurückgegeben. Der Datentyp (html, xml, json, jasonp, script, text)

(Optionen) Alle Schlüssel/Wert-Paaroptionen der vollständigen AJAX-Anfrage

One, $.get(url,[data], [Rückruf] )

Erläuterung: URL ist die Anforderungsadresse, Daten sind die Liste der angeforderten Daten und Rückruf ist die Rückruffunktion nach erfolgreicher Anforderung. Diese Funktion akzeptiert zwei Parameter, der erste sind die von der zurückgegebenen Daten Server, und der zweite Parameter ist der Status des Servers. Dies ist ein optionaler Parameter.

Und darunter liegt das Format der vom Server zurückgegebenen Daten tatsächlich in Form einer Zeichenfolge vor, nicht in dem von uns gewünschten JSON-Datenformat. Es wird hier nur zum Vergleich und zur Veranschaulichung zitiert.

$.get("data.php",$("#firstName.val()"),function(data){
$("#getResponse").html(data); }//返回的data是字符串类型
);

Zweitens $.post (URL,[Daten],[ Rückruf],[Typ])

Erläuterung: Diese Funktion ähnelt dem Parameter $.get(), mit einem zusätzlichen Typparameter, Typ ist Anfrage Der Datentyp kann HTML, XML, JSON und andere sein. Wenn wir diesen Parameter auf JSON setzen, ist das zurückgegebene Format das JSON-Format Das von $.get() zurückgegebene Format ist das gleiche, beide sind Strings

$.post("data.php",$("#firstName.val()"),function(data){
$("#postResponse").html(data.name);
},"json"//设置了获取数据的类型，所以得到的数据格式为json类型的
);

Drei, $.ajax(opiton)

Erläuterung: Die Funktion $.ajax() ist leistungsstark und kann viele präzise Operationen auf Ajax ausführen Wenn Sie eine detaillierte Erklärung benötigen, lesen Sie bitte die entsprechenden Informationen Es gibt immer mehr AJAX-basierte Anwendungen und für Frontend-Entwickler ist es keine angenehme Sache, sich direkt mit dem zugrunde liegenden HTTPRequest auseinanderzusetzen. Da jQuery gekapselt ist JavaScript, ich muss über das Problem der AJAX-Anwendungen nachgedacht haben. Wenn Sie jQuery zum Schreiben von AJAX verwenden, ist dies tatsächlich N-mal bequemer, als es direkt in JS zu schreiben. (Ich weiß nicht, wie man jQuery verwendet. Verlieren Sie Ihre JS-Kenntnisse?) Hier wird davon ausgegangen, dass jeder mit der jQuery-Syntax vertraut ist. Lassen Sie uns einige Anwendungen von Ajax zusammenfassen.

Statische Seite laden

load( url, [data], [callback] );

url (String) URL-Adresse der angeforderten HTML-Seite

data (Map) (optionaler Parameter) an den Server gesendeter Schlüssel /Wert data callback (Callback) (optionaler Parameter) Die Callback-Funktion, wenn die Anfrage abgeschlossen ist (muss nicht erfolgreich sein)

Die Methode load() kann problemlos statische Seiteninhalte in das angegebene jQuery-Objekt laden.

$.ajax({
url: "ajax/ajax_selectPicType.aspx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});

Auf diese Weise wird der Inhalt von data.html in das DOM-Objekt mit der ID ajax-p geladen. Sie können sogar den Ajax-Vorgang zum Laden eines Teils des Inhalts implementieren, indem Sie die ID angeben, wie zum Beispiel:

$.getJSON("data.php",$("#firstName.val()"),function(jsonData){
$("#getJSONResponse").html(jsonData.id);}//无需设置，直接获取的数据类型为json，所以调用时需要使用jsonData.id方式
);

Implementieren von GET- und POST-Methoden

$('#ajax-p').load('data.html');

url (String) URL-Adresse zum Senden der Anfrage.

Daten (Map)(Optionaler Parameter) Die an den Server zu sendenden Daten, ausgedrückt in Form von Schlüssel/Wert-Paaren, werden als QueryString
callback (Callback) (optionaler Parameter) Callback-Funktion an die Anforderungs-URL angehängt Das Laden ist erfolgreich (Diese Methode wird nur aufgerufen, wenn der Rückgabestatus der Antwort „Erfolgreich“ ist)
• Offensichtlich ist dies eine Funktion, die speziell die GET-Methode implementiert, und sie ist recht einfach zu verwenden

  $('#ajax-p').load('data.html#my-section');

  get( url, [data], [callback] )

  
  

url ( Zeichenfolge), um die Anforderungs-URL-Adresse zu senden Parameter) Rückruffunktion wird erfolgreich geladen (diese Methode wird nur aufgerufen, wenn der Rückgabestatus der Antwort erfolgreich ist)

Typ (String) (optionaler Parameter) Der Typ der angeforderten Daten, XML, Text, JSON usw.

• 
  

  wird auch von jQuery bereitgestellt. Eine einfache Funktion der Rückruffunktion
getScript()-Funktion kann JavaScript-Skripte aus der Ferne laden und ausführen. Diese Funktion kann sich überspannen Domain lädt JS-Dateien (Magie...?!). Die Bedeutung dieser Funktion ist enorm Ja, es kann die Codemenge für das anfängliche Laden der Seite erheblich reduzieren, da Sie die entsprechenden JS-Dateien basierend auf der Benutzerinteraktion laden können, anstatt sie alle zu laden, wenn die Seite initialisiert wird.

• $.get('login.php', {
     id      : 'Robin',
     password: '123456',
     gate    : 'index'
    }, function(data, status) {
     //data为返回对象，status为请求的状态
     alert(data);
     //此时假设服务器脚本会返回一段文字"你好，Robin！"，
  那么浏览器就会弹出对话框显示该段文字
     alert(status);
     //结果为success, error等等，但这里是成功时才能运行的函数
    });

  Bauen Sie eine Brücke für die Datenkommunikation: getJSON()

  post( url, [data], [callback], [type] )

• url (String) Anforderungsadresse senden

Daten (Map) (optional) Zu sendende Schlüssel-/Wertparameter

Rückruf (Funktion ) (Optional) Rückruffunktion bei erfolgreichem Laden.
• JSON ist ein ideales Datenübertragungsformat, das sich gut in JavaScript oder andere Hostsprachen integrieren lässt Sprache und kann direkt von JS verwendet werden. Verwendung von JSON im Vergleich zu herkömmlichen GET und POST senden direkt „nackte“ Daten, was eine vernünftigere Struktur und mehr Sicherheit bietet. Die getJSON()-Funktion von jQuery legt nur die JSON-Parameter fest. Eine vereinfachte Version der ajax()-Funktion. Diese Funktion ist auch domänenübergreifend einsetzbar und hat gewisse Vorteile gegenüber get() und post(). Darüber hinaus kann diese Funktion durch Schreiben der Anforderungs-URL geschrieben werden Lassen Sie das Programm im Format „myurl?callback=X“ die Rückruffunktion X ausführen.

  $.post('regsiter.php', {
     id:'Robin',
     password: '123456',
     type:'user'
    },function(data, status) {
     alert(data);
    }, "json");

  
  Die Ajax()-Funktion der unteren Ebene

  Obwohl die Funktionen get() und post() sehr einfach und benutzerfreundlich sind, können sie dennoch einige komplexere Designanforderungen nicht erfüllen, z. B. das Ausführen unterschiedlicher Aktionen zu unterschiedlichen Zeiten beim Senden von Ajax. jQuery bietet eine spezifischere Funktion: ajax().

  ajax( Optionen)

  ajax() bietet eine große Anzahl von Parametern, sodass recht komplexe Funktionen implementiert werden können.

FehlerDiese Methode verfügt über drei Parameter: XMLHttpRequest-Objekt, Fehlermeldung und (möglicherweise) erfasstes Fehlerobjekt. globalifModifiedBoolean(Standard: false) Erhalten Sie nur neue Daten, wenn sich die Serverdaten ändern.

Parametername	Typ	Beschreibung
url	String	(Standard: aktuelle Seitenadresse) Die Adresse zum Senden der Anfrage.
Typ	String	(Standard: „GET“) Anforderungsmethode („POST“ oder „GET“), Standard ist „GET“. Hinweis: Andere HTTP-Anfragemethoden wie PUT und DELETE können ebenfalls verwendet werden, werden jedoch nur von einigen Browsern unterstützt.
Timeout	Number	Anfrage-Timeout festlegen (Millisekunden). Diese Einstellung überschreibt die globale Einstellung.
async	Boolean	(Standard: true) Standardmäßig sind alle Anfragen asynchrone Anfragen. Wenn Sie synchrone Anfragen senden müssen, setzen Sie diese Option bitte auf „false“. Beachten Sie, dass synchrone Anfragen den Browser sperren und der Benutzer warten muss, bis die Anfrage abgeschlossen ist, bevor andere Vorgänge ausgeführt werden können.
beforeSend	Function	Sie können die Funktionen des XMLHttpRequest-Objekts vor dem Senden der Anfrage ändern, z. B. das Hinzufügen benutzerdefinierter HTTP-Header. Das XMLHttpRequest-Objekt ist der einzige Parameter. function (XMLHttpRequest) { this; // die Optionen für diese Ajax-Anfrage } function (XMLHttpRequest) { this; // die Optionen für diese Ajax-Anfrage }
cache	Boolean	(Standard: true) Neue Funktion von jQuery 1.2, bei Einstellung auf false werden die Anforderungsinformationen nicht aus dem Browser-Cache geladen.
complete	Funktion	Rückruffunktion nach Abschluss der Anfrage (wird aufgerufen, wenn die Anfrage erfolgreich ist oder fehlschlägt). Parameter: XMLHttpRequest-Objekt, Erfolgsinformationszeichenfolge. function (XMLHttpRequest, textStatus) { this; // die Optionen dafür Ajax-Anfrage } function (XMLHttpRequest, textStatus) { this; // the Optionen für diese Ajax-Anfrage }
contentType	String	(Standard: „application/x-www-form-urlencoded“) Inhaltskodierungstyp beim Senden von Informationen an den Server. Der Standardwert ist für die meisten Anwendungen geeignet.
Daten	Objekt, String	An den Server gesendete Daten. Wird automatisch in das Anforderungszeichenfolgenformat konvertiert. Wird in GET-Anfragen an die URL angehängt. Siehe die Beschreibung der ProcessData-Option, um diese automatische Konvertierung zu deaktivieren. Muss im Schlüssel/Wert-Format vorliegen. Wenn es sich um ein Array handelt, weist jQuery verschiedenen Werten automatisch denselben Namen zu. Zum Beispiel wird {foo:["bar1", "bar2"]} in „&foo=bar1&foo=bar2′ umgewandelt.
dataType	String	Der Datentyp, der voraussichtlich vom Server zurückgegeben wird. Wenn nicht angegeben, gibt jQuery automatisch ResponseXML oder ResponseText basierend auf den MIME-Informationen des HTTP-Pakets zurück und übergibt sie als Callback-Funktionsparameter. Verfügbare Werte: „xml“: Gibt ein XML-Dokument zurück, das von jQuery verarbeitet werden kann. "html": Gibt reine Text-HTML-Informationen zurück; enthält Skriptelemente. "script": Gibt Nur-Text-JavaScript-Code zurück. Ergebnisse werden nicht automatisch zwischengespeichert. "json": Gibt JSON-Daten zurück. "jsonp": JSONP-Format. Beim Aufrufen einer Funktion im JSONP-Format ersetzt wie „myurl?callback=?“ automatisch ? durch den richtigen Funktionsnamen, um die Rückruffunktion auszuführen.
Funktion	(Standard: automatische Beurteilung (XML oder HTML)) Diese Methode wird aufgerufen, wenn die Anfrage fehlschlägt.	function (XMLHttpRequest, textStatus, errorThrown) { // Normalerweise hat nur einer von textStatus und errorThown den Wert this; // die Optionen für diesen Ajax request } function (XMLHttpRequest, textStatus, errorThrown) { // Normalerweise hat nur einer von textStatus und errorThown den Wert this; // die Optionen für diesen Ajax Anfrage }
Boolean	(Standard: true) Ob globale AJAX-Ereignisse ausgelöst werden sollen. Bei der Einstellung „false“ werden keine globalen AJAX-Ereignisse wie ajaxStart oder ajaxStop ausgelöst. Kann verwendet werden, um verschiedene Ajax-Ereignisse zu steuern
	Verwenden Sie zur Bestimmung die zuletzt geänderten Header-Informationen des HTTP-Pakets.
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。 如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

 你可以指定xml、script、html、json作为其数据类型，可以为beforeSend、error、sucess、complete等状态设置 处理函数，众多其它参数也可以订完完全全定义用户的Ajax体验。下面的例子中，我们用ajax()来调用一个XML文档：

$.ajax({
    url: 'doc.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        alert(xml);
  //此处xml就是XML的jQuery对象了，你可以用find()、next()或XPath等方法在里面寻找节点，
和用jQuery操作HTML对象没有区别
    }
});

进一步了解AJAX事件

前面讨论的一些方法都有自己的事件处理机制，从页面整体来说，都只能说是局部函数。jQuery提供了AJAX全局函数的定义，以满足特殊的需求。下面是jQuery提供的所有函数（按照触发顺序排列如下）：

• ajaxStart
  (全局事件) 开始新的Ajax请求，并且此时没有其他ajax请求正在进行

• beforeSend
  (局部事件) 当一个Ajax请求开始时触发。如果需要，你可以在这里设置XMLHttpRequest对象

• ajaxSend
  (全局事件) 请求开始前触发的全局事件

• success
  (局部事件) 请求成功时触发。即服务器没有返回错误，返回的数据也没有错误

• ajaxSuccess
  全局事件全局的请求成功

• error
  (局部事件) 仅当发生错误时触发。你无法同时执行success和error两个回调函数

• ajaxError
  全局事件全局的发生错误时触发

• complete
  (局部事件) 不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件

• ajaxComplete
  全局事件全局的请求完成时触发

• ajaxStop
  (全局事件) 当没有Ajax正在进行中的时候，触发
  局部事件在之前的函数中都有介绍，我们主要来看看全局事件。对某个对象进行全局事件监听，那么全局中的AJAX动作，都会对其产生影响。比如，当页面在进行AJAX操作时，ID为”loading”的p就显示出来：

$("#loading").ajaxStart(function(){
   $(this).show();
 });

全局事件也可以帮助你编写全局的错误相应和成功相应，而不需要为每个AJAX请求独立设置。有必要指出，全局事件的参数是很有用的。除了 ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三个参数。第一个参数即事件本身；第二个是XHR对象；第三个是你传递的ajax参数对象。在一个对象里显示全局的AJAX情况：

$("#msg").beforeSend(function(e,xhr,o) {
 $(this).html("正在请求"+o.url);
 }).ajaxSuccess(function(e,xhr,o) {
 $(this).html(o.url+"请求成功");
 }).ajaxError(function(e,xhr,o) {
 $(this).html(o.url+"请求失败");
});

很显然，第三个参数也可以帮助你传递你在AJAX事件里加入的自定义参数。 在单个AJAX请求时，你可以将global的值设为false，以将此请求独立于AJAX的全局事件。

$.ajax({
   url: "request.php",
   global: false,
   // 禁用全局Ajax事件.
 });

如果你想为全局AJAX设置参数，你会用上ajaxSetup()函数。例如，将所有AJAX请求都传递到request.php，；禁用全局方法；强制用POST方法传递：

$.ajaxSetup({
  url: "request.php",
  global: false,
  type: "POST"
});

【相关教程推荐：AJAX视频教程】

Das obige ist der detaillierte Inhalt vonWas sind die Ajax-Funktionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!