Dlho som nepísal esej a vždy mám pocit, že nemám čas, ale v skutočnosti čas je... Dosť nezmyslov, pred pár dňami sa objavila nová požiadavka, ktorá vyžadovala, aby front-end webová stránka volala backendovú webovú službu asynchrónne, aby vrátila informácie. Existuje mnoho spôsobov, ako to implementovať, tento príklad používa jQuery+Ajax, po dokončení je všetko v poriadku ladiť lokálne, ale po nasadení na server je problém a pozadie servisného volania nie je responzívne, čo sa deje? Kód sa veľmi nezmenil, jediná vec, ktorá sa zmenila, je URL adresa v metóde ajax v jQuery. Môže byť problém v tom, že po kontrole a ladení sa ukáže, že chybná je homologická politika? Vieme, že Javascrip{filtering}t alebo jQuery je dynamická skriptovacia technika často používaná vo webovom front-end vývoji. V Javascrip{filtering}t existuje dôležité bezpečnostné obmedzenie známe ako "Politika rovnakého pôvodu". Táto politika ukladá dôležité obmedzenie na obsah stránky, ku ktorému má prístup kód Javascrip{filter}t, t. j. Javascrip{filtering}t môže pristupovať k obsahu iba pod rovnakým doménovým menom ako dokument alebo skript, ktorý ho obsahuje. Skripty pod rôznymi doménami sa nemôžu navzájom pristupovať, dokonca ani k subdoménam. Čo sa týka homologickej stratégie, čitatelia ju môžu podrobnejšie vysvetliť na Baidu, čo tu nebude zopakovať.
Ale niekedy je nevyhnutné vykonávať operácie naprieč doménami a "homologická politika" je obmedzením, čo by sme mali robiť? Pozrime sa, ako je implementovaný JSONP cross-domain a diskutujme o princípe JSONP cross-domain.
JSONP sa tu spomína, potom sa niekto spýtal, aký je rozdiel a rozdiel medzi ním a JSON? Pozrime sa na to, Baidu Encyclopedia má nasledovné vysvetlenie:
JSON (Javascrip{filtering}t Object Notation) je ľahký formát na výmenu dát. Je založený na podmnožine Javascrip{filter}t (Standard ECMA-262 3. vydanie - december 1999). JSON používa úplne jazykovo nezávislý textový formát, ale tiež používa návyky podobné rodine C (vrátane C, C++, C#, Java, Javascrip, Perl, Python a pod.). Tieto vlastnosti robia z JSON ideálny jazyk na výmenu dát. Ľahko čitateľné a zapisovateľné pre ľudí, ale tiež jednoduché na spracovanie a generovanie strojom (rýchly prenos cez sieť).
JSONP (JSON s paddingom) je "vzor používania" JSON, ktorý sa dá použiť na riešenie problému prístupu k dátam naprieč doménami v bežných prehliadačoch. Kvôli politike rovnakého pôvodu stránky na server1.example.com zvyčajne nemôžu komunikovať so servermi, ktoré nie sú server1.example.com, s výnimkou prvku <scrip{filter}t> v HTML. Použitím tejto otvorenej stratégie prvku <scrip{filter}t> môžu webové stránky dynamicky generovať JSON dáta z iných zdrojov a tento spôsob používania je známy ako JSONP. Dáta zachytené pomocou JSONP nie sú JSON, ale ľubovoľné Javascrip{filter}t, ktoré sa vykonávajú pomocou prekladača Javascrip{filter}t namiesto parsovania v JSON parseri.
V tomto bode je potrebné pochopiť, že JSON je ľahký formát na výmenu dát, podobne ako xml, ktorý sa používa na opis údajov medzi dátami. JSONP je spôsob, ako využiť JSON dáta, a namiesto vrátenia JSON objektu je to javascrip{filtering}t skript, ktorý obsahuje JSON objekt.
Ako teda JSONP funguje? Vieme, že vzhľadom na obmedzenia politiky rovnakého pôvodu XmlHttpRequest povoľuje požiadavky na zdroje len z aktuálneho zdroja (doménové meno, protokol, port). Požiadavky medzi doménami nie sú z bezpečnostných dôvodov možné, ale zistili sme, že keď sú súbory js volané na webových stránkach, nie sú ovplyvnené cross-domain alebo nie, a tagy s atribútom "src" majú schopnosti cross-domain, ako napríklad <scrip{filter}t>, <img>, ,<iframe>Ak chcete vykonať požiadavku naprieč doménami, vytvorte požiadavku cez domény pomocou tagu scrip{filter}t v HTML a vráťte kód scrip{filtering}t, ktorý sa vykoná v odpovedi, pričom môžete priamo použiť JSON na odoslanie objektu javascrip{filter}t. To znamená, že generujete JSON dáta na serveri medzi doménami a potom ich zabalíte späť do skriptu scrip{filtering}t, ktorý prelamuje obmedzenia politiky rovnakého pôvodu a rieši problém prístupu medzi doménami.
Pozrime sa, ako to dosiahnuť:
Front-end kód:
|
Zverejnené 28. 12. 2015 14:22:00
|
|
|
