Ausführliche Erläuterung der gemeinsamen Verwendung von jQuery, Ajax und JSONP in JavaScript_jquery

Mit Hilfe von XMLHttpRequest kann der Browser mit dem Server interagieren, ohne die gesamte Seite zu aktualisieren. Dies ist das sogenannte Ajax (Asynchronous JavaScript and XML). Ajax kann Benutzern eine umfassendere Benutzererfahrung bieten.

Ajax-Anfragen werden über JavaScript-Code an die URL gesendet. Wenn der Server antwortet, wird eine Rückruffunktion ausgelöst. Da der gesamte Prozess des Sendens von Anfragen und Antworten asynchron ist, werden andere Javascript-Codes auf der Seite während dieses Zeitraums ohne Unterbrechung weiter ausgeführt.

jQuery bietet sicherlich eine gute Unterstützung für Ajax und abstrahiert auch die schmerzhaften Unterschiede in der Ajax-Unterstützung zwischen verschiedenen Browsern. Es bietet nicht nur die voll funktionsfähige Methode $.ajax(), sondern auch weitere Funktionen wie $.get(), $.getScript(), $.getJSON(), $.post() und $().load () usw. Für eine einfache Methode.

Obwohl es Ajax heißt, verwenden viele Ajax-Anwendungen kein XML, insbesondere jQuery-Ajax-Anwendungen. Die meisten von ihnen verwenden stattdessen kein XML, sie werden häufiger verwendet: einfacher Text, HTML und JSON (JavaScript) Object Notation. .

Im Allgemeinen kann Ajax aufgrund der Einschränkungen der Same-Origin-Richtlinie (gleiches Protokoll, gleicher Domänenname, gleicher Port) keine domänenübergreifenden Anforderungen ausführen, es sei denn, eine Lösung wie JSONP (JSON mit Padding) wird verwendet, um dies zu erreichen einige betroffene Anfragen eingeschränkte domänenübergreifende Funktionalität.
Einige wichtige Konzepte zu Ajax

GET vs. POST, das sind die beiden am häufigsten verwendeten Methoden zum Senden von Anfragen an den Server. Ein korrektes Verständnis der Unterschiede zwischen diesen beiden Methoden ist für die Ajax-Entwicklung sehr wichtig.

Die GET-Methode wird normalerweise verwendet, um einige zerstörungsfreie Vorgänge auszuführen (dh nur Informationen vom Server abzurufen, ohne die Informationen auf dem Server zu ändern). Suchabfragedienste verwenden beispielsweise normalerweise GET-Anfragen. Darüber hinaus werden GET-Anfragen möglicherweise auch vom Browser zwischengespeichert, was zu unvorhersehbaren Problemen führen kann. Im Allgemeinen können GET-Anfragen Daten nur über Abfragezeichenfolgen an den Server senden.

Die POST-Methode wird normalerweise verwendet, um einige destruktive Vorgänge auf dem Server auszuführen (d. h. die Daten auf dem Server zu ändern). Wenn Sie beispielsweise einen Blog-Beitrag veröffentlichen, sollten Sie eine POST-Anfrage verwenden. Im Gegensatz zu GET-Anfragen gibt es bei POST-Anfragen keine Caching-Probleme. Bei POST-Anfragen kann die Abfragezeichenfolge als Teil der URL auch Daten an den Server senden, diese Methode wird jedoch nicht empfohlen. Alle Daten sollten separat von der URL gesendet werden.

Datentyp, jQuery erfordert normalerweise die Angabe des vom Server zurückgegebenen Datentyps. In einigen Fällen ist der Datentyp möglicherweise bereits im Methodennamen enthalten, z. B. $.getJSON(). Andernfalls wird er als verwendet verfügbar Teil des konfigurierten Objekts, das schließlich als Parameter der $.ajax()-Methode verwendet wird. Zu den Datentypen gehören normalerweise Folgendes:

• Text: Klartext, der zur Übertragung einfacher Zeichenfolgen verwendet wird.
• HTML: Wird zur Übertragung eines HTML-Stücks verwendet.
• Skript: Fügen Sie der Seite ein Skript hinzu.
• json: Übertragen Sie ein formatiertes JSON-Objekt, das Zeichenfolgen, Arrays oder Objekte enthalten kann.
• jsonp: wird zur Übertragung von JSON-Daten verwendet, die von anderen Domänen zurückgegeben werden.
• xml: Wird zur Übertragung benutzerdefinierter Daten im XML-Format verwendet.

Asynchrone Ausführung, das A in Ajax bezieht sich auf asynchron. An diesem Punkt kann es für viele jQuery-Anfänger schwierig sein zu verstehen, was asynchron ist, da Ajax-Anfragen standardmäßig asynchron sind und die vom Server zurückgegebenen Informationen nicht sofort verfügbar sind. Alle vom Server zurückgegebenen Informationen können nur in einer Callback-Funktion verarbeitet werden. Beispielsweise ist der folgende Code falsch:

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

Der richtige Ansatz sollte darin bestehen, die vom Server zurückgegebenen Daten in der Rückruffunktion zu verarbeiten. Die Rückruffunktion wird nur ausgeführt, wenn die Ajax-Anfrage erfolgreich abgeschlossen wurde:

$.get('foo.php', function(response) { console.log(response); });

同源策略及 JSONP，前面已经说过，一般情况下 Ajax 的请求会被限制在相同协议（http 或 https）、相同端口、相同域名下才能正确执行，但是 HTML 的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签却无此限制，它可以载入任何域下的脚本，jQuery 正是利用了这一点才得以拥有跨域执行 Ajax 的能力。

所谓 JSONP，就是其它域的服务端返回给我们的是 JavaScript 代码，这段代码可以被加载到 HTML 中的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签中，这段 JavaScript 代码中包含有从其它域下的服务端返回的 JSON 数据，并以回调函数的形式提供。这样一来 jQuery 就回避了同源策略的限制，曲线拥有了跨域执行 Ajax 的能力。

Ajax 调试工具，现在比较新的浏览器如 Chrome 和 Safari，甚至 IE 都内置了调试工具，Firefox 也有无比强大 FireBug 插件，借助于这些调试工具，可以非常详细的查看 Ajax 的执行过程。
和 Ajax 相关的一些方法

jQuery 提供了好多种简便的 Ajax 方法，但是它们的核心都是 $.ajax，所以必须正确理解 $.ajax。

jQuery 的 $.ajax 是创建 Ajax 请求中最直接也是最有效的方法，它的参数是一个 JavaScript 对象，我们可以在这个对象中对 Ajax 作非常详细的配置。另外，$.ajax 方法还可以分别定义 Ajax 请求成功和失败时的回调函数；而且它以一个可配置的对象作为参数的特性，使得我们可以在 Ajax 方法外配置这个对象，然后再传进来，这非常有助于实现代码复用。关于这个方法的详细文档：http://api.jquery.com/jQuery.ajax/

一个典型的示例如下：

$.ajax({
  // 要请求的 URL
  url : 'post.php',

  // 要发给服务端的数据
  // （将会转化为查询字符串，如：?id=123）
  data : { id : 123 },

  // 定义此 Ajax 请求是 POST 还是 GET
  type : 'GET',

  // 服务端返回的数据类型
  dataType : 'json',

  // Ajax 成功执行时的回调函数；
  // 回调函数的参数即为服务端返回的数据
  success : function(json) {
    $('<h1/>').text(json.title).appendTo('body');
    $('<div class="content"/>')
      .html(json.html).appendTo('body');
  },

  // 如果 Ajax 执行失败；
  // 将返回原始错误信息以及状态码
  // 传入这个回调函数中
  error : function(xhr, status) {
    alert('Sorry, there was a problem!');
  },

  // 这里是无论 Ajax 是否成功执行都会触发的回调函数
  complete : function(xhr, status) {
    alert('The request is complete!');
  }
});

Bemerkungen:

Über dataType: Wenn sich der hier definierte dataType vom vom Server zurückgegebenen Datenformat unterscheidet, schlägt die Ausführung unseres Codes möglicherweise fehl und es ist schwierig, den Grund herauszufinden, da der von HTTP zurückgegebene Statuscode keinen Fehler anzeigt . Daher müssen Sie beim Ausführen einer Ajax-Anfrage sicherstellen, dass das vom Server zurückgegebene Datenformat mit der vordefinierten Definition übereinstimmt. Normalerweise ist es effektiv, den Inhaltstyp in den HTTP-Header-Informationen zu überprüfen. Für JSON sollte der entsprechende Inhaltstyp application/json sein.

Einige Anpassungsoptionen für $.ajax

Die $.ajax-Methode verfügt über viele Anpassungsoptionen, weshalb diese Methode so leistungsstark ist. Um sich alle Anpassungsoptionen anzusehen, können Sie sich die offizielle Dokumentation ansehen: http://api.jquery.com/jQuery.ajax/. Nachfolgend sind nur einige häufig verwendete Optionen aufgeführt:

async: Der Standardwert ist true. Wenn Ajax synchron ausgeführt werden soll, können Sie ihn auf false setzen. Bitte beachten Sie, dass Ihr anderer JavaScript-Code unterbrochen wird, wenn Sie diesen Wert auf „false“ setzen, bis die Ajax-Anfrage abgeschlossen ist und die vom Server zurückgegebenen Daten empfangen werden. Bitte verwenden Sie diese Option daher mit Vorsicht.
Cache: Legen Sie fest, ob die vom Server zurückgesendeten Daten zwischengespeichert werden sollen. Der Standardwert ist wahr für Daten in anderen Formaten als „script“ und „jsonp“. Wenn es auf „false“ gesetzt ist, wird beim Senden einer Anfrage an den Server eine Abfragezeichenfolge zur URL hinzugefügt. Der Wert der Zeichenfolge ist der aktuelle Zeitstempel, um sicherzustellen, dass die URL für jede Anfrage unterschiedlich ist, und das ist natürlich auch der Fall nicht vorhanden. Es liegt ein Caching-Problem vor. Die Methode zum Abrufen des Zeitstempels in JavaScript ist new Date().getTime().
Abgeschlossen: Die Rückruffunktion wird ausgelöst, wenn die Ajax-Anfrage abgeschlossen ist. Diese Rückruffunktion wird unabhängig davon ausgelöst, ob die Ausführung erfolgreich ist oder nicht. Diese Rückruffunktion kann die vom Server zurückgegebenen Originalinformationen und Statuscodes akzeptieren.
Kontext: Definieren Sie den Bereich, in dem die Callback-Funktion ausgeführt wird (auf wen zeigt die Callback-Funktion(en) {alert(this)}?). Standardmäßig verweist dies in der Rückruffunktion auf den Parameter, der an die Methode $.ajax übergeben wird, bei dem es sich um das große Objekt handelt.
Daten: Die an den Server zu sendenden Daten können ein Objekt oder eine Abfragezeichenfolge sein, z. B. foo=bar&baz=bim.
DataType: Der vom Server zurückgegebene Datentyp. Wenn Sie diese Option nicht festlegen, ermittelt jQuery sie anhand des MIME-Typs der vom Server zurückgegebenen Daten.
Fehler: Die Rückruffunktion, die ausgelöst wird, wenn ein Ajax-Ausführungsfehler auftritt. Diese Funktion akzeptiert die ursprünglichen Anforderungsinformationen und den Statuscode.
jsonp: Der Name der Callback-Funktion, die beim Ausführen einer JSONP-Anfrage angegeben werden muss. Der Standardwert ist „callback“.
Erfolg: Die Rückruffunktion, die ausgelöst wird, wenn Ajax erfolgreich ausgeführt wird. In der Funktion können Sie die vom Server zurückgegebenen Informationen abrufen (wenn dataType auf JSON gesetzt ist, sollten die zurückgegebenen Daten ein JavaScript-Objekt sein. Natürlich können Sie auch die ursprünglichen Dateninformationen und den vom Server zurückgegebenen Statuscode abrufen).
Timeout: Legen Sie ein Timeout für Ajax-Anfragen in Millisekunden fest.
Typ: Geben Sie die Anforderungsmethode an, GET oder POST, der Standardwert ist GET. Andere Methoden wie PUT und DELETE können ebenfalls verwendet werden, werden jedoch nicht von allen Browsern unterstützt.
URL: Die anzufordernde URL.

Die URL-Option ist die einzige erforderliche Option unter allen Optionen, und die anderen Optionen sind optional.
Einige einfache Methoden

Wenn Sie nicht so viele konfigurierbare Optionen benötigen und sich nicht um die Behandlung von Ajax-Ausführungsfehlern kümmern, bietet jQuery auch einige sehr nützliche und praktische Methoden, um Ajax-Anfragen präziser zu bearbeiten. Tatsächlich kapseln diese einfachen Schreibmethoden lediglich $.ajax und legen bestimmte Optionen fest.

Die von jQuery bereitgestellte einfache Methode lautet wie folgt:

• $.get: Führen Sie eine GET-Anfrage für die angegebene URL aus.
• $.post: Führen Sie eine POST-Anfrage an die angegebene URL aus.
• $.getScript: Skript zur Seite hinzufügen.
• $.getJSON: Führen Sie eine GET-Anfrage aus. Die vom Server zurückgegebenen Informationen sollten JSON sein.

Die folgenden Parameter können in jeder der oben genannten einfachen Methoden übergeben werden:

URL: Die angeforderte URL muss angegeben werden.
Daten: An den Server gesendete Daten, optional. Kann ein Objekt oder eine Abfragezeichenfolge sein, z. B. foo=bar&baz=bim.

• Hinweis: Diese Option ist für $.getScript nicht verfügbar.

Eine Rückruffunktion: Diese Rückruffunktion wird ausgelöst, nachdem die Anfrage erfolgreich ausgeführt wurde. Optional. Die Rückruffunktion akzeptiert die vom Server zurückgegebenen Daten, einschließlich des Statuscodes der Anfrage und des Originalobjekts.
Datentyp: Der vom Server zurückgegebene Datentyp. Optional.

•         备注：此选项只适用于那些在其名称中没指定数据类型的方法。

下面是三个简便方法的示例：

// 获取纯文本或者 html
$.get('/users.php', { userId : 1234 }, function(resp) {
  console.log(resp);
});

// 向页面中添加脚本，然后执行脚本中定义的函数。
$.getScript('/static/js/myScript.js', function() {
  functionFromMyScript();
});

// 从服务端获取 JSON 格式的数据。
$.getJSON('/details.php', function(resp) {
  $.each(resp, function(k, v) {
    console.log(k + ' : ' + v);
  });
});

$.fn.load

$.fn.load 方法是 jQuery 所有 Ajax 方法中唯一在选择器结果集上调用的方法。$.fn.load 方法从给定的 URL 上获取信息，然后填充到选择器结果集包含的元素中。另外，在 URL 后面还可以附加一些选择器，jQuery 最终只会把跟选择器相匹配的内容填充到对应的 HTML 元素中。

下面是示例：

$('#newContent').load('/foo.html');

// 或
$('#newContent').load('/foo.html #myDiv h1:first', function(html) {
 alert('加载完毕！');
});

Ajax 和 表单

在跟表单打交道方面，jQuery 的 Ajax 更显神威。最为有用的两个方法就是 $.fn.serialize 和 $.fn.serializeArray，下面是它们的用法：

// 将表单中数据转化为查询字符串
$('#myForm').serialize();

$('#myForm').serializeArray();
// 将表单中数据转化为对象数组，如：
[
  { name : 'field1', value : 123 },
  { name : 'field2', value : 'hello world' }
]

使用 JSONP

JSON 的本质其实是一种跨站点脚本注入。现在有很多比较好的网站都提供了 JSONP 服务，允许我们用他们预先定义好的 API 获取他们的数据。下面是一个示例，来源于 http://www.giantflyingsaucer.com/blog/?p=2682

服务端代码：

<&#63;php
  header("content-type: text/javascript");

  if(isset($_GET['name']) && isset($_GET['callback'])) {
    $obj->name = $_GET['name'];
    $obj->message = "Hello " . $obj->name;

    echo $_GET['callback']. '(' . json_encode($obj) . ');';
  }
&#63;>

客户端代码：

$.ajax({
  url: 'http://otherDomail.com:8080/JSONP/jsonp-demo.php',
  data: {name: 'Super man'},
  dataType: 'jsonp',
  jsonp: 'callback',
  success: function( response ) {
    console.log( response.message );
  }
});

jQuery 把 JSONP 的实现细节隐藏在幕后，我们要做的就是告诉 jQuery 服务端定义好的函数名以及我们请求的数据类型是 JSONP，其它方面和普通的 Ajax 请求没什么区别。
Ajax 事件

很多时候我们都需要在 Ajax 请求开始或结束时做一些操作，例如显示或隐藏一个 loading… 图片。这些工作本可以在每个 Ajax 请求中各自实现，但是 jQuery 提供了更好的方法，你可以像绑定普通事件一样绑定 Ajax 事件。若要参阅全部事件列表，可访问 http://docs.jquery.com/Ajax_Events。下面是简单示例：

$('#loading_indicator')
  .ajaxStart(function() { $(this).show(); })
  .ajaxStop(function() { $(this).hide(); });