Сегодняшняя статья будет посвящена технологии AJAX (АЯКС). Не имея базовых знаний о том как работает JavaScript и PHP разобраться в данной статье может быть достаточно затруднительно, однако я приложу все усилия, что бы разложить весь материал по полочкам и в самой доступной форме.
Что же такое AJAX? (При желании определения можно найти в Интернете) Говоря простым языком — это технология, позволяющая выполнять какие либо действия на Интернет странице, не перегружая ее. В чем спросите подвох? Можно же делать данные действия обычным java-скриптом! Отвечу на данный вопрос так: «это конечно так, однако не применяя технологию Аякс невозможно выполнить некоторый запрос к базе данных, а технология Аякс позволяет это делать, в других же случаях вполне можно исхитриться и обойтись без этого».
Описание данной схемы выглядит примерно так: у нас есть страница, на которой находится пользователь. На данной странице есть некоторый объект (блок, кнопка, поле для ввода и т.п.) на котором определено некоторое событие (onclick, onmouseover и т.д.). Код данного события посылает GET или POST запрос на некоторую страницу, на которой происходит анализ данного запроса. Данная страница может быть отдельно выделенным файлом, а может быть текущей страницей, все зависит от желания разработчика. Обработанный запрос выводит некоторый результат работы в виде обычного текста, например обычными PHP функциями echo. Данный текст возвращается назад в код события объекта, где обрабатывается в дальнейшем.
Думаю достаточно теории. Перейдем к практике.
Последуем описанной выше схеме. Создадим два PHP файла: file1.php и file2.php, и один файл JS: file3.js. В первом файле напишем код:
<html> <head> <script src="file3.js" type="text/javascript"> </head> <body> <?php echo "AJAX TEST!"; echo "<input type='text' value='' id='txt' />"; echo "<input type='button' value='AjaxIt!' onclick='sendAjax();' /><br/>"; echo "<div id='res'></div>"; ?> </body> </html>
Откроем второй файл и в нем напишем следующий код:
<?php
if ($_GET && !empty($_GET["act"]))
{
switch(($_GET["act"])
{
case "test":
echo strlen($_GET["txt"]);
break;
default:
echo "unknown act!";
}
}
?>
Опишем код. У нас есть страница с полем для ввода и кнопкой. Мы хотим, чтобы нам выводилась длина введенного текста в div. Причем мы хотим, чтобы длина считалась именно функцией PHP – strlen (ну может нам религия не позволяет считать длину строки средствами ява скрипта). У нас есть так же вторая страница, где мы будем производить наши тяжкие вычисления. Как мы видим, на нее будет приходить ГЕТ запрос с параметрами act и txt. Первый параметр будет говорить файлу то, что мы должны делать и будет задаваться непосредственно программистом как константа. Второй – это текст, длину которого мы хотим подсчитать.
Важно: Забегая вперед стоит отметить, что как всегда возникает проблема в передаче русских символов в запросе GET. В Интернете без труда можно найти решение данной проблемы в виде перекодирования русских символов до передачи и обратным перекодированием после получения данных. Так же во втором файле часто приходится указывать header с обозначением кодовой страницы файла 1251, это поможет решить проблему некорректного вывода русских букв оператором echo.
Теперь перейдем к javascriptингу. Откроем файл file3.js и напишем следующее:
function getXmlHttp()
{
var xmlhttp;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function sendAjax()
{
var req = getXmlHttp();
var t = document.getElementById("txt").value;
req.onreadystatechange = function() {
if (req.readyState == 4) {
if(req.status == 200) {
document.getElementById("res").innerHTML = req.responseText;
}
}
}
req.open('GET', 'file2.php?act=test&txt='+t, true);
req.send(null);
}
Описывать функцию getXmlHttp() смысла особого нет, ничего интересного там нет. Просто воспринимайте это как должное. Функцию sendAjax() мы же рассмотрим поподробней. По сути здесь описано две функции. Функция sendAjax() и функция которая будет вызываться после получения ответа от сервера (в нашем случае после того как файл file2.php выполнит свой код). Работа данной функции такова: сначала мы создаем элемент ActiveXObject, далее в переменную t записываем значение нашего текстового поля, далее мы отправляем ГЕТ запрос на файл file2.php с параметрами act=test и txt=[значение текcтового поля]. Далее после получения ответа и не получения ошибок мы в див ‘res’ записываем результат работы файла file2.php.
В итоге мы имеем, что мы получили данные от другой php страницы, при этом не перегрузили текущую страницу. Вот такая вот магия. Надеюсь, статья стала полезной многим странникам сети Интернет. Всем спасибо.
