Introduction aux requêtes inter-domaines jsonp

Cet article présente principalement les informations pertinentes de la requête inter-domaine jsonp en détail et active toutes les interfaces pour prendre en charge l'encapsulation des requêtes inter-domaines du navigateur, qui a une certaine valeur de référence.

Explication séparée :

1. JSONP :

Compréhension intuitive :

consiste à enregistrer dynamiquement une fonction sur le client

fonction a(data), puis transmettez le nom de la fonction au serveur, et le serveur renvoie a({/*json*/}) au client à exécuter, appelant ainsi la

fonction du client a(data) , réalisant ainsi Cross-domain.

Contexte de naissance :

1 La requête directe Ajax pour les fichiers ordinaires a le problème de l'absence d'accès inter-domaines, qu'il s'agisse ou non d'une page statique, page Web dynamique, service Web, WCF, à condition qu'il s'agisse d'une requête inter-domaines et qu'elle ne fonctionnera pas.

2. Cependant, lors de l'appel de fichiers js sur des pages Web, cela n'est pas affecté.

3. Promotion supplémentaire, nous avons constaté que toutes les balises avec des attributs Src ont des capacités inter-domaines, telles que. as : <script> Pour accéder aux données, vous ne pouvez utiliser que la méthode suivante : essayez de charger les données au format texte js sur le serveur distant pour l'appel du client et un traitement ultérieur. </script>

5. JSON est un format de données de caractères purs et peut être pris en charge nativement par js.

6. Voici la solution : le client web appelle le fichier au format js généré dynamiquement sur le serveur cross-domain (généralement avec json comme suffixe) exactement de la même manière qu'il appelle le script.

7. Une fois que le client a appelé avec succès le fichier json, il obtiendra les données requises et le reste devra le traiter selon ses propres besoins.

8 Afin de faciliter l'utilisation des

clients

données, un protocole de transmission informel s'est progressivement formé, appelé jsonp. Un point clé de ce protocole est de permettre aux utilisateurs de transmettre un paramètre de rappel au serveur, puis lorsque le serveur renvoie des données, il utilisera ce paramètre de rappel comme nom de fonction pour envelopper les données json, afin que le client puisse personnaliser son propre fonction pour traiter les données renvoyées. Implémentation spécifique :

Qu'il s'agisse de jQuery, d'extjs ou d'autres frameworks prenant en charge jsonp, le travail qu'ils effectuent en coulisses est le même. jsonp côté client :

1. Nous savons que même si le code est dans le fichier js inter-domaines (qui est bien sûr conforme à la politique de sécurité du script web), la page web peut être exécutée sans condition.

Il existe un fichier remote.js dans le répertoire racine du serveur distant remoteserver.com avec le code suivant :

alert('I am

remote file

'); Pas grand chose à dire, voir le code principal

1 Définissez une classe, héritez de MappingJackson2HttpMessageConverter, remplacez la méthode writeInternal et jugez simplement s'il y a un paramètre de rappel dans la méthode s'il y en a. Il n'y a pas de retour direct de données, si c'est le cas, les données enveloppent la valeur du paramètre de rappel entre parenthèses et la renvoient.

2. Définissez le bean Java et faites attention à modifier le chemin d'analyse de la classe, afin que la méthode riteInternal de la classe MappingJackson2HttpMessageConverter soit appelée à chaque fois qu'une requête arrive si la requête entraîne un rappel. paramètre, il sera appelé callbackValue( 'data') au format les données sont renvoyées au front-end.

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.IOUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.http.HttpOutputMessage;
import org.springframework.http.converter.HttpMessageNotWritableException;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import com.fasterxml.jackson.core.JsonEncoding;
import com.fasterxml.jackson.core.JsonProcessingException;

public class CallbackMappingJackson2HttpMessageConverter extends MappingJackson2HttpMessageConverter {

 // 做jsonp的支持的标识，在请求参数中加该参数
 private String callbackName;

 @Override
 protected void writeInternal(Object object, HttpOutputMessage outputMessage) throws IOException,
   HttpMessageNotWritableException {
  // 从threadLocal中获取当前的Request对象
  HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder
    .currentRequestAttributes()).getRequest();
  String callbackParam = request.getParameter(callbackName);
  if (StringUtils.isEmpty(callbackParam)) {
   // 没有找到callback参数，直接返回json数据
   super.writeInternal(object, outputMessage);
  } else {
   JsonEncoding encoding = getJsonEncoding(outputMessage.getHeaders().getContentType());
   try {
    String result = callbackParam + "(" + super.getObjectMapper().writeValueAsString(object)
      + ");";
    IOUtils.write(result, outputMessage.getBody(), encoding.getJavaName());
   } catch (JsonProcessingException ex) {
    throw new HttpMessageNotWritableException("Could not write JSON: " + ex.getMessage(), ex);
   }
  }

 }

 public String getCallbackName() {
  return callbackName;
 }

 public void setCallbackName(String callbackName) {
  this.callbackName = callbackName;
 }

}

3. Le front-end est appelé via ajax

<!-- 定义注解驱动 -->
 <mvc:annotation-driven>
  <mvc:message-converters register-defaults="true">
   <bean
    class="xxx.xxx.xxx.CallbackMappingJackson2HttpMessageConverter">
    <property name="callbackName" value="callback" />
   </bean>
  </mvc:message-converters>
 </mvc:annotation-driven>

encapsulé par

jquery Certaines économies de code ont été réalisées ici, et les codes clés ont été marqués en rouge <🎜. >4. Le navigateur imprime le journal

<script type="text/javascript">
 var feedback = {
  init: function(){
   var self = feedback;
   self.bind();
  },
  test: function(data){
   console.log("测试jsonp",data)
  },
  bind: function(){
    var self = feedback;

    var par = {};
     par.callback = &#39;feedback.test&#39;;

    $.ajax({ 
    url:"http://manage.danong.com/rest/open/queryInviteList", 
    data: par,
    dataType:&#39;jsonp&#39;, 
    jsonp:&#39;callback&#39;, 
    timeout:3000 
   }); 
  }
 }
 feedback.init();
</script>

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!