Как послать GET-запрос, используя технологию AJAX..?

Как послать GET-запрос, используя технологию AJAX..?

Часто бывает нужно послать на сервер или принять какие либо данные на страницу. Но во многих случаях перезагрузка страницы нежелательна, так как может выглядеть некрасиво, занимать неоправданно много времени, или по другим причинам. Пример тому – голосование за инструкцию на этой странице, про которое тоже не стоит забывать… ;)
Я уже писал о том, как проверить, поддерживает ли браузер технологию AJAX. Теперь я напишу о том, как же послать AJAX-запрос медотом GET со страницы сайта.

Инструкция

Уровень сложности: Непросто

Что вам понадобится:

  • Текстовой редактор.
  • Ваша страница

1 шаг

Откройте Вашу страницу в любом текстовом или HTML редакторе. Я использую Rapid PHP 2008.

2 шаг

Найдите в своём коде место, где хотите послать запрос.

3 шаг

Создайте переменную запроса. Не забудьте проверить, поддерживает ли браузер AJAX.


var xmlHttp;
try
{
xmlHttp=new XMLHttpRequest();
}
// Проверяем, поддерживает ли браузер AJAX здесь…

4 шаг

Поскольку в данном случае мы используем метод GET то данные (параметры) будут передаваться через “адресную строку”. Создайте переменную, которая будет держать эти параметры.

var paramString = “?name=John&surname=Smith”

Вы можете передать любое количество параметров. В данном случае, мы передаём 2 параметра – name и surname.
Так же создайте переменную, в которой будет находиться адрес скрипта, обрабатывающего запрос.

var script = “myscript.php” // Это может быть любой серверный скрипт.

5 шаг

Укажите, что должно произойти, когда сервер вернёт ответ на запрос.

xmlHttp.onreadystatechange=function() // Когда состояние запроса меняется…
{
if (xmlHttp.readyState == 4) // Если ответ пришёл…
{
alert(xmlHttp.responseText); // Показать окно с текстом ответа. Это просто пример.
}
}

6 шаг

Откройте соединение для запроса, указав метод, адрес (вместе со строкой параметров) и тип цикла.

xmlHttp.open(“GET”, script + paramString, true);

7 шаг

Укажите заголовок запроса. Здесь нужно написать, что Вы используете закодированный в URL запрос, а так же какую раскладку Вы используете.

xmlHttp.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded, charset=utf-8’);

8 шаг

Пошлите запрос на сервер, указав данные, передаваемые серверу (в данном случае, ничего).

xmlHttp.send(null);

После этого, запрос будет послан серверу. В то время, пока клиент ждёт ответа, он может совершать другие действия, но когда придёт ответ, то его текст появится в окне.

Советы и предупреждения:

  • Вы можете проигнорировать ответ сервера, но лучше этого не делать.
  • Примеры, приведённые мной, показаны для наглядности и не являются единственным способом использования технологии AJAX. Экспериментируйте.
  • Вы можете проследить за всеми запросами и ответами используя плагин Firebug для FireFox или его аналог.

Обсуждение

295_micro
Рейтинг
  1. +
  2. 0
Evil_Genius (18:45 11.11.2009)

Я бы порекомендовал метод Post… Эх… Я вообще только неделю назад начал учить Аякс) плохо что на твою статью не попал раньше)))

Ваш комментарий

Запросить инструкцию

Не нашли нужную пошаговую инструкцию?
Возможно, что кто-то из посетителей сайта сможет помочь. Оставьте запрос прямо сейчас, если Вы уверены, что эта тема ещё не освещена на нашем проекте!

Рейтинг
  1. +
  2. 2
1
3748