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

(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] );

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)

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

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

$('#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');

  Nach dem Login kopieren

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

  Nach dem Login kopieren
  
  

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等等，但这里是成功时才能运行的函数
    });

  Nach dem Login kopieren

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

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

  Nach dem Login kopieren

• 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");

  Nach dem Login kopieren
  
  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.

你可以指定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!