Heim > Artikel > Backend-Entwicklung > Zusammenfassung der Verwendung von Ajax und JSONP

Zusammenfassung der Verwendung von Ajax und JSONP

小云云Original: 2017-12-25 09:44:152323Durchsuche

Ajax und JSONP können mit dem Hintergrund kommunizieren, um Daten und Informationen abzurufen, müssen jedoch nicht die gesamte Seite aktualisieren, um eine teilweise Aktualisierung der Seite zu erreichen. In diesem Artikel erfahren Sie, wie Sie Ajax und JSONP verwenden. Daher haben wir eine Zusammenfassung der Verwendung von Ajax und JSONP erstellt, um sie mit Ihnen zu teilen. Wir hoffen, dass sie allen weiterhelfen kann.

1. Ajax

•Definition: Eine Technologie, die HTTP-Anfragen für asynchrone Kommunikation mit dem Hintergrund sendet.

•Prinzip: Instanziieren Sie das xmlhttp-Objekt und verwenden Sie dieses Objekt, um mit dem Hintergrund zu kommunizieren.

Die Same-Origin-Richtlinie von Ajax:

•Die von Ajax angeforderten Seiten oder Ressourcen können nur Ressourcen unter derselben Domäne sein, keine Ressourcen aus anderen Domänen. Dies basiert auf der Berücksichtigung der Sicherheit bei der Gestaltung von Ajax .

---------------- ------ ------------------------------------

Ajax-Methode :

1. $.ajax({}):

•Gemeinsame Parameter: •URL: Netzwerkadresse anfordern
•Typ: Anforderungsmethode, der Standardwert ist üblicherweise „GET“. verwendet 'POST'
•dataType: Legen Sie das zurückgegebene Datenformat fest, verwenden Sie im Allgemeinen JSON oder HTML und JSONP; •data: Legen Sie die an den Server gesendeten Daten fest
•.done(): Legen Sie den Rückruf fest Funktion nach erfolgreicher Anfrage
•.fail(): Legt die Rückruffunktion fest, nachdem die Anfrage fehlgeschlagen ist
•async: Legt fest, ob sie asynchron ist, der Standardwert ist „true“, was asynchron bedeutet

•Codeverwendung:

$(function () {
  $("input").click(function () {
    $.ajax({
      url: "./data.json",
      type: "get",
      dataType: "json",
    });
    .done(function(data) {//请求成功的回调函数
      $("input").val(dat.name);
    })
    .fail(function() {
      alert('服务器超时，请重试！');
    });
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

Hinweis: Daten stellen die vom Hintergrund zurückgegebenen Daten dar. Die Verwendung von Ajax muss von der Serverumgebung abhängen.

2. $.get():

•$.get()-Methode verwendet eine GET-Anfrage, um Daten vom Server zu laden; es ist auch eine Ajax-Methode zum Anfordern von Daten erfrischend.

•Parameter:

•URL: Die besuchte URL, die der Same-Origin-Richtlinie folgen muss;
•Daten: Die an den Server gesendeten Daten.
•function(data,status){}: Fordern Sie die Funktion auf, erfolgreich ausgeführt zu werden.
•dataType: Der Datentyp der Anforderungsantwort.

//参考代码：
$(function () {
  $("input").click(function () {
    $.get(
      "./data.json",
      function (data,status) {
        console.log(data.name);
      },
      "json"
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

•Die Parameter der $.get()-Methode unterscheiden sich von denen von $.ajax(). Die URL ist ein erforderlicher Parameter und die anderen drei sind optional.

•Daten sind die zurückgegebenen Daten, der Status gibt den Status der Anfrage an, im Allgemeinen einschließlich „Erfolg“, „Fehler“, „Zeitüberschreitung“ usw.
•Wenn der Datentyp JSONP ist, können Sie auch Daten anfordern domänenübergreifend.
•Keine Rückruffunktion für Anforderungsfehler

3. $.post()

•$.get()-Methode verwendet POST-Anfrage, um Daten vom Server zu laden;

• Die verwendete Methode ist genau die gleiche wie die Methode $.get()

•Daten vom Server laden, es ist kein Datentyp erforderlich angegeben werden, werden die zurückgegebenen Daten automatisch in das Element eingefügt:

•Daten: Anforderungsparameter, optional; Antwort, Status, xhr): Anfrage erfolgreich Die Rückruffunktion

•Die zurückgegebenen Daten werden in p platziert die zurückgegebenen Daten und der Status sind der Status der Anfrage;
•Keine Rückruffunktion für Anfragefehler

$(function () {
  $("input").click(function () {
    $(".box").load(
      "./data.json",
      function (response,status) {
        console.log(data.name);
      }
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
    <p class="box"></p>
  </p>
</body>

4.Methode verwendet AJAX HTTP GET-Anfrage, um JSON zu erhalten Daten.

•Parameter:
•URL: Anforderungs-URL, erforderliche Parameter;
•Funktion(Daten, Status, xhr): Rückruffunktion für erfolgreich Anfrage

•Methode direkt Es werden JSON-Daten abgerufen.

•Keine Rückruffunktion, die einen Fehler zurückgibt eine anonyme Funktion;

5. getScript()

•Methode verwendet AJAX HTTP GET-Anfrage, um js-Code abzurufen und auszuführen

$(function () {
  $("input").click(function () {
    $.getJSON(
      "./data.json",
      function(data,status) {
        console.log(data.name);
      },
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

•Parameter:

• URL: Anfrage-URL, erforderliche Parameter;

• Funktion (Daten, Status): Rückruffunktion für erfolgreiche Anfrage

•Die zurückgegebenen Ergebnisdaten sind JS-Code

•Diese Methode kann zum dynamischen Laden von jsonp

•Definition: Ein Datenkommunikationsformat, das HTTP-Anfragen über Domänen hinweg senden kann

•Prinzip: Verwenden Sie Skript-Tags, um Ressourcen domänenübergreifend zu verknüpfen.

Verwendung 1: Übergabe von Funktionsparametern

$(function () {
  $("input").click(function () {
    $.getScript(
      "./data.js",
      function(data,status) {
        console.log(data);
      },
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

Erläuterung: Definieren Sie eine data.js-Datei extern und den Pfad dieser Datei befindet sich möglicherweise nicht in derselben Domäne wie die aktuelle Seite. Inhalt von data.js:

• Übergeben Sie die Daten in Form von Parametern Auf der Seite definierte Funktion zum Abrufen der Daten.

•Grundsätzlich können die Daten aufgeteilt werden, sodass die Daten nicht zwangsweise unter demselben Domainnamen gespeichert werden müssen.

Verwendung 2: Verwendung von Ajax

•Der Inhalt von data.js ist der gleiche wie oben.

<script type="text/javascript">
  function aa(data){
    console.log(data.name);
  }
</script>
<script type="text/javascript" src="....../data.js"></script>

•Die Methode zur Verwendung von Ajax ist im Wesentlichen ein Skript-Tag, das Ressourcen domänenübergreifend verknüpfen kann, aber JQuery kapselt dieselbe Methode und sieht gleich aus.

•Der Ausführungsprozess des obigen Codes ist: Ajax greift über die JSONP-Technologie domänenübergreifend auf die Datei data.js zu und führt die .done-Methode aus, indem es die aa()-Methode findet und ihre Parameter an die Daten übergibt Parameter der .done-Methode.

•Derzeit hat diese Methode noch ihre Grenzen, das heißt, Sie müssen den Namen der data.js-Datei und die definierte Methode aa kennen. Wenn Sie nur den Domänennamen kennen, ist eine andere Methode erforderlich.

aa({
  
  "data":{
    "name":"xiaohong",
    "age":"18"
  }
})

Verwendung 3

• Überprüfen Sie jedes Mal, wenn Sie ein Schlüsselwort über den Browser eingeben, das vom Server zurückgesendete Datenpaket, suchen Sie die Adresse des Headers in der js-Datei und die zugehörigen Übermittlungsdaten und stellen Sie fest, dass der Schlüssel das Wort Schlüsselwort ist. Daher können Daten an den Server gesendet werden.

•Die vom Server zurückgegebenen Daten werden automatisch an die Parameterdaten der anonymen Funktion des Rückrufs übergeben.

$.ajax({
  url:'...../data.js',//可以不是本地域名 
  type:'get',
  dataType:'jsonp', //jsonp格式访问
  jsonpCallback:'aa' //获取数据的函数
})
.done(function(data){
  console.log(data.name);
})
.fail(function() {
  alert('服务器超时，请重试！');
});

Verwandte Empfehlungen:

Wie natives JS AJAX und JSONP implementiert

Der Unterschied und die Verwendung von JSON und JSONP

Die Verwendung von Ajax und jsonp in Javascript Detaillierte Erklärung des Trickcodes

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von Ajax und JSONP. 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

Vorheriger Artikel：PHP versendet SMS-E-Mails und viele andere praktische PHP-Code-Sharing-FunktionenNächster Artikel：PHP versendet SMS-E-Mails und viele andere praktische PHP-Code-Sharing-Funktionen

In Verbindung stehende Artikel

Mehr sehen