Heim  >  Artikel  >  Web-Frontend  >  Was ist die grundlegende Syntax von Ajax? Details zur Ajax-Syntax

Was ist die grundlegende Syntax von Ajax? Details zur Ajax-Syntax

寻∝梦
寻∝梦Original
2018-09-10 11:38:431840Durchsuche

In diesem Artikel geht es hauptsächlich um die grundlegende grammatikalische Struktur von Ajax, mit Beispielen, damit jeder klarer lernen kann. Werfen wir jetzt einen Blick auf diesen Artikel

Codevorlage:

$.ajax({
             type: "POST",
             url: "/login",
             contentType: 'application/x-www-form-urlencoded;charset=utf-8',
             data: {username:$("#username").val(), password:$("#password").val()},
             dataType: "json",
             success: function(data){
                         console.log(data);
                      },
             error:function(e){
                         console.log(e);
             }
         })

Parameter

  • Optionen

  • Typ: Objekt

    Optional. AJAX-Anfrageeinstellungen. Alle Optionen sind optional.

  • asynchron

  • Typ: Boolean

    Standardwert: true. Standardmäßig sind alle Anfragen asynchron. Wenn Sie synchrone Anfragen senden müssen, legen Sie diese Option auf „false“ fest.

    Beachten Sie, dass synchrone Anfragen den Browser sperren und andere Benutzervorgänge warten müssen, bis die Anfrage abgeschlossen ist, bevor sie ausgeführt werden können.

  • beforeSend(XHR)

  • Typ: Funktion

    Eine Funktion, die das XMLHttpRequest-Objekt vor dem Senden der Anfrage ändern kann, wie das Hinzufügen selbstdefinierter HTTP-Header.

    Das XMLHttpRequest-Objekt ist der einzige Parameter.

    Dies ist eine Ajax-Veranstaltung. Wenn false zurückgegeben wird, kann diese Ajax-Anfrage abgebrochen werden.

  • Cache

  • Typ: Boolean

    Standardwert: true, der Standardwert ist false, wenn dataType script und jsonp ist. Auf „false“ setzen, um diese Seite nicht zwischenzuspeichern.

    Neue Funktionen in jQuery 1.2.

  • complete(XHR, TS)

  • Typ: Funktion

    Rückruffunktion nach Abschluss der Anfrage (nach der Anfrage erfolgreich ist oder fehlgeschlagen ist).

    Parameter: XMLHttpRequest-Objekt und eine Zeichenfolge, die den Anforderungstyp beschreibt.

    Dies ist eine Ajax-Veranstaltung.

  • contentType

  • Typ: String

    Standardwert: „application/x-www-form-urlencoded“. Inhaltskodierungstyp beim Senden von Informationen an den Server.

    Der Standardwert ist für die meisten Situationen geeignet. Wenn Sie einen Inhaltstyp explizit an $.ajax() übergeben, wird dieser definitiv an den Server gesendet (auch wenn keine Daten zum Senden vorhanden sind).

  • Kontext

  • Typ: Objekt

    Dieses Objekt wird verwendet, um den Kontext von Ajax-bezogenen Rückruffunktionen festzulegen. Mit anderen Worten: Lassen Sie dies in der Rückruffunktion auf dieses Objekt zeigen (wenn dieser Parameter nicht festgelegt ist, zeigt dies auf den Optionsparameter, der beim Aufruf dieser AJAX-Anfrage übergeben wurde). Wenn Sie beispielsweise ein DOM-Element als Kontextparameter angeben, wird der Kontext der Erfolgsrückruffunktion auf dieses DOM-Element festgelegt.

    Einfach so:

    $.ajax({ url: "test.html", context: document.body, success: function(){
            $(this).addClass("done");
          }});

(Wenn Sie mehr sehen möchten, besuchen Sie die Spalte PHP Chinese Website AJAX Development Manual , um mehr zu erfahren)

  • Daten

  • Typ: String

    An den Server gesendete Daten. Wird automatisch in das Anforderungszeichenfolgenformat konvertiert. Wird in GET-Anfragen an die URL angehängt. Informationen zum Deaktivieren dieser automatischen Konvertierung finden Sie in der Beschreibung der ProcessData-Option. Muss im Schlüssel/Wert-Format vorliegen. Wenn es sich um ein Array handelt, weist jQuery verschiedenen Werten automatisch denselben Namen zu. Beispielsweise wird {foo:["bar1", "bar2"]} in '&foo=bar1&foo=bar2' konvertiert.

  • dataFilter

  • Typ: Funktion

    Eine Funktion zur Vorverarbeitung der von Ajax zurückgegebenen Originaldaten. Geben Sie zwei Parameter an: Daten und Typ: Daten sind die von Ajax zurückgegebenen Originaldaten und Typ ist der dataType-Parameter, der beim Aufruf von jQuery.ajax bereitgestellt wird. Der von der Funktion zurückgegebene Wert wird von jQuery weiterverarbeitet.

  • dataType

  • Typ: String

    Der Datentyp, der voraussichtlich vom Server zurückgegeben wird. Wenn nicht angegeben, trifft jQuery automatisch intelligente Entscheidungen basierend auf den MIME-Informationen des HTTP-Pakets. Beispielsweise wird der XML-MIME-Typ als XML erkannt. In 1.4 generiert JSON ein JavaScript-Objekt und das Skript führt das Skript aus. Die vom Server zurückgegebenen Daten werden dann basierend auf diesem Wert analysiert und an die Rückruffunktion übergeben. Verfügbare Werte:

    • "xml": Gibt ein XML-Dokument zurück, das mit jQuery verarbeitet werden kann.

    • "html": Gibt reine Text-HTML-Informationen zurück; das enthaltene Skript-Tag wird ausgeführt, wenn es in den Dom eingefügt wird.

    • "script": Gibt Nur-Text-JavaScript-Code zurück. Ergebnisse werden nicht automatisch zwischengespeichert. Es sei denn, der Parameter „Cache“ ist gesetzt. Hinweis: Bei Remote-Anfragen (nicht unter derselben Domäne) werden alle POST-Anfragen in GET-Anfragen umgewandelt. (Da zum Laden das DOM-Skript-Tag verwendet wird)

    • "json": Gibt JSON-Daten zurück.

    • "jsonp": JSONP-Format. Beim Aufrufen einer Funktion im JSONP-Format, z. B. „myurl?callback=?“, ersetzt jQuery automatisch ? durch den richtigen Funktionsnamen, um die Callback-Funktion auszuführen.

    • "text": Gibt eine Nur-Text-Zeichenfolge zurück

  • Fehler

  • Typ: Funktion

    Standardwert: automatische Beurteilung (XML oder HTML). Diese Funktion wird aufgerufen, wenn die Anfrage fehlschlägt.

    verfügt über die folgenden drei Parameter: XMLHttpRequest-Objekt, Fehlermeldung und (optional) erfasstes Ausnahmeobjekt.

    Wenn ein Fehler auftritt, kann die Fehlermeldung (der zweite Parameter) zusätzlich zu Null auch „timeout“, „error“, „notmodified“ und „parsererror“ lauten.

    Dies ist eine Ajax-Veranstaltung.

  • global

  • Typ: Boolean

    Gibt an, ob das globale AJAX-Ereignis ausgelöst werden soll. Standardwert: true. Bei der Einstellung „false“ werden keine globalen AJAX-Ereignisse wie ajaxStart oder ajaxStop ausgelöst, die zur Steuerung verschiedener Ajax-Ereignisse verwendet werden können.

  • ifModified

  • Typ: Boolean

    Erhalten Sie nur neue Daten, wenn sich die Serverdaten ändern. Standardwert: false. Verwenden Sie zur Bestimmung die Header-Informationen „Zuletzt geändert“ des HTTP-Pakets. Ab jQuery 1.4 überprüft es auch das vom Server angegebene „etag“, um sicherzustellen, dass die Daten nicht geändert wurden.

  • jsonp

  • Typ: String

    Schreiben Sie den Namen der Rückruffunktion in einer JSONP-Anfrage neu. Dieser Wert wird verwendet, um den „Callback“-Teil des URL-Parameters in einer GET- oder POST-Anfrage wie {jsonp:'onJsonPLoad'} zu ersetzen, der dazu führt, dass „onJsonPLoad=?“ an den Server übergeben wird.

  • jsonpCallback

  • Typ: String

    Geben Sie einen Rückruffunktionsnamen für die JSONP-Anfrage an. Dieser Wert wird anstelle des von jQuery automatisch generierten zufälligen Funktionsnamens verwendet. Dies wird hauptsächlich verwendet, um jQuery die Generierung eindeutiger Funktionsnamen zu ermöglichen, um die Verwaltung von Anforderungen sowie die Bereitstellung von Rückruffunktionen und Fehlerbehandlung zu erleichtern. Sie können diesen Rückruffunktionsnamen auch angeben, wenn der Browser GET-Anfragen zwischenspeichern soll.

  • Passwort

  • Typ: Zeichenfolge

    Passwort, das zur Beantwortung einer HTTP-Zugriffsauthentifizierungsanfrage verwendet wird

  • processData

  • Typ: Boolean

    Standardwert: true. Standardmäßig werden die über die Datenoption übergebenen Daten, wenn es sich um ein Objekt handelt (technisch gesehen, solange es sich nicht um eine Zeichenfolge handelt), verarbeitet und in eine Abfragezeichenfolge konvertiert, die dem Standardinhaltstyp „application/x“ entspricht -www-form-urlencoded" ". Legen Sie „false“ fest, wenn Sie DOM-Bauminformationen oder andere Informationen senden möchten, die Sie nicht konvertieren möchten.

  • scriptCharset

  • Typ: String

    Nur ​​wenn der angeforderte Datentyp „jsonp“ oder „script“ ist und der Typ „Nur“ lautet „GET“ wird verwendet, um eine Änderung des Zeichensatzes zu erzwingen. Wird normalerweise nur verwendet, wenn die lokalen und Remote-Inhaltskodierungen unterschiedlich sind.

  • Erfolg

  • Typ: Funktion

    Rückruffunktion nach erfolgreicher Anfrage.

    Parameter: Vom Server zurückgegebene und gemäß dem dataType-Parameter verarbeitete Daten; eine Zeichenfolge, die den Status beschreibt.

    Dies ist eine Ajax-Veranstaltung.

  • traditionell

  • Typ: Boolean

    Wenn Sie Daten auf herkömmliche Weise serialisieren möchten, ist set true. Bitte beachten Sie die jQuery.param-Methode in der Kategorie „Tools“.

  • Timeout

  • Typ: Zahl

    Legen Sie das Anfrage-Timeout fest (Millisekunden). Diese Einstellung überschreibt die globale Einstellung.

  • Typ

  • 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.

  • URL

  • Typ: String

    Standardwert: Aktuelle Seitenadresse. Die Adresse, an die die Anfrage gesendet werden soll.

  • Benutzername

  • Typ: Zeichenfolge

    Benutzername, der zur Beantwortung von HTTP-Zugriffsauthentifizierungsanfragen verwendet wird.

  • xhr

  • Typ: Funktion

    Erfordert die Rückgabe eines XMLHttpRequest-Objekts. Der Standardwert ist ActiveXObject unter IE und ansonsten XMLHttpRequest. Wird verwendet, um ein erweitertes XMLHttpRequest-Objekt zu überschreiben oder bereitzustellen. Dieser Parameter war vor jQuery 1.3 nicht verfügbar.

Rückruffunktion

Wenn Sie die von $.ajax() erhaltenen Daten verarbeiten möchten, müssen Sie die Rückruffunktion verwenden: beforeSend, error, dataFilter, success, vollständig.

beforeSend

wird vor dem Senden der Anfrage aufgerufen und übergibt einen XMLHttpRequest als Parameter.

error

wird aufgerufen, wenn ein Anforderungsfehler auftritt. Durch Übergabe des XMLHttpRequest-Objekts wird eine Zeichenfolge, die den Fehlertyp beschreibt, und ein Ausnahmeobjekt (falls vorhanden)

dataFilter

aufgerufen, nachdem die Anforderung erfolgreich war. Übergeben Sie die zurückgegebenen Daten und den Wert des Parameters „dataType“. Und muss neue Daten (möglicherweise verarbeitet) zurückgeben, die an die Erfolgsrückruffunktion übergeben wurden.

success

wird nach der Anfrage aufgerufen. Übergeben Sie die zurückgegebenen Daten und eine Zeichenfolge mit dem Erfolgscode.

abgeschlossen

Diese Funktion wird aufgerufen, wenn die Anfrage abgeschlossen ist, unabhängig von Erfolg oder Misserfolg. Übergeben Sie das XMLHttpRequest-Objekt und eine Zeichenfolge mit einem Erfolgs- oder Fehlercode.

Datentyp

$.ajax()-Funktion verlässt sich auf die vom Server bereitgestellten Informationen, um die zurückgegebenen Daten zu verarbeiten. Wenn der Server meldet, dass es sich bei den zurückgegebenen Daten um XML handelt, können die zurückgegebenen Ergebnisse mithilfe normaler XML-Methoden oder jQuery-Selektoren iteriert werden. Wenn andere Typen wie HTML angezeigt werden, werden die Daten als Text behandelt.

Sie können über die Option dataType auch andere unterschiedliche Datenverarbeitungsmethoden angeben. Neben einfachem XML können Sie auch HTML, JSON, JSONP, Script oder Text angeben.

Unter anderem werden die von Text- und XML-Typen zurückgegebenen Daten nicht verarbeitet. Die Daten übergeben einfach das Attribut „responseText“ oder „responsHTML“ des XMLHttpRequest an die Erfolgsrückruffunktion.

Hinweis: Wir müssen sicherstellen, dass der vom Webserver gemeldete MIME-Typ mit dem von uns ausgewählten Datentyp übereinstimmt. Im Fall von XML muss der Server beispielsweise text/xml oder application/xml deklarieren, um konsistente Ergebnisse zu erhalten.

Bei Angabe als HTML-Typ wird jegliches eingebettete JavaScript ausgeführt, bevor der HTML-Code als Zeichenfolge zurückgegeben wird. Ebenso wird bei Angabe des Skripttyps zuerst das serverseitig generierte JavaScript ausgeführt und dann das Skript als Textdaten zurückgegeben.

Bei Angabe als JSON-Typ werden die erhaltenen Daten als JavaScript-Objekt analysiert und das erstellte Objekt als Ergebnis zurückgegeben. Um dies zu erreichen, wird zunächst versucht, JSON.parse() zu verwenden. Wenn der Browser dies nicht unterstützt, wird eine Funktion zum Erstellen verwendet.

JSON-Daten sind eine Art strukturierte Daten, die einfach über JavaScript analysiert werden können. Wenn die erhaltene Datendatei auf einem Remote-Server gespeichert ist (mit unterschiedlichen Domänennamen, d. h. domänenübergreifende Datenerfassung), müssen Sie den Typ jsonp verwenden. Durch die Verwendung dieses Typs wird ein Abfragezeichenfolgenparameter „callback=?“ erstellt, der an die angeforderte URL angehängt wird. Der Server sollte den Namen der Rückruffunktion vor den JSON-Daten hinzufügen, um eine gültige JSONP-Anfrage abzuschließen. Wenn Sie den Parameternamen der Rückruffunktion anstelle des Standardrückrufs angeben möchten, können Sie den JSONP-Parameter von $.ajax() festlegen.

Hinweis: JSONP ist eine Erweiterung des JSON-Formats. Es erfordert serverseitigen Code, um Abfragezeichenfolgenparameter zu erkennen und zu verarbeiten.

Wenn der Skript- oder JSONP-Typ angegeben ist, wird beim Empfang von Daten vom Server tatsächlich das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag anstelle des XMLHttpRequest-Objekts verwendet. In diesem Fall gibt $.ajax() kein XMLHttpRequest-Objekt mehr zurück und Ereignishandler wie beforeSend werden nicht übergeben.

Daten an den Server senden

Standardmäßig verwenden Ajax-Anfragen die GET-Methode. Wenn Sie die POST-Methode verwenden möchten, können Sie den Typparameterwert festlegen. Diese Option beeinflusst auch, wie der Inhalt der Datenoption an den Server gesendet wird. Die Option

data kann entweder eine Abfragezeichenfolge wie key1=value1&key2=value2 oder eine Zuordnung wie {key1: 'value1', key2: 'value2'} enthalten. Wenn die letztere Form verwendet wird, wird der Daten-Resender in eine Abfragezeichenfolge umgewandelt. Diese Verarbeitung kann auch umgangen werden, indem die Option „processData“ auf „false“ gesetzt wird. Dies ist möglicherweise nicht angemessen, wenn wir ein XML-Objekt an den Server senden möchten. Und in diesem Fall sollten wir auch den Wert der Option contentType ändern, um den Standardwert application/x-www-form-urlencoded durch andere geeignete MIME-Typen zu ersetzen .

Erweiterte Optionen

Die globale Option wird verwendet, um zu verhindern, dass auf registrierte Rückruffunktionen wie .ajaxSend oder ajaxError und ähnliche Methoden reagiert wird. Dies ist in manchen Fällen nützlich, beispielsweise wenn die gesendeten Anfragen sehr häufig und kurz sind, und kann in ajaxSend deaktiviert werden.

Wenn der Server eine HTTP-Authentifizierung erfordert, können über die Optionen Benutzername und Passwort ein Benutzername und ein Passwort festgelegt werden.

Ajax-Anfragen sind zeitlich begrenzt, sodass Fehlerwarnungen erfasst und verarbeitet werden und zur Verbesserung der Benutzererfahrung verwendet werden können. Der Timeout-Parameter für Anfragen wird normalerweise auf seinem Standardwert belassen oder global über jQuery.ajaxSetup festgelegt. Die Timeout-Option wird selten für eine bestimmte Anfrage zurückgesetzt.

Standardmäßig wird die Anfrage immer gesendet, der Browser ruft jedoch möglicherweise Daten aus seinem Cache ab. Um die Verwendung zwischengespeicherter Ergebnisse zu deaktivieren, legen Sie den Cache-Parameter auf „false“ fest. Wenn Sie einen Fehler melden möchten, wenn sich die Daten seit der letzten Anfrage nicht geändert haben, können Sie ifModified auf true setzen.

scriptCharset ermöglicht das Festlegen eines bestimmten Zeichensatzes für Anfragen mit 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags, die für Skript- oder JSONP-ähnliche Daten verwendet werden. Dies ist besonders nützlich, wenn die Skript- und Seitenzeichensätze unterschiedlich sind.

Der erste Buchstabe von Ajax ist der erste Buchstabe von asynchron, was bedeutet, dass alle Vorgänge parallel sind und die Reihenfolge der Fertigstellung keinen Zusammenhang hat. Der async-Parameter von $.ajax() ist immer auf true gesetzt, was bedeutet, dass nach dem Start der Anfrage noch anderer Code ausgeführt werden kann. Es wird dringend davon abgeraten, diese Option auf „false“ zu setzen. Dies bedeutet, dass alle Anfragen nicht mehr asynchron sind, was auch dazu führt, dass der Browser blockiert.

Die Funktion $.ajax gibt das von ihr erstellte XMLHttpRequest-Objekt zurück. Normalerweise verarbeitet und erstellt jQuery dieses Objekt nur intern, Benutzer können jedoch auch ein selbst erstelltes xhr-Objekt über die xhr-Option übergeben. Das zurückgegebene Objekt wird normalerweise verworfen, bietet aber dennoch eine Low-Level-Schnittstelle zum Beobachten und Bearbeiten der Anforderung. Beispielsweise kann der Aufruf von .abort() für ein Objekt eine Anforderung anhalten, bevor sie abgeschlossen ist.

Dieser Artikel endet hier (wenn Sie mehr lesen möchten, besuchen Sie die Spalte „PHP Chinese User Manual“ , um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen).

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

Stellungnahme:
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