Analyse des domänenübergreifenden JSONP-Zugriffs (Front-End und Back-End)

Der Inhalt dieses Artikels befasst sich mit der Analyse des domänenübergreifenden JSONP-Zugriffs (Front-End und Back-End). Ich hoffe, dass er für Sie hilfreich ist .

1. Was ist domänenübergreifender Zugriff

Als Beispiel : Wir hoffen, Ajax zu verwenden, um bestimmte Inhalte auf Website B zu erhalten. Wenn sich Website A und Website B nicht in derselben Domäne befinden, liegt ein domänenübergreifendes Zugriffsproblem vor. Sie können verstehen, dass zwei Domänennamen keine Anforderungen senden oder Daten über Domänennamen hinweg anfordern können, da dies sonst unsicher ist. Der domänenübergreifende Zugriff verstößt gegen die Same-Origin-Richtlinie. Für detaillierte Informationen zur Same-Origin-Richtlinie können Sie auf den folgenden Link klicken: Same-Origin_policy; Greifen Sie nur auf Ressourcen desselben Ursprungs (gleicher Ursprung) wie der Domänenname oder die IP-Adresse der HTML-Seite zu.

2. Was ist JSONP

JSONP (JSON mit Padding) ist ein „Nutzungsmodus“ von JSON, der zur Lösung des Problems des domänenübergreifenden Datenzugriffs durch Mainstream-Browser verwendet werden kann.

Aufgrund der Same-Origin-Richtlinie können Webseiten, die sich auf server1.example.com befinden, im Allgemeinen nicht mit anderen Servern als server1.example.com kommunizieren, und das HTML-Element

ist eine Ausnahme. Mit dieser offenen Strategie des <script>-Elements können Webseiten JSON-Daten erhalten, die dynamisch aus anderen Quellen generiert werden. Dieses Verwendungsmuster ist das sogenannte JSONP. Bei den mit JSONP erfassten Daten handelt es sich nicht um JSON, sondern um beliebiges JavaScript, das mit einem JavaScript-Interpreter ausgeführt wird, anstatt mit einem JSON-Parser analysiert zu werden. Spezifischere Prinzipien erfordern mehr Platz zur Erklärung, und Sie können selbst zu Baidu gehen. <script>

3. Verwendung von JSONP

Beispiel für die Front-End-Nutzung

JQuery Ajax kapselt JSONP sehr gut und ist für uns sehr praktisch. Front-End-Beispiel:

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

Zu beachten ist:

• dataType, dieser Parameter muss auf jsonp gesetzt werden

• jsonp, der Wert dieses Parameters muss mit dem Server vereinbart werden, Details werden unten vorgestellt. (Der herkömmliche Standardwert ist Rückruf)

Beispiel für die Backend-Kooperation

JQuery Ajax Jsonp-Prinzip

Um JSONP mit dem Backend zu verwenden, müssen Sie es zuerst verstehen eine Funktion von Jquery Ajax jsonp:

Wenn Jquery eine Ajax-JSONP-Anfrage sendet, wird nach dem Zugriffslink automatisch ein Überprüfungsparameter hinzugefügt. Dieser Parameter wird von Jquery zufällig generiert, z. B. der Link

< In 🎜>, der Parameter http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046 wird automatisch von jquery hinzugefügt.
Der Zweck des Hinzufügens dieses Parameters besteht darin, diese Anfrage eindeutig zu identifizieren. Wenn der Server die Anforderung empfängt, muss er den Wert des Parameters mit dem tatsächlich zurückzugebenden JSON-Wert konstruieren (wie er erstellt wird, wird unten erläutert) und ihn zurückgeben. Wenn dies der Fall ist, überprüft das Front-End diesen Parameter Der zuvor gesendete Parameter wird dann empfangen und analysiert. Wenn es sich nicht um diesen Parameter handelt, werden sie abgelehnt. callback=jQuery31106628680598769732_1512186387045&_=1512186387046Was besondere Aufmerksamkeit erfordert, ist der Name dieses Überprüfungsparameters (ich habe 2 Stunden mit dieser Grube verschwendet. Dieser Name stammt vom Wert des Front-End-Parameters
jsonp
). Wenn der Wert des Front-End-JSONP-Parameters in „aaa“ geändert wird, sollte der entsprechende Parameter aaa=jQuery31106628680598769732_1512186387045&_=1512186387046
Back-End-Empfang und -Verarbeitung

I sein kennen Jquery Ein jaxJsonp Das Prinzip und die zu akzeptierenden Parameter sind bekannt, und wir können das serverseitige Programm schreiben.

Um mit JSON zusammenzuarbeiten, kann der Server in zwei Schritten zusammengefasst werden:

Der erste Schritt besteht darin, Verifizierungsparameter zu empfangen.

Verifizierung gemäß dem JSONP-Parameter empfangen Name stimmt mit den Front-End-Ajax-Parametern überein. Beispiele sind wie folgt (unter Verwendung von SpringMVC haben andere Sprachen und Frameworks ähnliche Prinzipien)

    @ResponseBody
    @RequestMapping("/getJsonp")
    public String getMySeatSuccess(@RequestParam("callback") String callback){

Der zweite Schritt besteht darin, Parameter zu erstellen und zurückzugeben

Kombinieren Sie den empfangenen Verifizierungsparameter-Callback mit den tatsächlich zurückzugebenden JSON-Daten. Konstruiert nach der Methode „callback(json)“:

     @ResponseBody
    @RequestMapping("/getMySeat")    
    public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson();   //google的一个json工具库
        Map<String,String> map=new HashMap<>();        
        map.put("seat","1_2_06_12");        
        return callback+"("+gson.toJson(map)+")";   //构造返回值
    }

4. Zusammenfassung

Schließlich der entsprechende Code für Das vordere und hintere Ende sollten so aussehen:

Frontend

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

Backend

    @ResponseBody
    @RequestMapping("/getMySeat")    
    public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson();        
        Map<String,String> map=new HashMap<>();        
        map.put("seat","1_2_06_12");
        logger.info(callback);        
        return callback+"("+gson.toJson(map)+")";
    }

Es sollte beachtet werden, dass:

Das Front-End sollte auf die Kommunikation mit dem Back-End achten, um den Wert von JSONP zu vereinbaren, normalerweise den Standard-Rückruf für alle Verwendung.
Nachdem das Backend die Parameter gemäß dem JSONP-Parameternamen erhalten hat, muss es in einer „Callback(JSON)“-Methode mit den zurückzugebenden JSON-Daten erstellt werden.
Wenn Sie testen möchten, denken Sie daran, dies in einer domänenübergreifenden Umgebung (zwei Maschinen) durchzuführen.
Das vollständige Beispiel besteht aus den beiden oben genannten Codeteilen, die bei persönlichen Tests wirksam sind.

Verwandte Empfehlungen:

Domänenübergreifender Zugriff JSONP CORS_html/css_WEB-ITnose

JSONP-domänenübergreifende GET-Anfrage löst Ajax-domänenübergreifender Domänenzugriff problem_json

Das obige ist der detaillierte Inhalt vonAnalyse des domänenübergreifenden JSONP-Zugriffs (Front-End und Back-End). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!