JS Ajax

Объект XMLHttpRequest

Для создания приложений, использующих Ajax, применяются различные способы. Но самым распространенным способом является использование объекта XMLHttpRequest: var request = new XMLHttpRequest(); После создания объекта XMLHttpRequest можно отправлять запросы к серверу. Но для начала надо вызвать метод open() для инициализации: request.open("GET", "http://localhost/hello.txt", false); Метод open() принимает три параметра: тип запроса (GET, POST, HEAD, PUT), адрес запроса и третий необязательный параметр - логическое значение true или false, указывающее, будет ли запрос осуществляться в асинхронном режиме. То есть в данном случае запрос будет иметь тип GET, он будет направляться по адресу "http://localhost/hello.txt в синхронном режиме, так как стоит значение false (для асинхронного режима указывается значение true).

Синхронный и асинхронный режим отличаются тем, что запрос в синхронном режиме пока запрос не выполнится, остальной код javascript не может выполняться. По умолчанию, если третий параметр не используется, то запрос отправляется в асинхронном режиме, что позволяет параллельно с выполнением запроса выполнять также и другой код javascript. И в большинстве случаев, как правило, используется именно асинхронный режим.

Кроме того, метод open() может принимать еще два параметра: логин и пароль пользователя, если для выполнения запроса нужна аутентификация.

request.open("GET", "http://localhost/home.php", true, "login", "password"); После инициализации запроса методом open() необходимо отправить запрос с помощью метода send(): request.send();

Свойства XMLHttpRequest

Объект XMLHttpRequest имеет ряд свойств, которые позволяют проконтролировать выполнение запроса:

status: содержит статусный код ответа HTTP, который пришел от сервера. С помощью статусного кода можно судить об успешности запроса или об ошибках, которые могли бы возникнуть при его выполнении. Например, статусный код 200 указывает на то, что запрос прошел успешно. Код 403 говорит о необходимости авторизации для выполнения запроса, а код 404 сообщает, что ресурс не найден и так далее.
statusText: возвращает текст статуса ответа, например, "200 OK"
responseType: возвращает тип ответа. Есть следующие типы:

""

"arraybuffer"

"blob"

"document"

"json"

"text"

response: возвращает ответ сервера
responseText: возвращает текст ответа сервера
responseXML: возвращает xml, если ответ от сервера в формате xml
Например, выполним запрос к текстовому файлу, который находится на локальном веб-сервере. Для выполнения ajax-запросов потребуется запущенный локальный веб-сервер, на котором будет лежать файл hello.txt, в котором будет содержаться одна строка: "Привет мир".
Код веб-страницы (пусть она называется test.html) будет следующим:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="output"></div>
<script>
var request = new XMLHttpRequest();
request.open("GET", "http://localhost:8080/hello.txt", false);
request.send();
var status = request.status;
if(status==200)
document.write("Текст ответа: " + request.responseText)
else if(status==404)
document.write("Ресурс не найден")
else
document.write(request.statusText)
</script>
</body>
</html>

И после загрузки страницы выполнится ajax-запрос к ресурсу http://localhost:8080/hello.txt. Но важно отметить, что получение статуса сразу после вызова метода request.send() будет работать только для синхронного запроса.

Асинхронные запросы

Хотя синхронные запросы вполне работают и их можно использовать, но в то же время их рекомендуется избегать. Поскольку нередко запрос может занять продолжительное время, то это может заблокировать выполнение остального кода и работу с html-страницей до окончания выполнения запроса. Поэтому рекомендуется использовать преимущественно асинхронные запросы.

Работа с асинхронными запросами чуть более сложна, чем с синхронными, поскольку нам надо еще обработать событие readystatechange объекта XMLHttpRequest.

При асинхронном запросе объект XMLHttpRequest использует свойство readyState для хранения состояния запроса. Состояние запроса представляет собой число:

0: объект XMLHttpRequest создан, но метод open() еще не был вызван для инициализации объекта

1: метод open() был вызван, но запрос еще не был отправлен методом send()
2: запрос был отправлен, заголовки и статус ответа получены и готовы к использованию
3: ответ получен от сервера
4: выполнение запроса полностью завершено (даже если получен код ошибки, например, 404)

Событие readystatechange возникает каждый раз, когда изменяется значение свойства readyState. Например, выполним асинхронный запрос:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="output"></div>
<script>
var request = new XMLHttpRequest();

function reqReadyStateChange() {
if (request.readyState == 4) {
var status = request.status;
if (status == 200) {
document.write(request.responseText);
} else {
document.write("Ответ сервера " + request.statusText);
}
}
}

request.open("GET", "http://localhost:8080/hello.txt");
request.onreadystatechange = reqReadyStateChange;
request.send();
</script>
</body>
</html>

Кроме обработки события readystatechange для получения ответа сервера можно также обрабатывать событие load, которое возникает после выполнения запроса. Его использование аналогично:

var request = new XMLHttpRequest();

function responceLoad() {
if (request.readyState == 4) {
var status = request.status;
if (status == 200) {
document.write(request.responseText);
} else {
document.write("Ответ сервера " + request.statusText);
}
}
}

request.open("GET", "http://localhost:8080/hello.txt");
request.onload = responceLoad;
request.send();

Output