Heim  >  Artikel  >  Web-Frontend  >  Einführung in domänenübergreifende JSONP-Anfragen

Einführung in domänenübergreifende JSONP-Anfragen

零下一度
零下一度Original
2017-07-16 15:22:241376Durchsuche

In diesem Artikel werden hauptsächlich die relevanten Informationen zu jsonp-domänenübergreifenden Anforderungen im Detail vorgestellt und alle Schnittstellen aktiviert, um die Kapselung domänenübergreifender Browseranforderungen zu unterstützen, was einen bestimmten Referenzwert hat.

Separate Erklärung:

1. JSONP:

Intuitives Verständnis:

besteht darin, eine Funktion dynamisch auf der Client-

Funktion zu registrieren a(data) und übergeben Sie dann den Funktionsnamen an den Server. Der Server gibt a({/*json*/}) zur Ausführung an den Client zurück und ruft so die

Funktion a(data) des Clients auf. , wodurch eine domänenübergreifende Funktion erreicht wird:

1. Bei einer direkten Ajax-Anfrage besteht kein domänenübergreifender Zugriff, unabhängig davon, ob es sich um eine statische Seite handelt. dynamische Webseite, Webdienst, WCF, solange es sich um eine domänenübergreifende Anfrage handelt und nicht funktioniert.

2. Beim Aufrufen von js-Dateien auf Webseiten ist dies jedoch nicht betroffen.

Weitere Maßnahmen: Wir haben festgestellt, dass alle Tags mit Src-Attributen domänenübergreifende Funktionen haben als: <script> Um auf Daten zuzugreifen, können Sie nur die folgende Methode verwenden: Versuchen Sie, die Daten in den Text im JS-Format auf dem Remote-Server zu laden, damit sie vom Client aufgerufen und weiterverarbeitet werden können. </script>

5. JSON ist ein reines Zeichendatenformat und kann von js nativ unterstützt werden.

6. Hier ist die Lösung: Der Webclient ruft die auf dem domänenübergreifenden Server dynamisch generierte Datei im js-Format (normalerweise mit json als Suffix) auf genau die gleiche Weise auf wie der Aufruf des Skripts.

7. Nachdem der Client die JSON-Datei erfolgreich aufgerufen hat, erhält er die erforderlichen Daten und der Rest besteht darin, sie entsprechend seinen eigenen Anforderungen zu verarbeiten.

8 Um

Kunden die Nutzung von

Daten zu erleichtern, wurde nach und nach ein informelles Übertragungsprotokoll namens JSONP entwickelt. Ein wichtiger Punkt dieses Protokolls besteht darin, Benutzern die Übergabe eines Rückrufparameters an den Server zu ermöglichen. Wenn der Server dann Daten zurückgibt, verwendet er diesen Rückrufparameter als Funktionsnamen zum Umschließen der JSON-Daten, sodass der Client ihn anpassen kann eigene Funktion zur Verarbeitung der zurückgegebenen Daten.

Spezifische Implementierung: Ob jQuery, extjs oder andere Frameworks, die JSONP unterstützen, die Arbeit, die sie hinter den Kulissen leisten, ist die gleiche jsonp auf der Clientseite:

1 Wir wissen, dass die Webseite auch dann bedingungslos ausgeführt werden kann, wenn der Code in der domänenübergreifenden js-Datei (die natürlich der Webskript-Sicherheitsrichtlinie entspricht) vorhanden ist.

Es gibt eine remote.js-Datei im Stammverzeichnis des Remote-Servers remoteserver.com mit dem folgenden Code:

alert('I am

remote file

');

Es gibt nicht viel zu sagen, siehe Kerncode1. Definieren Sie eine Klasse, erben Sie MappingJackson2HttpMessageConverter, überschreiben Sie die Methode writeInternal und beurteilen Sie einfach, ob die Methode einen Rückrufparameter enthält Es gibt keine direkte Rückgabe von Daten. Wenn dies der Fall ist, schließen die Daten den Wert des Rückrufparameters in Klammern und geben ihn zurück.

2. Definieren Sie die Java-Bean und achten Sie darauf, den Klassenscanpfad so zu ändern, dass die riteInternal-Methode in der MappingJackson2HttpMessageConverter-Klasse jedes Mal aufgerufen wird, wenn eine Anfrage eingeht Parameter, er wird aufgerufen callbackValue( 'data') Formatdaten werden an das Frontend zurückgegeben.

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. Das Frontend wird über Ajax

gekapselt durch

jquery aufgerufen und die Schlüsselcodes wurden rot markiert
<!-- 定义注解驱动 -->
 <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>

4. Browser druckt Protokoll

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

Das obige ist der detaillierte Inhalt vonEinführung in domänenübergreifende JSONP-Anfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn