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

Cet article présente les méthodes de traitement des requêtes inter-domaines front-end ajax et de traitement des données inter-domaines en arrière-plan, et analyse en détail les problèmes inter-domaines ajax. Les amis qui ont besoin d'en savoir plus sur le front-end et le back-end ajax. Pour mettre fin aux méthodes de traitement des requêtes inter-domaines, vous pouvez lire cet article.

Récemment, j'ai travaillé sur le développement front-end 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 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 le rappelfonction de rappel pour 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écifiez 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 (fichier Java de l'objet de sortie), la méthode printlnObject imprime la jsonstring 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, 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 manière, 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 et de les renvoyer au client via. <a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a> La forme de rappel permet un 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'<a href="http://www.php.cn/js/js-jsref-tutorial.html" target="_blank">objet javascript </a> 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 fonction de paramètre, ceci. 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 existe donc certains risques de sécurité

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

C'est tout le contenu ci-dessus. avec les requêtes inter-domaines ajax, vous pouvez en savoir plus !

Articles similaires recommandés :

Un exemple détaillé explique la solution à l'erreur d'accès inter-domaines ajax 501

Cet article présente principalement en détail la solution à l'erreur d'accès inter-domaines ajax 501 , qui a une certaine référence Valeur, intérêt...

Partage d'exemples de solution parfaite inter-domaines Ajax

L'entreprise souhaite créer une page d'événement et découvrir toutes les informations dans l'interface du processus, requête ajax inter-domaines. Voici une brève introduction au cross-domain...

Solution au problème de perte de cookies dans l'accès inter-domaines Ajax_AJAX lié

Cet article présente principalement le cross-domain Ajax -problème de perte de cookie d'accès au domaine, les amis dans le besoin peuvent s'y référer...

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!