Ajax без jQuery

2 хв. читання

Я, як і більшість, познайомився з jQuery задовго до того, як vanilla JavaScript. Я був впевнений, що базових знань jQuery буде достатньо для веб- дизайну. Але з часом я зрозумів важливість звичайного JavaScript.

Коли я до цього прийшов, я повністю перемкнувся на no-jQuery, щоб краще пізнати мову.

Перебуваючи на no-jQuery дієті, одного дня я стикнувся з проблемою - мені потрібно було використати AJAX. Мені потрібно було отримувати дані з API і відображати їх на сайті. Це було складністю, так як я, цього разу, не міг просто скористатись $.getJSON. Мені було потрібно знайти інший спосіб. Тож я стис зуби, проковтнув гордість і зробив те, що свого часу робить кожен розробник - почав гуглити.

Перше, що привернуло мою увагу, це група абревіатур: CORS, JSON і JSONP. Я знав про JSON, а ось дві інші назви були для мене невідомі. Як виявилось пізніше - це були два гарних інструменти, які варті опису.

JSONP

JSONP (JSON with pading) використовується, коли потрібно отримати JSON-дані з зовнішнього домену. Це корисно, коли використання звичайного JSON неможливе через загрозу безпеки. Детальніше про JSONP. Як виявилося, JSONP - це не спеціальна версія JSON, як я спочатку думав. Замість цього, JSONP - це спосіб використовувати cross-domain JSON-дані, не турбуючись, якщо браузер заважає вам вчинити так само. Перевага JSONP в тому, що браузери не реалізують політику єдності походження тегів скриптів.

Щоб використовувати його, ми повинні створити тег сценарію, який має функцію зворотного виклику, який додано в кінець вихідного атрибута. Потім ми використовуємо цю функцію для того, щоб маніпулювати даними JSON. Весь процес відносно простий, і вимагає лише кількох рядків коду JavaScript. Погляньте на демо нижче.

CORS

CORS, або Cross-Origin Resource Sharing, є ще одним методом, що забезпечує крос-доменність JSON. Подробиці на enable-cors.org.

CORS використовує стандартний механізм, який може бути ініційований у всіх браузерах для реалізації крос-доменних запитів. Ця специфікація визначає набір заголовків, які дозволяють браузеру і серверу спілкуватися з приводу запитів (які дозволені, а які - ні). CORS - це open web, API доступне для всіх.

Простіше кажучи, якщо сервер підтримує CORS, вам не доведеться турбуватися про політику єдності, ви можете зробити стандартний JSON запит. Ось демо, де виконується запит на Github API, який підтримує CORS. Якщо все відбудеться правильно, ви повинні побачити URL, який вказує на Github. Зверніть увагу, що цей код також вільний від jQuery.

Звичайно, не всі браузери діють однаково, що означає, що відправка CORS запитів може займати різну кількість коду.

Сподіваюся, короткий огляд дав вам деяке розуміння можливостей звичайного JavaScript, якщо ви пришли з jQuery.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація