Méthodes de traitement des requêtes inter-domaines front-end et back-end Ajax

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, comme la liaison à trois niveaux province-ville-comté dans la région, la liaison à trois niveaux province-ville-comté dans la région. La requête de liaison marque de voiture-série de voiture-modèle de voiture, etc. doit toutes être appelée. L'interface externe (interface avec d'autres projets d'ingénierie) est terminée. Cet article présente principalement les méthodes de traitement des requêtes inter-domaines front-end et de traitement des données inter-domaines back-end, et analyse en détail les problèmes inter-domaines d'Ajax.

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 est requis pour les données json, c'est-à-dire qu'une paire de parenthèses est ajoutée à la couche externe des données json. 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 (le fichier java de l'objet de sortie), la méthode printlnObject imprime une chaîne json normale ; 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 donner un paramètre au paramètre jsonpCallback valeur.

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, j'ajouterai le principe de fonctionnement de jsonp.

3. Analyse du principe inter-domaines de jsonp

Le principe le plus basique de jsonp est : ajouter dynamiquement une balise <script> la balise n'est pas inter-domaines de restrictions. De cette façon, cette méthode cross-domain n'a rien à voir avec le protocole ajax XmlHttpRequest <br></p> <p>JSONP est un protocole non officiel qui permet d'intégrer des balises Script côté serveur pour revenir au client via un rappel javascript. Le formulaire implémente l'accès inter-domaines à JSONP, c'est-à-dire 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 du 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 stade, les données du document javascript, en tant que paramètre, <br> sont transmises à la fonction de rappel prédéfinie par le client (telle que jquery). dans l'exemple ci-dessus) La méthode $.ajax() encapsule le succès : function (json)). (Fonction de rappel d'exécution dynamique) </p> <p> On peut dire que la méthode jsonp est en principe la même 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. JSONP est une injection de script (Script). Injection), il existe donc certains risques de sécurité.

Notez que jquey ne prend pas en charge la publication entre domaines

Recommandations associées :

Vue utilise axios pour. demander des données sur plusieurs domaines en détail

Native JS implémente les requêtes inter-domaines ajax et ajax

Des exemples expliquent le principe des requêtes inter-domaines Ajax en détail

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!