Ik heb al lang geen essay meer geschreven, en ik heb altijd het gevoel dat ik geen tijd heb, maar in werkelijkheid is tijd... Genoeg onzin, een paar dagen geleden was er een nieuwe eis op het werk, waarbij de front-end webpagina de backend Webservice-methode asynchroon moest aanroepen om informatie terug te geven. Er zijn veel manieren om het te implementeren, dit voorbeeld gebruikt jQuery+Ajax, na voltooiing is alles lokaal in orde om te debuggen, maar er is een probleem na het uitrollen naar de server en de achtergrondservicecall reageert niet, wat is er dan aan de hand? De code is niet veel veranderd, het enige wat veranderd is is het URL-adres in jQuery's ajax-methode. Zou het probleem hier kunnen zijn dat na controleren en debuggen blijkt dat het homologe beleid fout is; we weten dat Javascrip{filtering}t of jQuery een dynamische scriptingtechniek is die vaak wordt gebruikt in webfront-end ontwikkeling. In Javascrip{filtering}t is er een belangrijke beveiligingsbeperking die bekendstaat als het "Same-Origin Policy". Dit beleid legt een belangrijke beperking op aan de inhoud van de pagina die Javascrip{filter}t-code kan benaderen, namelijk Javascrip{filtering}t kan alleen inhoud onder dezelfde domeinnaam als het document of script dat het bevat, benaderen. Scripts onder verschillende domeinen kunnen elkaar niet benaderen, zelfs geen subdomeinen. Wat betreft de homologe strategie kunnen lezers deze in meer detail uitleggen op Baidu, wat hier niet herhaald zal worden.
Maar soms is het onvermijdelijk om cross-domain operaties uit te voeren, en het "homologe beleid" is een beperking, wat moeten we dan doen? Laten we eens kijken hoe JSONP cross-domain wordt geïmplementeerd en het principe van JSONP cross-domain bespreken.
JSONP wordt hier genoemd, en dan vroeg iemand wat het verschil is en wat het verschil is tussen het en JSON, laten we eens kijken, de Baidu Encyclopedia heeft de volgende uitleg:
JSON (Javascrip{filtering}t Object Notation) is een lichtgewicht gegevensuitwisselingsformaat. Het is gebaseerd op een subset van Javascrip{filter}t (Standard ECMA-262 3e editie - december 1999). JSON gebruikt een volledig taalonafhankelijk tekstformaat, maar gebruikt ook gewoonten vergelijkbaar met de C-familie (waaronder C, C++, C#, Java, Javascrip, Perl, Python, enzovoort). Deze functies maken JSON tot een ideale taal voor gegevensuitwisseling. Gemakkelijk te lezen en te schrijven door mensen, maar ook makkelijk te parsen en genereren door machines (snelle netwerktransmissie).
JSONP (JSON met opvulling) is een "gebruikspatroon" van JSON, dat kan worden gebruikt om het probleem van domeinoverschrijdende data-toegang in reguliere browsers op te lossen. Vanwege het gelijke-oorsprongsbeleid kunnen pagina's die doorgaans op server1.example.com staan niet communiceren met servers die niet server1.example.com zijn, met uitzondering van het element <scrip{filter}t> van HTML. Met deze open strategie van het element <scrip{filter}t> kunnen webpagina's dynamisch JSON-data genereren uit andere bronnen, en dit gebruikspatroon staat bekend als JSONP. De gegevens die met JSONP worden vastgelegd zijn geen JSON, maar willekeurige Javascrip{filter}t, die wordt uitgevoerd met de Javascrip{filter}t-vertaler in plaats van geparseerd door de JSON-parser.
Op dit punt moet worden begrepen dat JSON een lichtgewicht data-uitwisselingsformaat is, net als xml, dat wordt gebruikt om data tussen data te beschrijven. JSONP is een manier om JSON-data te gebruiken, en in plaats van een JSON-object terug te geven, is het een javascrip{filtering}t-script dat een JSON-object bevat.
Hoe werkt JSONP dan? We weten dat XmlHttpRequest vanwege de beperkingen van het same-origin-beleid alleen verzoeken naar bronnen van de huidige bron (domeinnaam, protocol, poort) toestaat. Cross-domain verzoeken zijn om veiligheidsredenen niet mogelijk, maar we ontdekten dat wanneer js-bestanden op webpagina's worden aangeroepen, ze niet worden beïnvloed door cross-domain of niet, en tags met het attribuut "src" cross-domain mogelijkheden hebben, zoals <scrip{filter}t>, <img>, ,<iframe>Als je een cross-domain verzoek wilt doen, doe dan een cross-domain request door de scrip{filter}t-tag van html te gebruiken en geef de scrip{filtering}t-code terug die in de response wordt uitgevoerd, waarbij je direct JSON kunt gebruiken om het javascrip{filter}t-object door te geven. Dat wil zeggen, het genereren van JSON-gegevens op de cross-domain server en deze vervolgens terugverpakken in een scrip{filtering}t-script, wat de beperkingen van het same-origin beleid doorbreekt en het probleem van cross-domain toegang oplost.
Laten we eens kijken hoe je dit kunt bereiken:
Front-end code:
|
Geplaatst op 28-12-2015 14:22:00
|
|
|
