Въведение в AJAX

AJAX е страхотна технология, която ви позволява да направите уебсайтовете напълно интерактивни и оживени:) четете нататък

Въведение в ajax

В нашия свят на нови информационни технологии от време на време се появяват всякакви езици за езотерично програмиране, услуги, формати, но ajax в никакъв случай не е нечия прищявка, а мощен подход за създаване на интерактивни сайтове. Повярвайте ми, ajax е по-лесен за учене, отколкото нов език за програмиране. В тази статия ще получим основните понятия и ще разгледаме прости примери.

Защо ви трябва ajax

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

Да влезем под капака

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

Ако вече сте запознати с тези технологии, чудесно. Ако не, това е добре. На нашия сайт ще намерите много интересни статии, които ще ви помогнат при изучаването на тези технологии.

Алгоритъм от действия за създаване на заявка ajax

Преди да преминем към примера, нека разгледаме алгоритъма от действия, които трябва да бъдат изпълнени, за да се изпълни заявка ajax:

  1. инстанциране на обект XmlHttpRequest;
  2. изпращане на заявка по методите open и send;
  3. приемане и обработка на потребителски данни от сървъра, отговор на сървъра;
  4. обработка на отговора на сървъра, например, с помощта на метода onreadystatechange.

Инстанциране на обект XmlHttpRequest

Тук нищо не е трудно. Нека създадем обикновен обект:

Изпращане на заявка по методите open и send

Методът open () има следния формат: отворен (тип_заявка, url, метод), Където тип_заявка ВЗЕМЕТЕ или ПОСТ, URL адрес - път към искания файл, начин - синхронен (фалшив) или асинхронен (фалшив) метод на изпълнение.

Методът за изпращане има формат: изпрати ('информация') - трансфери информация към сървъра.

Нека създадем екземпляр на обекта XmlHttpRequest и го използваме за асинхронно прехвърляне на файла my.txt на сървъра.

За POST заявка всичко ще бъде същото. Само в метода open () трябва да замените първия аргумент "GET" с "POST".

Нека напишем прост пример за внедряване на калкулатор, който може да умножава числа:

В този пример остава само да се създаде файл с име "get_result.php", в който трябва да обработите заявката GET: извлечете 2 числа от низа, умножете ги и ги покажете. Тук няма нищо трудно, така че няма да спрем.

Състояния, готови за сървър

В предишните примери вече използвахме свойството readyState. Нека се спрем на него по-подробно. Това свойство ви позволява да разберете състоянието на сървъра. Има пет състояния на сървъра:

  1. няма заявка;
  2. установена е връзка със сървъра;
  3. получена заявка;
  4. заявката се обработва;
  5. заявката е обработена и отговорът е генериран.

Процесът на обработка на заявките превключва състоянието на сървъра последователно от 0 на 4. И затова използвахме следния код по-горе (проверка на състоянието за равенство на четири, т.е. за готовност):

Използване на имота статус можете да разберете кода за отговор на изпратената заявка. Например код 200 означава успешна обработка, а 404 означава, че няма страница. В горния пример изпълняваме кода само ако сървърът е обработил успешно заявката.

Събитие onreadystatechange се изпълнява всеки път, когато свойството се промени readyState на сървъра. Тоест, при успешна обработка на заявка, събитие onreadystatechange ще се изпълни 4 пъти.

Получаване на отговор на сървъра

Ако резултатът е обработен правилно в свойства responseText (като низ от символи) и отговорXML (под формата на XML файл) обектът XMLHttpRequest ще запише отговора на сървъра. В примерите по-горе получихме резултата от свойството responseText:

Това е всичко, научихме какво е ajax, научихме защо е необходима тази технология и дадохме прости илюстративни примери.