Як послати 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 або його аналог.