JavaScript - Синхронна AJAX заявка (XMLHttpRequest), ИТ шеф

Урок, в който с помощта на прости примери ще анализираме как да работим с технологията AJAX, а именно ще се запознаем с това как да използваме обекта XMLHttpRequest (съкратено XHR) за създаване на синхронни HTTP заявки към сървъра и получаване на отговори от него.

Основи на AJAX

Нека започнем нашето запознаване с технологията AJAX, като разгледаме пример (за начинаещи), който ще поиска информация от сървъра чрез синхронна заявка.

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

  1. Получаване на някаква информация (данни) от страница или формуляр (ако е необходимо)
  2. Изпращане на заявка до уеб сървър
  3. Получаване на отговор от уеб сървъра
  4. Показване на резултати на страницата, ако отговорът е бил успешен.
Основите на извършване на синхронни AJAX заявки

Пример 1. Извършване на синхронна AJAX заявка

Нека разгледаме пример за извършване на синхронна AJAX заявка към сървъра с помощта на метода XMLHttpRequest. В този пример искаме данните, намиращи се във файла data.txt на сървъра, и ги показваме на страницата в елемента span .

Примерът ще се състои от файлове index.html, script.js и data.txt, които за простота могат да бъдат разположени на сървъра в същата директория.

Нека започнем разработката, като създадем HTML страница, към която ще включим файла script.js. Този файл или по-точно съдържанието му ще свърши цялата основна работа. Но преди да преминем към разработването му, нека създадем елементи на div и span на страницата. Елементът div ще действа като бутон, който при щракване ще изпълни AJAX заявка. И елементът span ще действа като контейнер, който ще съдържа отговора, получен от сървъра.

Освен това ще добавим още CSS стилове към страницата, за да я оформим малко. В резултат на това трябва да имаме следния HTML код:

След това отворете файла data.txt и въведете текста "Hello world!" Запазете и затворете файла.