Кодерастам от кодераста!

Вообщем-то, долгое время я знал, что такое Ajax, но не умел им пользоваться, но очень сильно хотел научиться, как-то передомной встала задача, которую необходимо было решить только с помощью этой технологии и я наконец ближе познакомился с Ajax.

AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») - подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных, веб-страница не перезагружается полностью и веб-приложения становятся более быстрыми и удобными.

По-английски AJAX произносится как эй-джэкс, по-русски довольно распространено ая́кс.

То есть, грубо говоря, Аякс эту кртуая штука, которая позволяет обновить информацию на странице без перезагрузки оной. Вы наверняка очень часто видели подобные красотули на популярных сайтах. Это не просто понты, порой это крайне удобно.

Рассказывать я буду о том, как же это всё делается я буду на простом примере: Есть страничка, на которой стоит поле для ввода и кнопка. При нажатии на кнопку, на этой странице без перезагрузки появится то, что введено в текстовое поле.

Немного отвлекусь от темы и прорекламирую страницу, которая участвует в конкурсе SEOCAFEинфошность. Ещё один очень интересный конкурс для оптимизаторов. Пожелаем автору сайта удачи!

Пример качаем тут.

Ну, а теперь разбор полётов.

Файл index.php это наша исходная страница, на которой и находятся текстовое поле и кнопка. Обязательно в теге HEAD указать,что данная страница загружает файл кода JavaScript`a:

<script type="text/javascript" src="ajax.js"></script>

В теге BODY мы видим 2 ячейки:

1. <div id="static">
2. <div id="dynamic"> 

В ячейку dynamic позже мы будем выводить результаты нашего ввода. А вот о ячейке static и её содержимом стоит поговорить побольше. В этой ячейке находится форма. У формы задано только имя, т.к. остальные параметры(метод передачи данных, куда отправлять данные) нам не нужны, ведь мы должны остаться на этой странице.

<form name="input_form">

В этой форме, как я уже и говорил, расположены текстовое поле

<input name="input" id="input" type="text" value="">

и кнопка

<input type="button" value="Отправить" onClick="output();">

Важно в текстовом поле указать свойство id, т.к. именно с помощью этого свойства мы будем обращаться к нему для извлечения введённого текста. А у кнопки обязательно указать что будет происходить при её нажатии: onClick="output();". Это означает, что как только нажмётся кнопка, вызовется функция output.

Всё, с этой страницей мы разобрались. Сейчас очень важно разобраться с JavaScript-кодом, который и оживит нашу страницу. Открываем файл ajax.js и начинаем разбираться.

Первая часть файла, которая озаглавлена XMLHTTPRequest Enable необходима для создания объекта, который будет связываться со сторонней страницей и получать от неё данные. Эту часть скрипта менять НЕЛЬЗЯ. Иначе ни чего не будет работать. После выполнения этой части мы получим переменную http, с которой будем работать.

Вторая часть - это 2 функции, одна для отправки данных стороннему скрипту, другая для получения этих данных и вывода в нужное место страницы.

Итак, отправка данных:

function output() {

document.getElementById(`dynamic`).innerHTML = `Отправляется запрос...`; //Пишем в контейнере dynamic, что мы отправили запрос.

input=document.getElementById(`input`).value; //Получаем введённый в поле ввода текст

nocache = Math.random(); //Формируем случайное число, что бы новый запрос отличался от предыдущего и браузер не закешировал результат запроса, ведь они могут быть разными

http.open(`get`, `page.php?input=`+input+`&nocache =`+nocache); //Отправляем GET-запрос на страницу page.php c нужными переменными

http.onreadystatechange = searchNameqReply; //Ожидаем ответа скрипта

http.send(null); //Прекращаем запрос

}

Ну, я вроде довольно понятно описал, что делает каждая строчка, так что перейдём ко второй части, так же чётко опишу что и зачем:

function searchNameqReply() {

if(http.readyState == 4){ //Значит, что ответ полностью готов

var response = http.responseText; //Ответ скрипта заносим в переменную response

document.getElementById(`dynamic`).innerHTML = response; //В контейнер dynamic выводим результат запроса

}

}

Ну, тут тоже менять ни чего не нужно, т.к. иначе работать не будет. Перейдём к файлу page.php. Именно к нему мы отправляли запрос и именно он выводит введённый в текстовое поле текст. Скрипт крайне прост:

$input_txt=$_GET["input"];

echo "Вы ввели: ".$input_txt;

Первая строчка получает значение переменной input из GET, ведь именно им этим методом мы отправляем запрос. Вторая переменная выводит на экран значение переменной. Вот и всё!

Коротко, что к чему:

1. Пользователь вводит текст в поле и нажимает кнопку
2. JavaScript пишет в ячейку, что запрос пользователя отправлен. И он же отсылает GET-запрос на страницу page.php
3. Страница page.php получает данные(что ввёл пользователь) и выводит их на экран
4. JavaScript получает результат работы файла page.php и выводит его в ячейку на странице пользователя.

Конечно вы можете всячески изменить этот скрипт, допустим что бы запрос отправлялся не по нажатию кнопки, а когда пользователь вводит текст, этим усилив интерактивность. Вам всего лишь нужно немного знаний в JavaScript`е.

Я считаю, что это очень полезные знания и я рад, что наконец написал эту статьи и возможно кому-то помог. Если возникли вопросы, то не стесняемся и пишем в комментарии или по ICQ: 2865606. Я с радостью помогу. Ну или на форуме MaulNet в личные сообщения.

В скором времени я бы хотел вам рассказать, как реализовать на сайте с помощью Ajax поля Страна - область - город. То есть при выборе страны, формируется список областей, а при выборе области - список её городов. И конечно же выложу саму базу город-область-страна.

Спасибо за внимание! =)