JSONP-domänenübergreifende Simulation der Baidu-Suche

1. Was ist JSONP

JSONP ist die Abkürzung für JSON with padding Padding, eine neue Art, JSON anzuwenden. Es ist in späteren Webdiensten sehr beliebt. JSONP sieht ähnlich aus wie JSON, ist aber JSON, das in einem Funktionsaufruf enthalten ist, wie folgt:

Rückruf({"name": "Name"});

SONP besteht aus zwei Teilen : Rückruffunktion und Daten. Die Rückruffunktion ist die Funktion, die auf der Seite aufgerufen werden soll, wenn die Antwort eintrifft. Der Name der Callback-Funktion wird üblicherweise in der Anfrage angegeben. Die Daten sind die JSON-Daten, die an die Rückruffunktion übergeben werden. Das Folgende ist eine typische JSONP-Anfrage.

https://freegeoip.net/json/?callback=handleResponse

Diese URL fordert einen JSONP Geolokalisierungsdienst an. Es ist üblich, die Rückrufparameter des JSONP-Dienstes über die Abfragezeichenfolge anzugeben, wie in der obigen URL gezeigt. Der Name der hier angegebenen Rückruffunktion lautet: handleResponse()
JSONP wird über das dynamische <script> -Element verwendet und für das src-Attribut kann eine domänenübergreifende URL angegeben werden. Sie können Ressourcen aus anderen Domänen ohne Einschränkung laden. Da es sich bei JSONP um gültigen JavaScript Code handelt, wird er sofort nach Abschluss der Anforderung ausgeführt, d. h. nachdem die JSONP-Antwort in die Seite geladen wurde.

2. JSONP-Cross-Domain-Anforderung

Wir wissen, dass die Same-Origin-Policy ein Sicherheitsmechanismus des Browsers ist. Die sogenannte Quelle bezieht sich auf das Protokoll, den Domänennamen und die Portnummer. Wenn unser Skript ausgeführt wird, erkennt der Browser, ob das ausgeführte Skript und die erhaltenen Daten mit unserer HTML-Seite übereinstimmen. Wenn sie gleich sind, haben sie denselben Ursprung und es wird eine erfolgreiche Anfrage gestellt. Wenn ihre Quellen unterschiedlich sind, handelt es sich um eine domänenübergreifende Anfrage. Standardmäßig unterstützen Browser keine domänenübergreifenden Anfragen. Was sollten wir also tun, wenn wir eine domänenübergreifende Anfrage stellen möchten?
script Tag ist nicht durch die Same-Origin-Policy eingeschränkt, d. h. wenn wir ein Skript anfordern, kann es angefordert werden, unabhängig davon, ob es sich auf dem Server befindet, auf dem sich das HTML befindet, oder auf anderen Servern. Daher verwenden wir diese Eigenschaft script -Tags, um domänenübergreifende Datenanforderungen zu stellen. Sehen wir uns an, wie JSONP domänenübergreifende Anforderungen durchführt.
Zuerst fordern wir einen script an. Wenn dieser eine von uns angegebene Funktion aufrufen und die Daten als tatsächlichen Parameter übergeben kann, erhält der formale Parameter seinen tatsächlichen Parameter, um die Daten abzurufen, solange wir diese Funktion und den formalen Parameter definieren. Zum Beispiel:
Angenommen, im Skript ist eine getData(data) definiert. Wird nun ein Skript angefordert, kann das Skript die getData()-Funktion aufrufen und als eigentlichen Parameter data übergeben. Die vom formellen Parameter empfangenen Daten können dann entsprechend verarbeitet werden.

<Skript>
        Funktion getData(Daten){
            konsole.log(Daten);
        }
        var Skript = Dokument.createElement('Skript');
        Skript-ID = "jsonp";
        script.src = "jsonp.js";
        Dokument.Body.AppendChild(Skript);
    </Skript>

Vorausgesetzt, das Front-End hat dem Back-End den Funktionsnamen mitgeteilt, kann das Back-End getData() aufrufen und die Informationen übergeben. In jsonp.html können Sie die folgende jsonp.js Datei anfordern.

getData({
    Name: 'Xiao Wang',
    Alter: 20
})

Das Ergebnis des Ausführens ist:

Wir erhalten ein Object Objekt, das die von uns übergebenen Daten enthält.
Also, wie sagen wir dem Server, dass er die Funktion getData() verwenden soll? Wenn wir immer getData(), ist unsere Entwicklung sehr starr und wir können keine anderen Funktionsnamen definieren. Tatsächlich können wir die Get-Anfrage verwenden, um dem Backend den Namen der von unserem Frontend über Parameter definierten Funktion mitzuteilen. Das Backend generiert dann dynamisch eine solche Skriptdatei und gibt sie an den Funktionsaufruf zurück.
Baidu verfügt über eine solche Schnittstelle. Schauen wir sie uns an.
Öffnen Sie die Baidu-Seite im Browser, öffnen Sie das Debugging-Tool und schauen Sie unter NETwork nach, um alle vom Browser an den Server gesendeten HTTP-Anfragen zu überwachen und die Daten anzuzeigen.

Geben Sie „b“ in das Suchfeld ein und die Abfrage sieht wie folgt aus:

Die gesuchten Schlüsselwörter sind:

Die callback ist hier tatsächlich eine globale Funktion, die von jQuery generiert wird. Nachdem wir diese URL erhalten haben, können wir ihre nützlichen Informationen speichern und die Rückruffunktion durch eine andere Funktion ersetzen:

https://www.baidu.com/sugrec?pre=1&wd=b&req=2&csor=1&cb=getData();

Testen Sie es, indem Sie Folgendes in die Adressleiste eingeben:

Es kann festgestellt werden, dass diese Rückruffunktion die von uns festgelegte ist.

3. Simulieren Sie die Baidu-Suche

Wir können diese Schnittstelle jetzt verwenden, um JSON zu generieren und die Baidu-Suchseite zu simulieren.
Wir definieren eine globale Variable als Funktion zum Empfangen von Daten. Daten sind die empfangenen Daten. Sobald getdata() aufgerufen wird, bedeutet dies, dass unsere JSONP-Funktion gesendet wurde. Zu diesem Zeitpunkt können wir das Skript-Tag über removeChild() löschen, sodass jedes Mal, wenn wir eine Anforderung senden, script Tag nach dem Empfang der Daten gelöscht wird. Bei der Verarbeitung der Daten gibt getData（） uns ein Objekt mit dem Schlüsselwort g zurück, das einem Array mit Zeichenfolgen entspricht. Wir durchlaufen zuerst dieses Array, generieren dann entsprechend jedem Element ein li und fügen es der ul unter der Eingabe hinzu. Zuerst löschen wir das HTML in der ul. Auf diese Weise ist jedes angeforderte li brandneu. Wenn keyup herauskommt, holen wir zuerst den aktuellen input ab und rufen getdata() auf, übergeben wd und der JSONP-Datenübertragungsprozess wird realisiert.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        div {
            Position: relativ;
            Breite: 600px;
            Höhe: 40px;
        }
        Eingabe {
            Breite: 500px;
            Höhe: 40px;
            Rand: 2px durchgezogen #4E6EF2;
        }
        Taste{
            Position: absolut;
            links: 411px;
            oben: 0;
            Breite: 95px;
            Höhe: 44px;
            Hintergrundfarbe: #4E6EF2;
            Rand: keiner;
            Schriftgröße: 18px;
            Farbe: weiß;
        }
        ul{
            Position: relativ;
            links: -40px;
            oben: -10px;
            Breite: 411px;
            Höhe: 400px;
            
        }
        li{
            Höhe: 40px;
            Breite: 411px;
            Zeilenhöhe: 40px;
            Schriftgröße: 16px;
            Listenstil: keiner;

        }
    </Stil>
</Kopf>
<Text>
   <div>
    <Eingabetyp="Text" Wert =''>
    <button>Auf Baidu suchen</button>
   </div>
    <ul></ul>
    <script src="jquery.js"></script>
    <Skript>
     //
        Funktion getData(Daten){
            var Skript = document.querySelector('#jsonp');
            script.parentNode.removeChild(Skript);
            $('ul').html('');
            für(var i =0;i<data.g.length;i++){
                $('<li>'+data.g[i].q +'</li>').appendTo('ul');
            }
        }
        //Skriptfunktion getList(wd) dynamisch generieren{
            var Skript = Dokument.createElement('Skript');
            Skript-ID = "jsonp";
            script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&req=2&csor=1&cb=getData&wd='+wd;
           
            Dokument.Body.AppendChild(Skript);
        }
  //var ipt = document.querySelector('Eingabe');
        ipt.addEventListener('keyup',Funktion(){
            var wd = dieser.Wert;
            Liste abrufen(wd);
            konsole.log(wd);
        })
    </Skript>
</body>
</html>

Der Effekt ist:

Nachteile von JSONP

JSONP erfreut sich bei Entwicklern großer Beliebtheit, da es sehr einfach und leicht zu verwenden ist. Allerdings hat es auch zwei Nachteile:

• Erstens geht es JSONP darum, ausführbaren Code aus einer anderen Domäne zu laden. Wenn die andere Domäne nicht sicher ist, ist es wahrscheinlich, dass die Antwort Schadcode enthält. Derzeit gibt es keine Möglichkeit, dies zu untersuchen, außer den JSONP-Aufruf vollständig abzubrechen.
• 其次，要確定JSONP請求是否失敗并不容易。雖然HTML5給, wird dieser bislang noch von keinem Browser unterstützt. Dazu müssen Entwickler einen Timer verwenden, der erkennt, ob innerhalb einer bestimmten Zeit eine Antwort eingeht. Aber schließlich verfügt nicht jeder Nutzer über die gleiche Internetgeschwindigkeit und Bandbreite, sodass die Bedienung unbefriedigend ist.

Dies ist das Ende dieses Artikels über die JSONP-domänenübergreifende Simulation der Baidu-Suche. Weitere relevante Inhalte zur JSONP-domänenübergreifenden Simulation der Baidu-Suche finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!