1. Was ist JSONP 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 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? <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({ Name: 'Xiao Wang', Alter: 20 }) Das Ergebnis des Ausführens ist: Wir erhalten ein Geben Sie „b“ in das Suchfeld ein und die Abfrage sieht wie folgt aus: Die gesuchten Schlüsselwörter sind: Die 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. 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 JSONPJSONP erfreut sich bei Entwicklern großer Beliebtheit, da es sehr einfach und leicht zu verwenden ist. Allerdings hat es auch zwei Nachteile:
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! Das könnte Sie auch interessieren:
|
>>: Einführung in die schnelle Docker-Bereitstellung eines SpringBoot-Projekts
HTML-Onfocus-Ereignisattribute Definition und Ver...
HTML ist eine Hybridsprache, die zum Veröffentlic...
Bei der Installation von FileZilla Server auf dem...
Vertikaler Tisch Vertikale Tabellenaufteilung bed...
Das WeChat-Applet Uniapp realisiert den Löscheffe...
Ich habe kürzlich in einem Projekt nginx und im B...
Wirkung Die Bilder im Code können selbst geändert...
Phänomen Bei der Verwendung von Apache Spark 2.x ...
Vorwort Der vom Blogger verwendete Server wurde v...
Inhaltsverzeichnis Beispiel Methode 1: Löschen Me...
In Webprojekten nutzen wir häufig die Zeitleisten...
Gehen Sie zunächst zum Herunterladen auf die offi...
Mininet Mininet ist eine leichtgewichtige, softwa...
.imgbox{ Breite: 1200px; Höhe: 612px; Rand rechts...
<br />Bedingte Kommentare sind eine einzigar...