Comment implémenter des requêtes inter-domaines ajax front-end et back-end

Cet article présente le traitement des requêtes inter-domaines front-end et les méthodes de traitement des données inter-domaines back-end, et analyse en détail les problèmes inter-domaines d'Ajax. Les amis qui en ont besoin peuvent en tirer des leçons.

J'ai récemment travaillé sur le développement frontal des comptes publics et j'ai rencontré le problème des requêtes inter-domaines Ajax, telles que la liaison à trois niveaux province-ville-comté dans la région, le requête de liaison à trois niveaux marque de voiture-série de voiture-modèle de voiture, etc. Tous doivent être complétés en appelant des interfaces externes (interfaces d'autres projets d'ingénierie). Je vais maintenant partager ma solution personnelle aux requêtes inter-domaines. Bien sûr, avec l'aide du programmeur en arrière-plan, j'en ai découvert l'origine rapidement et je l'ai accumulée lentement, j'espère qu'elle pourra être utile à tout le monde. Veuillez également fournir activement des commentaires ou des suggestions.

Les requêtes inter-domaines doivent utiliser le code d'arrière-plan pour recevoir la fonction de rappel et traiter davantage les données json ; le frontend utilise ensuite une requête ajax pour envoyer les paramètres de rappel au serveur et spécifier le format de données comme jsonp. .

1. Traitement des requêtes inter-domaines en arrière-plan

1.CarBrandController.java (fichier java d'interface de marque de voiture), les méthodes listées ici sont principalement utilisées pour interroger les correspondants selon différents niveaux valeurs Marque, série de voiture, modèle de voiture. Ici, une fonction de rappel est traitée pour les requêtes inter-domaines. Si le rappel renvoyé est nul, il ne s'agit pas d'une requête inter-domaine. Aucun traitement spécial n'est requis. directement ; if Si le rappel renvoyé n'est pas nul, cela indique une requête inter-domaines. Dans ce cas, un traitement spécial doit être effectué sur les données json, c'est-à-dire qu'une paire de parenthèses est ajoutée à la couche externe du json. data Pour plus de détails, veuillez consulter la méthode printlnJSONObject dans le fichier HttpAdapter.java.

public void json(HttpServletRequest request,HttpServletResponse response){ 
  Map<String,Object>map=new HashMap<String, Object>(); 
  String id = request.getParameter("id");      //接收ajax请求带过来的id 
  String level = request.getParameter("level");   //接收ajax请求带过来的level 
  String callback=request.getParameter("callback"); //接收ajax请求带过来的callback参数 
  if ("1".equals(level)) {             //如果level是&#39;1&#39;,则查询第一级目录内容 
    map.put("results", this.carBrandService.findByAttr(null, "first_letter asc")); //调用查询方法，结果放入map 
  } else if ("2".equals(level)) {          //如果level是&#39;2&#39;,则查询第二级目录内容 
    map.put("results", this.carSerieService.findByAttr("parent_id="+id, "first_letter asc"));//调用查询方法，结果放入map 
  } else if ("3".equals(level)) {          //如果level是&#39;3&#39;,则查询第三极目录内容 
    map.put("results", this.carModelYearService.findByAttr("parent_id="+id, "jian_pin desc"));//调用查询方法，结果放入map 
  } 
  map.put("level",level); 
  if (null==callback) {               //如果接收的callback值为null,则是不跨域的请求,输出json对象 
    HttpAdapter.printlnObject(response, map); 
  }else{                      //如果接收的callback值不为null,则是跨域请求，输出跨域的json对象 
  HttpAdapter.printlnJSONPObject(response, map, callback); 
  } 
}

2.HttpAdapter.java (fichier java de l'objet de sortie), la méthode printlnObject imprime une chaîne json normale ; la méthode printlnJSONObject effectue un traitement spécial sur la chaîne json.

/** 
 * 打印对象 
 * @param response 
 * @param object 
*/ 
public static void printlnObject(HttpServletResponse response,Object object){ 
  PrintWriter writer=getWriter(response); 
  writer.println(JSON.toJSONString(object)); 
} 
/** 
 * 打印跨域对象 
 * @param response 
 * @param object 
*/ 
public static void printlnJSONPObject(HttpServletResponse response,Object object,String callback){ 
  PrintWriter writer=getWriter(response); 
  writer.println(callback+"("+JSON.toJSONString(object)+")"); 
}

2. Données de requête inter-domaines ajax front-end

Méthode d'écriture 1 : Envoyer un paramètre callback= au serveur ? , et spécifiez le dataType au format 'jsonp'. Le format de données spécifié lors des requêtes inter-domaines doit être au format jsonp.

function loadData(obj,level,id,value){ 
  $.ajax({  
    url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id+'&callback=?',   //将callback写在请求url后面作为参数携带 
    type:'GET', 
    async:false, 
    dataType:'jsonp', 
    success:function(data){         
      console.log(data);             
      //其他处理(动态添加数据元素)       
  });    
}

Méthode d'écriture 2 : Le rappel n'a pas besoin d'être écrit dans l'url, mais le paramètre jsonp doit être spécifié comme 'callback' et une valeur doit être donnée au paramètre jsonpCallback.

function loadData(obj,level,id,value){ 
  $.ajax({  
    url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id, 
    type:'GET', 
    dataType:'jsonp', 
    jsonp: 'callback',          //将callback写在jsonp里作为参数连同请求一起发送 
    jsonpCallback:'jsonpCallback1',    
    success:function(data){            
    console.log(data);       
}); }

Les deux manières d'écrire ci-dessus ont la même signification, mais elles sont écrites de manières différentes.

Ensuite, ajoutons le principe de fonctionnement de jsonp.

3. Analyse du principe inter-domaines de jsonp

Le principe le plus basique de jsonp est : ajoutez dynamiquement une balise <script> restrictions inter-domaines. De cette manière, cette méthode cross-domain n'a rien à voir avec le protocole ajax XmlHttpRequest </p> <p>JSONP est un protocole non officiel qui permet d'intégrer des balises Script côté serveur et de les renvoyer au client, implémenté dans le forme de rappel javascript L'accès inter-domaines à JSONP est JSON avec remplissage. En raison des restrictions de la politique de même origine, XmlHttpRequest est uniquement autorisé à demander des ressources à la source actuelle (nom de domaine, protocole, port). Si nous voulons faire une requête inter-domaine, nous pouvons faire une requête inter-domaine en utilisant la balise script de HTML et renvoyer le code de script à exécuter dans la réponse, où l'objet javascript peut être transmis directement en utilisant JSON. Cette méthode de communication inter-domaines est appelée JSONP. </p> <p>Fonction jsonCallback jsonp1236827957501(....) : Elle est enregistrée par le client navigateur Après avoir obtenu les données json sur le serveur cross-domain, la fonction de rappel </p> <p><strong>Principe Jsonp. : </strong></p> <p>Enregistrez d'abord un rappel (tel que : 'jsoncallback') sur le client, puis transmettez le nom de rappel (tel que : jsonp1236827957501) au serveur. Remarque : Une fois que le serveur a obtenu la valeur de rappel, il doit utiliser jsonp1236827957501(...) pour inclure le contenu json à afficher. À ce stade, les données json générées par le serveur peuvent être correctement reçues par le client. </p> <p>Utilisez ensuite la syntaxe javascript pour générer une fonction. Le nom de la fonction est la valeur jsonp1236827957501 du paramètre passé 'jsoncallback'.</p> <p>Enfin, placez les données json directement en tant que fonction de paramètre d'entrée, cela génère un document de syntaxe js et le renvoie au client. </p> <p>Le navigateur client analyse la balise de script et exécute le document javascript renvoyé. À ce moment, les données du document javascript sont transmises en paramètre, <br> sont transmises à la fonction de rappel prédéfinie par le client (telle que jquery dans l'exemple ci-dessus) Dans le succès : fonction (json)) encapsulée par la méthode $.ajax() (Exécution dynamique de la fonction de rappel) </p> <p> On peut dire que la méthode jsonp est en principe. les mêmes que <script src="http://cross-domain /...xx.js"></script> sont cohérents (qq space utilise cette méthode pour réaliser l'échange de données entre domaines). un comportement d'injection de script (Script Injection), il y a donc certains risques pour la sécurité.

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

À propos de l'utilisation réelle de log4js dans Express

Comment implémenter la fonction WebSocket à l'aide de NodeJS

Comment obtenir des éléments de nœud en utilisant JS

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!