Explication détaillée de l'utilisation conjointe de jQuery, Ajax et JSONP dans JavaScript_jquery

Avec l'aide de XMLHttpRequest, le navigateur peut interagir avec le serveur sans actualiser la page entière. C'est ce qu'on appelle l'Ajax (JavaScript asynchrone et XML). Ajax peut offrir aux utilisateurs une expérience utilisateur plus riche.

Les requêtes Ajax sont pilotées par JavaScript. Une requête est envoyée à l'URL via du code JavaScript. Lorsque le serveur répond, une fonction de rappel sera déclenchée. Les informations renvoyées par le serveur peuvent être traitées dans la fonction de rappel. Étant donné que l'ensemble du processus d'envoi des demandes et des réponses est asynchrone, les autres codes Javascript de la page continueront à s'exécuter pendant cette période sans interruption.

jQuery fournit certainement un bon support pour Ajax, et il élimine également les différences douloureuses dans la prise en charge d'Ajax entre les différents navigateurs. Il fournit non seulement la méthode $.ajax() complète, mais également davantage de fonctions telles que $.get(), $.getScript(), $.getJSON(), $.post() et $().load. (), etc. Pour une méthode simple.

Bien qu'il s'appelle Ajax, de nombreuses applications Ajax n'utilisent pas XML, en particulier les applications jQuery Ajax. La plupart d'entre elles n'utilisent pas XML à la place, elles sont plus couramment utilisées : texte brut, HTML et JSON (JavaScript) Object Notation) ; .

Généralement, en raison des restrictions de la politique de même origine (même protocole, même nom de domaine, même port), Ajax ne peut pas effectuer de requêtes inter-domaines, à moins qu'une solution telle que JSONP (JSON with Padding) ne soit utilisée pour obtenir certaines requêtes concernées. Fonctionnalité inter-domaines limitée.
Quelques concepts importants sur l'Ajax

GET vs POST, ce sont les deux méthodes les plus couramment utilisées pour envoyer des requêtes au serveur. Une bonne compréhension des différences entre ces deux méthodes est très importante pour le développement Ajax.

La méthode GET est généralement utilisée pour effectuer certaines opérations non destructives (c'est-à-dire obtenir uniquement des informations du serveur sans modifier les informations sur le serveur). Par exemple, les services de requêtes de recherche utilisent généralement des requêtes GET. De plus, les requêtes GET peuvent également être mises en cache par le navigateur, ce qui peut entraîner des problèmes imprévisibles. Généralement, les requêtes GET ne peuvent envoyer des données au serveur que via des chaînes de requête.

La méthode POST est généralement utilisée pour effectuer certaines opérations destructrices sur le serveur (c'est-à-dire modifier les données sur le serveur). Par exemple, lorsque vous publiez un article de blog, vous devez utiliser une requête POST. Contrairement aux requêtes GET, les requêtes POST ne présentent pas de problèmes de mise en cache. Dans les requêtes POST, la chaîne de requête faisant partie de l'URL peut également soumettre des données au serveur, mais cette méthode n'est pas recommandée. Toutes les données doivent être envoyées séparément de l'URL.

Type de données, jQuery nécessite généralement de spécifier le type de données renvoyé par le serveur. Dans certains cas, le type de données peut déjà être inclus dans le nom de la méthode, comme $.getJSON(). available Partie de l'objet configuré qui sera éventuellement utilisée comme paramètre de la méthode $.ajax(). Les types de données incluent généralement les éléments suivants :

• texte : texte brut, utilisé pour transmettre des chaînes simples.
• html : utilisé pour transmettre un morceau de HTML.
• script : Ajoutez un script à la page.
• json : Transmettre un objet JSON formaté, qui peut contenir des chaînes, des tableaux ou des objets.
• jsonp : utilisé pour transmettre les données JSON renvoyées par d'autres domaines.
• xml : utilisé pour transmettre des données au format XML personnalisé.

Exécution asynchrone, le A en Ajax fait référence à asynchrone. À ce stade, il peut être difficile pour de nombreux débutants en jQuery de comprendre ce qu'est l'asynchrone, car les requêtes Ajax sont asynchrones par défaut et les informations renvoyées par le serveur ne sont pas immédiatement disponibles. Toutes les informations renvoyées par le serveur ne peuvent être traitées que dans une fonction de rappel. Par exemple, le code suivant est erroné :

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

L'approche correcte doit être de traiter les données renvoyées par le serveur dans la fonction de rappel. La fonction de rappel n'est exécutée que lorsque la requête Ajax est terminée avec succès. Ce n'est qu'à ce moment que les données du serveur peuvent être obtenues :

$.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!');
  }
});

Remarques :

À propos de dataType : Si le dataType défini ici est différent du format de données renvoyé par le serveur, notre code peut ne pas s'exécuter et il est difficile d'en trouver la raison car le code d'état renvoyé par HTTP ne montre pas d'erreur. . Par conséquent, lors de l'exécution d'une requête Ajax, vous devez vous assurer que le format des données renvoyées par le serveur est cohérent avec la définition prédéfinie. Habituellement, il est efficace de vérifier le type de contenu dans les informations d'en-tête HTTP. Pour JSON, le type de contenu correspondant doit être application/json.

Quelques options de personnalisation pour $.ajax

La méthode $.ajax propose de nombreuses options de personnalisation, c'est pourquoi cette méthode est si puissante. Pour consulter toutes les options de personnalisation, vous pouvez vous référer à la documentation officielle : http://api.jquery.com/jQuery.ajax/ Seules certaines options couramment utilisées sont répertoriées ci-dessous :

.

async : La valeur par défaut est true. Si vous avez besoin qu'Ajax soit exécuté de manière synchrone, vous pouvez la définir sur false. Veuillez noter que si vous définissez cette valeur sur false, votre autre code JavaScript sera interrompu jusqu'à ce que la requête Ajax soit terminée et que les données renvoyées par le serveur soient reçues. Veuillez donc utiliser cette option avec prudence.
cache : définissez s'il faut mettre en cache les données renvoyées par le serveur. La valeur par défaut est vraie pour les données dans des formats autres que « script » et « jsonp ». S'il est défini sur false, lors de l'envoi d'une requête au serveur, une chaîne de requête sera ajoutée à l'URL. La valeur de la chaîne est l'horodatage actuel pour garantir que l'URL de chaque requête est différente, et bien sûr, c'est le cas. n'existe pas. Il y a un problème de mise en cache. La méthode pour obtenir l'horodatage en JavaScript est new Date().getTime().
Complete : La fonction de rappel déclenchée lorsque la requête Ajax est terminée. Cette fonction de rappel sera déclenchée, que l'exécution soit réussie ou non. Cette fonction de rappel peut accepter les informations d'origine et le code d'état renvoyés par le serveur.
Contexte : définissez la portée lorsque la fonction de rappel est exécutée (qui fait cela dans la ou les fonctions de fonction de rappel {alert(this)} ?). Par défaut, ceci dans la fonction de rappel pointe vers le paramètre passé à la méthode $.ajax, qui est le gros objet.
Données : Les données à envoyer au serveur. Sa valeur peut être un objet ou une chaîne de requête, telle que foo=bar&baz=bim.
DataType : le type de données renvoyées par le serveur. Si vous ne définissez pas cette option, jQuery la déterminera en fonction du type MIME des données renvoyées par le serveur.
Erreur : la fonction de rappel qui sera déclenchée lorsqu'une erreur d'exécution Ajax se produit. Cette fonction accepte les informations de la demande d'origine et le code d'état.
jsonp : Le nom de la fonction de rappel qui doit être spécifiée lors de l'exécution d'une requête JSONP. La valeur par défaut est "callback".
Succès : la fonction de rappel qui sera déclenchée lorsque Ajax sera exécuté avec succès. Dans la fonction, vous pouvez obtenir les informations renvoyées par le serveur (si dataType est défini sur JSON, les données renvoyées doivent être un objet JavaScript. Bien entendu, vous pouvez également obtenir les informations sur les données d'origine et le code d'état renvoyé par le serveur).
Timeout : définissez un délai d'expiration pour les requêtes Ajax, en millisecondes.
Type : Spécifiez la méthode de requête, GET ou POST, la valeur par défaut est GET. D'autres méthodes telles que PUT et DELETE peuvent également être utilisées, mais tous les navigateurs ne les prennent pas en charge.
url : l'URL à demander.

L'option url est la seule option obligatoire parmi toutes les options, et les autres options sont facultatives.
Quelques méthodes simples

Si vous n'avez pas besoin d'autant d'options configurables et que vous ne vous souciez pas de la gestion des erreurs d'exécution Ajax, jQuery fournit également des méthodes très utiles et pratiques pour compléter les requêtes Ajax de manière plus concise. En fait, ces méthodes d'écriture simples encapsulent simplement $.ajax et prédéfinissent certaines options.

La méthode simple fournie par jQuery est la suivante :

• $.get : effectuez une requête GET pour l'URL donnée.
• $.post : effectuez une requête POST vers l'URL donnée.
• $.getScript : Ajouter un script à la page.
• $.getJSON : exécutez une requête GET et les informations renvoyées par le serveur doivent être JSON.

Les paramètres suivants peuvent être transmis dans chacune des méthodes simples ci-dessus :

url : L'URL demandée, doit être fournie.
Données : Données envoyées au serveur, facultatives. Peut être un objet ou une chaîne de requête, telle que foo=bar&baz=bim.

• Remarque : Cette option n'est pas disponible pour $.getScript.

Une fonction de rappel : Cette fonction de rappel est déclenchée une fois la requête exécutée avec succès. Facultatif. La fonction de rappel accepte les données renvoyées par le serveur, y compris le code d'état de la demande et l'objet d'origine.
Type de données : le type de données renvoyées par le serveur. Facultatif.

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

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

// 获取纯文本或者 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(); });