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