ajax et getJson cross-domain de jquery pour obtenir des données json (tutoriel graphique)

Cet article présente principalement la méthode d'implémentation d'ajax et de getJson de jquery pour obtenir des données json sur tous les domaines. Les amis dans le besoin peuvent venir s'y référer. J'espère que cela sera utile à tout le monde

De nombreux développeurs l'utilisent. jquery pour interagir avec les données côté front-end et côté serveur, il est donc facile de penser que vous pouvez utiliser jquery sur le front-end pour lire les données de n'importe quel site. Lorsque je développais récemment, parce que je devais partager des données avec un projet d'une société tierce et parce que je pensais ne pas occuper beaucoup de ressources du serveur, j'ai décidé de lire les données directement en HTML au lieu de les transférer via le serveur. Ensuite, je viens de rencontrer le problème de l'accès inter-domaines côté navigateur.

Les restrictions de sécurité inter-domaines font référence au côté navigateur, et il n'y a aucune restriction de sécurité inter-domaines côté serveur.

Il existe actuellement deux méthodes couramment utilisées pour l'accès entre domaines du côté du navigateur :

1 via ajax de jQuery. Inter-domaine, ceci est en fait implémenté à l'aide de jsonp.

jsonp est l'abréviation de l'anglais json avec padding. Il permet de générer des balises de script côté serveur et de les renvoyer au client, c'est-à-dire que les balises javascript sont générées dynamiquement et les données sont lues via un rappel javascript.

Exemple de code HTML côté page :

//首先要引入jquery的js包
jQuery(document).ready(function(){
$.ajax({
type : "get", //jquey是不支持post方式跨域的
async:false,
url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL
dataType : "jsonp",
//传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonp: "jsoncallback",
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
jsonpCallback:"success_jsonpCallback",
//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
success : function(json){
alert(json);
}
});
});

Exemple de code côté serveur, en prenant Java comme exemple :

Le code côté serveur est le point clé. J'ai d'abord pensé que tant que le client, l'accès inter-domaines pouvait être effectué directement via jsonp, ce n'est en fait pas le cas et nécessite une prise en charge côté serveur.

public void jsonpTest() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//根据html指定的jsonp回调函数的参数名，获取回调函数的名称
//callbackName的值其实就是：success_jsonpCallback
String callbackName = (String)request.getAttribute("jsoncallback");
//简单模拟一个json字符串，实际可使用google的gson进行转换，次数通过字符串拼接
//{"name":"张三","age":28}
//\是对"号进行转义
String jsonStr = "{\"name\":\"张三\",\"age\":28}";
//最终返回的数据为：success_jsonpCallback({"name":"张三","age":28})
String renderStr = callbackName+"("+jsonStr+")";
response.setContentType("text/plain;charset=UTF-8");
response.getWriter().write(renderStr);
}

Le principe de jsonp :

Enregistrez d'abord un rappel (tel que : 'jsoncallback') sur le client, puis ajoutez le rappel Le nom (tel que : success_jsonpCallback) est transmis à la fonction de traitement correspondante côté serveur.

Le serveur génère d'abord les données json qui doivent être renvoyées au client. Utilisez ensuite la syntaxe javascript pour générer une fonction. Le nom de la fonction est la valeur du paramètre passé (jsoncallback) (success_jsonpCallback).

Enfin, les données json sont placées directement dans la fonction en tant que paramètre, générant ainsi un document de syntaxe js et le renvoyant au client.
Le navigateur client analyse la balise de script et utilise les données renvoyées par le serveur comme paramètre
passe dans la fonction de rappel prédéfinie par le client (telle qu'encapsulée par la méthode jquery $.ajax() dans l'exemple ci-dessus. succès : fonction (json)).

En fait, le chargement des données entre domaines se fait en ajoutant dynamiquement des scripts. Les données ne peuvent pas être obtenues directement, une fonction de rappel est donc requise.

2. Utilisez getJson de jquery pour lire des données sur plusieurs domaines

En fait, le principe fondamental de la méthode getJson est le même que la façon dont ajax utilise jsonp.

GetJson est couramment utilisé en jquery pour obtenir des données distantes et les renvoyer au format json. Le prototype de la fonction est le suivant :

jQuery.getJSON(url,data,success(data,status,xhr))

Paramètres

Description

url

Obligatoire. Spécifie l'URL à laquelle la demande sera envoyée.

données

Facultatif. Spécifie les données à envoyer au serveur avec la requête.

succès (données, statut, xhr)

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象

Facultatif. Spécifie une fonction à exécuter lorsque la demande réussit.

Paramètres supplémentaires :

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

• response - Contient les données de résultat de la requête

• status - Contient le statut de la requête

• $.getJSON("http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?",
      function (data) {
          alert(data);
      }
  );

  xhr - Contient l'objet XMLHttpRequest

Cette fonction est la fonction ajax abrégée, qui est en fait équivalente à : Plus près de chez nous, voyons comment utiliser getJson pour obtenir des données sur plusieurs domaines.

exemple de code de page html :

Principe d'exécution :

Lors de l'envoi d'une demande, un rappel doit être passé Le nom de la fonction est envoyé au serveur.Le serveur obtient le nom de la fonction de rappel et renvoie les données de retour au client sous forme de paramètres, afin que le client puisse l'appeler.

Donc, l'adresse qui envoie l'URL de la requête doit être suivie d'un paramètre comme jsoncallback=?. jquery remplacera automatiquement le numéro ? par le nom de la fonction de rappel générée automatiquement.

La requête finale réelle est donc : http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697Je veux donc la comparer avec le Méthode ajax, C'est-à-dire que l'une des fonctions de rappel est un nom de fonction généré automatiquement et l'autre est un nom de fonction spécifié manuellement.
J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :
jquery+

ajax

Le rendre adaptatif à la hauteur lors de l'application d'iframe
AJAX Quelles sont les méthodes de mise en œuvre de la liaison secondaire

jquery+ajaxComment gérer le retour du json tronqué chinois

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!