Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erläuterung der Schritte zum domänenübergreifenden Abrufen von Daten mithilfe von jQuery und Ajax

php中世界最好的语言
Freigeben: 2018-04-24 16:54:27
Original
1612 Leute haben es durchsucht

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte geben, mit denen jQuery Ajax zum Abrufen domänenübergreifender Daten verwenden kann Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

Ein einfaches Beispiel für jQuery mit Ajax zum Abrufen von Daten über Domänen hinweg

var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; 
    jQuery.support.cors = true;
    //之前没有加这句老是提示no transport,我没去深想。
    $.ajax
    ({
      
      type: "POST",
      contentType: "application/x-www-form-urlencoded",
      dataType: "html",
      url: "http://www.*****.com", //这里是网址
      success:function(data){alert(data);},
      timeout:30000, 
      error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert(errorThrown);
      }
    });
Nach dem Login kopieren

Parameter

OptionenTyp: Objekt
Kann auswählen. 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, z. B. das Hinzufügen benutzerdefinierter 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, 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


Nach Abschluss der Anfrage

Rückruffunktion

(wird aufgerufen, nachdem die Anfrage erfolgreich 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.

So:

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

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 Klartext-HTML-Informationen zurück; das enthaltene Skript-Tag wird ausgeführt, wenn es in den Dom eingefügt wird.

•"script":

Nur-Text-JavaScript-Code zurückgeben. 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":

JSON-Daten zurückgeben.

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

•"text": Nur-Text-Zeichenfolge zurückgeben
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

Nur ​​neue Daten abrufen, 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 um. 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: WAHR. 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 Datentyp bei Anforderung „jsonp“ oder „script“ ist und der Typ „GET“ ist, wird er zum Erzwingen der Änderung des verwendet Zeichensatz. 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

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

Timeout
Typ: Zahl

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

Typ
Typ: String

Standardwert: „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

Muss ein XMLHttpRequest-Objekt zurückgeben. 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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Eine Zusammenfassung von 5 Jahren Erfahrung in der Verwendung von Ajax

Eine Zusammenfassung von drei Methoden, um mit Ajax einen domänenübergreifenden Zugriff zu erreichen

Detaillierte Analyse der Ajax-Nutzungsfähigkeiten in JS

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zum domänenübergreifenden Abrufen von Daten mithilfe von jQuery und Ajax. 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!