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

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.

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 et 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 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 3f1c4e4b6b16bbbd69b2ee476dc4f83a restrictions inter-domaines. De cette manière, cette méthode cross-domain n'a rien à voir avec le protocole ajax XmlHttpRequest

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.

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

Principe Jsonp. :

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.

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'.

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.

Le navigateur client analyse la balise de script et exécute le document javascript renvoyé. À ce moment, les données du document javascript, en tant que paramètre,
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)

On peut dire que la méthode jsonp est en principe la même que c4c1dfbe82d15c01f5050b6da72a1f0b2cacc6d41bbb37262a98f745aa00fbf0 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 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 :

Explication détaillée du principe de fonctionnement d'AJAX et de ses avantages et inconvénients

Comment implémenter le mode sans rafraîchissement fonction de pagination avec PHP+Ajax

php+ajaxTéléchargement asynchrone de fichiers ou d'images

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!