communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > ajax et getJson cross-domain de jquery pour obtenir des données json (tutoriel graphique)

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

亚连
Libérer： 2018-05-21 15:58:17
original
2630 Les gens l'ont consulté

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);
}
});
});
Copier après la connexion

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);
}
Copier après la connexion

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))

< th>Paramètres
Description
urlObligatoire. Spécifie l'URL à laquelle la demande sera envoyée.
donnéesFacultatif. 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
});
Copier après la connexion