Пример простого Ajax запроса с его обработкой.
Нужно создать новый объект XMLHttpRequest и добавить две функции. Функция для создания запроса и передачи его на сервер (этим занимается функция getCustomerInfo()), и для обработки ответа сервера (функция updatePage())
<script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); function getCustomerInfo() { var text = "test text"; //Передаваемая переменная var url = "<?php print base_path() . path_to_theme(); ?>/ajax.php?text=" + text; // Адрес до файла ajax.php request.open("GET", url, true); // Создание запроса request.onreadystatechange = updatePage; // Устанавливается метод обратного вызова request.send(null); // Передача запроса } function updatePage() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseText.split("|"); // Обработка полученной строки document.getElementById("ajax-box").innerHTML = response[0]; // Вывод результата в контейнер с id=ajax-box } else alert("status is " + request.status); } } </script>
Для формирования ajax запроса, используется метод open() объекта XMLHttpRequest. Он может принимать 5 параметров open(request-type, url, asynch, username, password)
Передача запроса серверу осуществляется методом send(). Этот метод имеет один параметр - содержимое для передачи. Т.к. в этом примере все содержимое передается в url через get параметр, то в качестве параметра метода send передается null.
После того, как сервер выполнит запрос, он начинает искать свойство onreadystatechange объекта XMLHttpRequest. Данное свойство указывает метод обратного вызова. Т.е. указывает call-back функцию, которая будет выполнена после того, как сервер обработает запрос.
Функция updatePage() обрабатывает ответ сервера и работает с ним. Проверка if (request.readyState == 4) информирует о том, что сервер завершил свой ответ. Проверка if (request.status == 200) информирует о http состоянии (был указан корректный url, такой документ был на сервере, сервер его обработал и отослал данные, ожидаемые клиентом).
<div id="ajax-box" onClick="getCustomerInfo();">Submit</div>
Файл для обработки запроса на сервере ajax.php
В этом файле происходит получение ajax запроса, его обработка и формирование результата, который будет передан сервером браузеру клиента.
В данном примере к полученному запросу просто приписывается небольшая текстовая строка.
<?php if ($_GET){ echo ("Get param - " . $_GET[text]); } ?>
Комментарии