Я давно не писав есе, і завжди відчуваю, що часу немає, але насправді час... Досить нісенітниць, кілька днів тому з'явилася нова вимога, яка вимагала від фронтенд-веб-сторінки викликати бекенд-вебсервіс асинхронно для повернення інформації. Є багато способів реалізації, у цьому прикладі використовується jQuery+Ajax, після завершення все можна налагоджувати локально, але після розгортання на сервер виникає проблема, і фоновий сервісний виклик не відповідає — що відбувається? Код майже не змінився, єдине, що змінилося — це URL-адреса в ajax-методі jQuery. Можливо, проблема тут у тому, що після перевірки та налагодження виявляється, що проблема в гомологічній політиці — ми знаємо, що Javascrip{filtering}t або jQuery — це динамічна техніка скриптингу, яку часто використовують у веб-фронтенд-розробці. У Javascrip{filtering}t існує важливе обмеження безпеки, відоме як «Політика того ж походження». Ця політика накладає важливе обмеження на вміст сторінки, до якого може отримати доступ код Javascrip{filter}t, тобто Javascrip{filtering}t може отримувати доступ лише до контенту під тим самим доменним ім'ям, що й документ або скрипт, що його містить. Скрипти під різними доменами не можуть мати доступ один до одного, навіть до піддоменів. Щодо гомологічної стратегії, читачі можуть детальніше пояснити її на Baidu, що тут не буде повторюватися.
Але іноді неминуче проводити міждоменні операції, і «гомологічна політика» є обмеженням, що нам робити? Давайте розглянемо, як реалізовано міждоменне управління JSONP, і обговоримо принцип міждоменної роботи JSONP.
Тут згадується JSONP, потім хтось запитав, у чому різниця між ним і JSON, давайте подивимось, Baidu Encyclopedia має таке пояснення:
JSON (Javascrip{filtering}t Object Notation) — це легкий формат обміну даними. Він базується на підмножині Javascrip{filter}t (Стандарт ECMA-262, 3-тє видання – грудень 1999). JSON використовує повністю незалежний від мови текстовий формат, але також використовує звички, подібні до сімейства C (включаючи C, C++, C#, Java, Javascrip, Perl, Python тощо). Ці особливості роблять JSON ідеальною мовою для обміну даними. Легко читати і писати людиною, але також легко аналізувати і генерувати машиною (швидка мережева передача).
JSONP (JSON з заповненням) — це «патерн використання» JSON, який може бути використаний для вирішення проблеми міждоменного доступу до даних у масових браузерах. Через політику однакового походження сторінки, зазвичай розташовані на server1.example.com, не можуть спілкуватися з серверами, які не є server1.example.com, за винятком елемента <scrip{filter}t> у HTML. Використовуючи цю відкриту стратегію елемента <scrip{filter}t>, веб-сторінки можуть динамічно отримувати JSON-дані з інших джерел, і цей шаблон використання відомий як JSONP. Дані, захоплені JSONP, не є JSON, а довільним Javascrip{filter}t, який виконується за допомогою транслятора Javascrip{filter}t замість того, щоб розбиратися парсером JSON.
На цьому етапі слід розуміти, що JSON — це легкий формат обміну даними, подібний до xml, який використовується для опису даних між даними. JSONP — це спосіб використання даних JSON, і замість повернення JSON-об'єкта це JavaScript{filtering}t, який містить JSON-об'єкт.
Отже, як працює JSONP? Ми знаємо, що через обмеження політики одного джерела XmlHttpRequest дозволяє запити на ресурси лише з поточного джерела (доменне ім'я, протокол, порт). Кросдоменні запити неможливі з міркувань безпеки, але ми виявили, що коли js-файли викликаються на веб-сторінках, вони не підпадають під вплив крос-домену чи ні, а теги з атрибутом "src" мають крос-доменні можливості, такі як <scrip{filter}t>, <img>, ,<iframe>Якщо ви хочете зробити крос-доменний запит, зробіть крос-доменний запит, використовуючи тег scrip{filter}t у html, і поверніть код scrip{filtering}t, який буде виконаний у відповіді, у якому ви можете безпосередньо використовувати JSON для передачі об'єкта javascrip{filter}t. Тобто генерація JSON-даних на крос-доменному сервері, а потім обгортання їх у скрипт scrip{filtering}t, що долає обмеження політики того ж джерела і вирішує проблему міждоменного доступу.
Давайте розглянемо, як це досягти:
Код фронтенду:
|
Опубліковано 28.12.2015 14:22:00
|
|
|
