Познаването на Аякс

Нека да започнем! Моля, обърнете внимание: това се предполага, че вече знаете основните челни технологии като HTML и CSS.

Какво е AJAX?

клиент (браузър) комуникира със сървъра, и изисква неговите данни с помощта на AJAX. Полученият отговор се обработват, както и село изменена без пълното му рестартиране. Нека разгледаме акроним AJAX:

"Асинхронен" означава, че когато клиентът поиска данни от сървъра, браузърът не се замразява, докато не получи отговор. Потребителят може да се придвижвате в страниците на противното. След като сървърът връща отговор, отговорът на заден план започва да обработва съответните функции.

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

За да изпратите заявка за клиент сървър, използвайки XMLHttpRequest или XHR API. API (приложен програмен интерфейс) е набор от методи, които определят правилата за комуникация между двете засегнати страни. Въпреки това, идващи от данни за искане на AJAX може да бъде във всякакъв формат, а не само в XML.

Как AJAX

За да се разбере основния принцип на работа, нека да разгледаме снимката по-долу:

На снимката е описано от стандартната AJAX скрипт:

Потребителят иска да види всички записи, и той кликне върху бутон. Това събитие предизвиква AJAX повикване.

Искането се изпраща на сървъра. При поискване е възможно да се предават различни данни. Искането може да бъде изпратен до статичните изображения (например, example.php), се съхраняват на сървъра. Също така е възможно да се извърши динамични скриптове (functions.php), на всяка стъпка, която ще се свързали с база данни (или друга система) за извличане на необходимата информация.

Базата данни изпраща обратно исканата статията на сървъра. Сървърът изпраща към браузъра.

С оглед на това, ще разберете защо AJAX е толкова важно в днешния Интернет технологиите. Разработване на приложения за контрол на AJAX можем да контролираме големи обеми от данни, изтеглени от сървъра.

Жив пример за AJAX

AJAX сега навсякъде. За да ви убеди в това, ние накратко разгледаме няколко популярни сайтове, които използват тази технология.

Първо, помислете за принципите на Facebook и Twitter. Когато превъртите надолу в страницата AJAX зарежда новото съдържание. Също така, ако заложите Както или dizlayk въпроси и отговори на Stack Overflow, отново AJAX работи. След като се забие в лентата за търсене на нещо по Google или Youtube, предизвика множество искания AJAX.

Освен това, ако искаме да, ние ще бъдем в състояние да следи тези искания. Например, Chrome конзола това може да стане, като щракнете с десния бутон на мишката и активиране Вход XMLHttpRequests функция.

Как да създадете заявка

Ние вече заяви, че за да се създаде заявка използвате XMLHttpRequest API. В допълнение към JQuery, най-популярният JS библиотеката разполага с разнообразие от Аякс функции и методи. В поредица от статии ще разгледаме различни примери в чист JS и JQuery да изпрати искане до сървъра.

Заявка за управление

Издърпайте данните от сървъра могат да се съхраняват в различни формати. XML, JSON, JSONP, обикновен текст и HTML.

XML (Extensible Markup Language) - един от най-популярните формати за обмен на данни между приложения. Форматът е подобен на HTML, и като структура, използвани тагове. Въпреки това, XML не е завършен маркиране, което правим ги попитате. Пример структура по-долу:

Ограничения за искания AJAX

Преди да започнете да използвате AJAX, вие трябва да знаете за ограниченията. Ние считаме, че само две задачи.
Първият - грешка в конзолата Chrome:

Грешката се появява, когато заявката се отнася до локално файл. В този пример, ние искаме за достъп до данните от локалната файлова (Demo.json), която не се съхранява на сървъра. За да разрешите този проблем, можете да инсталирате на локален сървър и съхраняване на файловете там. Вторият проблем:

Грешката се появява, когато данните от заявката се съхраняват на друг домейн по отношение на нашата страница (бъг, известна като политика на един и същи произход). В нашия пример, данните се съхраняват на локален сървър, както и на страницата се съхраняват на сървъра Codepen. За щастие, елиминират тези грешки.

Един от начините е чрез CORS W3C. Но този механизъм изисква промени в конфигурационните файлове на сървъра. Например, как да се създаде Apache сървъра на тази страница. Друг начин е JSONP (JSON с пълнеж).

заключение

Този преглед ви е дал представа за това, AJAX, където ще трябва да се справят с него може, и какви са възможните проблеми. Ние също така преглед на най-популярните формати за обмен на данни. В следващата статия ще разгледаме работещ пример. Виж ти!

Редакция: Екип webformyself.

Най-IT новини и уеб разработки на нашия канал Телеграма