Cannot create an XMLHTTP instance); return false; } Мы создали все необходимое, проверили на ошибки, можно переходить непосредственно к действиям. Сейчас я напишу пример кода, который отправляет асинхронный пост запрос, и после этого объясню действие каждой функции. http" /> Cannot create an XMLHTTP instance); return false; } Мы создали все необходимое, проверили на ошибки, можно переходить непосредственно к действиям. Сейчас я напишу пример кода, который отправляет асинхронный пост запрос, и после этого объясню действие каждой функции. http" />
Главная / Мой вордпресс / AJAX это просто. Часть 2

AJAX это просто. Часть 2

ajaxВот и наступило время для продолжения статьи по AJAX. В прошлой статье мы разобрались что же такое AJAX и научились создавать объект, отвечающий за отправку запросов. Сегодня мы научимся всем этим пользоваться, и разберем некоторые нюансы.

Как уже было сказано выше, в прошлой статье мы реализовали функцию с помощью которой создается необходимый нам объект. Теперь пришло время воспользоваться этой функцией по назначению.

 

 http_request = getXmlHttp();

 

Теперь в переменной http_request содержится наш объект. Теперь не плохо бы обработать ситуацию если все же произошла ошибка при создание (ещё не разу с таким не сталкивался, но лишним не будет).

if (!http_request) {
   alert(Giving up (" />  Cannot create an XMLHTTP instance);
   return false;
   }

Мы создали все необходимое, проверили на ошибки, можно переходить непосредственно к действиям.

Сейчас я напишу пример кода, который отправляет асинхронный пост запрос, и после этого объясню действие каждой функции.

http_request.onreadystatechange = alertContents;
http_request.open(POST, http://url.ru/, true);
http_request.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
 http_request.send(param1=value1&param2=value2);

Отлично, теперь на наш адрес, отправляется асинхронный пост запрос, с параметрами param1 = value1 и param2 = value2. Теперь разберем все по порядку.

http_request.onreadystatechange = alertContents; с помощью этого метода, мы указываем какой функцией будет обрабатываться результат нашего запроса. Т.е. всю возращенную информацию, мы должны принять и обработать в этой функции, но об этом позже. Хочу заметить, что эта функция создана для асинхронных запросов, и надобность в ней в синхронных запросах отпадает. Но некоторые все же используют её и для синхронных запросов, но хочу вас предостеречь, в некоторых браузерах, такой метод может не работать. Чуть позже я приведу отдельно пример того как обрабатываются синхронные и асинхронные запросы.

http_request.open(POST, http://url.ru/, true); этим методом мы указываем каким способом, на какой url и какой вид запроса мы должны отправить. Первый параметр может принимать в качестве значения POST или GET. Вторым параметром передается url на который будет отправлен запрос (в целях безопасности в AJAX не предусмотрено возможности отправки запросов на домен, отличный от домена с которого выполняется скрипт). Третий параметр принимает значения true или false. В свою очередь true -обозначает что запрос будет асинхронным, а false что запрос будет синхронным. Так же в этой функции существуют не обязательные параметры, userName и password, но их описание я решил опустить, в виду их ненадобности.

http_request.setRequestHeader(Content-Type, application/x-www-form-urlencoded); с помощью данного метода мы устанавливаем заголовок для нашего запроса. В данном случае заголовок предназначен, для правильной кодировки при отправке POST запроса. Но не кто не мешает отправлять и любые другие заголовки, причем в любом количестве.

http_request.send(param1=value1&param2=value2); этим методом наш запрос отправляется по заданному url с определенными параметрами, в данном случае param1, param2. Параметры для POST запроса передаются по тому же принципу что и для GET.

Мы научились отправлять запросы на сервер, теперь попробуем их обработать. Но сначала посмотрим чем же отличаются асинхронные и синхронные запросы.

Пример обработки синхронного запроса:

 

if (http_request.status == 200) { 
    alert(Ответ получен);
  } else {
  alert(There was a problem with the request.);
   }

 

Пример обработки асинхронного запроса:

 

function alertContents() {
  if (http_request.readyState == 4) {
  if (http_request.status == 200) {
  alert(Ответ получен);
  } else {
  alert(There was a problem with the request.);
   }
  }
  }

 

Как видно из примера отличия состоят в том, что асинхронный запрос обернут в функцию, которая выполниться при получение данных с сервера, на который был послан запрос. Это сделано с той целю, чтобы запрос был асинхронным. Т.е. она будет выполняться независимо от остального JavaScript на вашей странице. Так же отличие состоит в методе http_request.readyState, его я опишу чуть позже, но сразу скажу, что для обработки синхронных запросов он не нужен.

А теперь перейдем к описанию методов используемых в этом примере.

http_request.readyState Возвращает текущее состояние объекта. Передает следующие значения: 0 — не инициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены. Нам интересен только статус 4.

http_request.status возвращает HTTP статус в виде числа, к примеру 200 = OK, 404 = Not found. Так же есть возможность обрабатывать статус сразу в виде текста, для этого используется метод statusText. В данном случае нас интересует статус 200.

Ещё существуют такие методы как responseText, responseXML которые возвращают текст ответа, в виде простого текста или в формате XML который позже можно обработать посредством DOM.

Ну вот пожалуй и все. Основные моменты рассказаны, а нюансы учтены. Если что-то осталось не понятным то не пугайтесь, в следующей статье я рассмотрю полностью рабочий пример с использованием AJAX и конечно же выложу его реализацию. А на сегодня все. Счастливо всем.

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*