Comment utiliser les requêtes inter-domaines Ajax

Cette fois, je vais vous montrer comment utiliser les requêtes cross-domaines Ajax, et quelles sont les précautions lors de l'utilisation des requêtes cross-domaines Ajax. Voici des cas pratiques, jetons un coup d'œil.

Cet article racontera l'histoire d'un novice qui a rencontré un problème inter-domaines mais ne savait pas qu'il s'agissait d'un problème inter-domaines, puis a su que c'était un problème inter-domaines mais ne savait pas comment pour le résoudre, puis résolu le problème inter-domaines, et finalement trouvé deux façons de résoudre ajax L'ensemble du processus des problèmes inter-domaines.

Je ne sais pas s'il s'agit d'un problème inter-domaines

La raison est la suivante : Afin de réutiliser et de réduire les développements répétés, un utilisateur distinct gestion des droits a été développé et d'autres systèmes obtiennent des informations d'authentification et d'autorisation, appelons-le système A pour le moment ; prenons le système B comme exemple pour appeler le système A. Dans le système B, j'ai utilisé ajax pour appeler l'interface du système A (le format des données est json). J'étais très confus à l'époque. Accéder à l'URL correspondante dans le système A peut renvoyer normalement des données json, mais utiliser ajax pour demander la même chose. L'URL dans le système B est un peu déroutante. Il n'y a eu aucune réaction de la part de l'enfant, comme si de rien n'était. Après des changements répétés comme celui-ci pendant longtemps, je n'arrivais toujours pas à le résoudre, alors j'ai demandé de l'aide à mes collègues et m'ai rappelé qu'il pourrait s'agir d'un problème inter-domaines ajax, j'ai donc résolu le problème en tant que problème inter-domaines. .

Connaître le cross-domain mais ne sait pas comment le résoudre

Connaissant la cause exacte du problème, il ne reste plus qu'à trouver une solution au problème. J'ai cherché longtemps sur Google, et encore une fois, sous la direction d'un collègue, j'ai appris que l'ajax de jQuery possède des attributs tels que jsonp, qui peuvent être utilisés pour résoudre des problèmes inter-domaines.

Trouver une solution

Maintenant que nous savons comment résoudre le problème inter-domaines, le reste concerne les détails de mise en œuvre. Les erreurs sont inévitables pendant le processus de mise en œuvre. Parce que je n'ai pas compris la différence entre les deux formats json et jsonp, j'ai également fait une erreur. Il m'a fallu beaucoup de temps pour la résoudre sur Google.

Tout d'abord, examinons une version simple de la façon d'utiliser l'ajax de jQuery pour résoudre des problèmes inter-domaines sur la page :

$(document).ready(function(){
var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?';
$.ajax({
url:url,
dataType:'jsonp',
processData: false, 
type:'get',
success:function(data){
alert(data.name);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}});
});

Il n'y a aucun problème à l'écrire de cette façon. Au début, la fonction de traitement des erreurs est uniquement alert("error"). Afin de clarifier davantage la cause de l'erreur, la fonction de traitement est remplacée par l'implémentation ci-dessus. La dernière ligne d'alerte est utilisée comme parsererror. J'étais perplexe, alors j'ai continué à chercher sur Google et j'ai finalement trouvé la réponse sur le tout-puissant stackoverflow, le lien est ici. La raison en est que le format de jsonp est légèrement différent du format json, donc le code côté serveur est légèrement différent.

Comparez la différence entre le format json et jsonp :

format json :

{
"message":"获取成功",
"state":"1",
"result":{"name":"工作组1","id":1,"description":"11"}
}

format jsonp :

callback({
"message":"获取成功",
"state":"1",
"result":{"name":"工作组1","id":1,"description":"11"}
})

Vous pouvez voir la différence. Dans l'URL, le paramètre de rappel passé en arrière-plan est Shenma. Shenma a une couche de plus que json, callback(). Vous savez donc comment y faire face. Modifiez donc le code d’arrière-plan.

Le code Java d'arrière-plan final est le suivant :

@RequestMapping(value = "/getGroupById")
public String getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
String callback = request.getParameter("callback");
ReturnObject result = null;
Group group = null;
try {
group = groupService.getGroupById(id);
result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
}
String json = JsonConverter.bean2Json(result);
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(callback + "(" + json + ")");
return null;
}

Notez que vous devez d'abord convertir les résultats de la requête au format json, puis utiliser le paramètre rappel pour ajouter un autre calque en dehors du json, cela devient jsonp. Spécifiez le

type de données comme jsonp ajax pour un traitement ultérieur.

Bien que cela résolve le problème inter-domaines, passons en revue les causes de l'erreur d'analyse. La raison en est que traiter aveuglément les données au format json comme des données au format jsonp à traiter par ajax, ce qui entraîne cette erreur. À l'heure actuelle, le code côté serveur ressemble à ceci :

@RequestMapping(value = "/getGroupById")
@ResponseBody
public ReturnObject getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response){
String callback = request.getParameter("callback");
ReturnObject result = null;
Group group = null;
try {
group = groupService.getGroupById(id);
result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
}
return result;
}

C'est la première façon. pour résoudre le problème inter-domaines ajax De cette façon, cela se termine.

Ajouter une solution

La quête ne se termine jamais lors d'une recherche sur Google, j'ai accidentellement découvert un plug-in jQuery spécialement conçu pour résoudre des problèmes inter-domaines - jquery-jsonp.

Avec la base de la première méthode, il est relativement simple d'utiliser le plug-in jsonp et le code côté serveur ne nécessite aucune modification.

Voyons comment utiliser le plug-in jquery-jsonp pour résoudre des problèmes inter-domaines.

var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?";
$.jsonp({
"url": url,
"success": function(data) {
$("#current-group").text("当前工作组:"+data.result.name);
},
"error": function(d,msg) {
alert("Could not find user "+msg);
}
});

Ceci termine l'introduction des deux façons de résoudre les problèmes inter-domaines.

Supplément : Il existe trois solutions aux problèmes inter-domaines Ajax :

1. Résoudre les problèmes inter-domaines via un intermédiaire. couche de transition

(1) Utilisez le serveur proxy Web pour isoler uniformément les applications dans différents domaines via le serveur proxy. Toutes les applications sont sous un seul nom de domaine. (Comme Apache, nginx, etc.)

（2）跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作。

2.通过

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript