введение в ajax-технологию

Введение в AJAX

Опубликовано: 09.12.2014 14:02
Просмотров: 6423

AJAX - это замечательная технология, которая позволяет сделать сайты полностью интерактивными и живыми :) читаем дальше

Введение в ajax

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

Зачем нужен ajax

С появлением web-технологий для доступа к самой свежей информации нам всего лишь нужен браузер и ... и всё! Мы всегда будем в курсе новинок всех магазинов и будем иметь доступ к самой свежей информации. Но за все приходится платить. В данном случае нам приходится все время ждать загрузки страниц, форм и прочего. Технология ajax позволяет избавиться от загрузки целой страницы. Теперь мы можем обновить то что нам нужно. Например, заполнив форму, не будем загружать с сервера всю страницу, а загрузим лишь ответ от сервера в определенное место страницы.

Залезем под капот

Для того, чтобы понять ajax нужно иметь представление о других, web-технологиях, так как ajax одновременно охватывает в себе несколько составляющих:

  • HTML - это основа основ. Он используется для создания web-форм и базовой разметки страницы. Прочтите о новых фишках HTML 5.0;
  • CSS - для оформления web-страниц;
  • JavaScript - это основа для ajax. Именно JavaScript выполняет взаимодействие между сервером и клиентом;
  • DHTML (Dynamic HTML) - помогает производить динамические изменения на web-странице;
  • DOM - (Docement Object Model) - используется при работе со структурой web-страницы (при помощи JavaScript).

Если Вы уже знакомы с данными технологиями - отлично. Если нет, ничего страшного. На нашем сайте вы найдете много интересных статей, которые помогут Вам в изучении этих технологий.

Алгоритм действия для создания ajax-запроса

Перед тем как перейти к примеру рассмотрим алгоритм действий, которые нужно выполнить для того чтобы реализовать ajax запрос:

  1. создание экземпляра объекта объект XmlHttpRequest;
  2. отправка запроса методами open и send;
  3. принятие и обработка данных пользователя сервером, ответ сервера;
  4. обработка ответа сервера, например, при помощи метода onreadystatechange.

Создание экземпляра объекта объект XmlHttpRequest

Тут ничего трудно. Создаем обычный объект:

переменная = new XMLHttpRequest();

Отправка запроса методами open и send

Метод open() имеет следующий формат: open(тип_запроса,url,способ), где тип_запроса GET или POST, url - путь до запрашиваемого файла, способ - синхронный (false) или асинхронный (false) метод выполнения.

Метод send имеет формат: send('информация') - передает информацию на сервер.

Создадим экземпляр объекта XmlHttpRequest и при его помощи асинхронно передадим файл my.txt на сервер.

XMLHttpRequest = new XMLHttpRequest(); 
XMLHttpRequest.on-readystatechange = function(){
if (XMLHttpRequest.readyState == 4 &&XMLHttpRequest.status == 200)
document.getElementById("server_answer").innerHTML=XMLHttpRequest.responseText;
}
XMLHttpRequest.open("GET","my.txt",true);
XMLHttpRequest.send();

Для запроса методом POST все будет аналогично. Только в методе open() нужно заменить первый аргумент "GET" на "POST".

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

<html>
<head>
<script type='text/j-avascript'>
function go(){
var x=document.getElementById('input1').value;
var y=document.getElementById('input2').value;
XMLHttp=new XMLHttpRequest();
XMLHttp.on-readystatechange=function(){
if (XMLHttp.readyState==4 && XMLHttp.status==200)
document.getElementById('result').innerHTML=XMLHttp.responseText;
}
XMLHttp.open('GET','get_result.php',true);
XMLHttp.send(x+','+y);
}
</script>
</head>
<body>
<strong><p id='result'>Введите два числа и нажмите на кнопку для получения результата</p></strong>
<input type='text' id='input1' />
<input type='text' id='input2' />
<br />
<input value='Перемножить' type='button' on-click='go()'/>
</body>
</html>

В данном примере осталось всего лишь создать файл с именем "get_result.php" в котором нужно обработать GET-запрос: извлечь из строки 2 числа, перемножить их и вывести. Тут ничего трудного, поэтому останавливаться не будем.

Состояния готовности сервера

В предыдущих примерах мы уже использовали свойство readyState. Остановимся на нем подробнее. Данной свойство позволяет узнать состояние сервера. Существует пять состояний сервера:

  1. нет запроса;
  2. подключение к серверу установлено;
  3. запрос получен;
  4. запрос обрабатывается;
  5. запрос обработан и ответ сформирован.

Процесс обработки запроса переключает состояние сервера поочередно с 0 до 4. И поэтому мы использовали такой код выше (проверка статуса на равенство четырем, то есть на готовность):

if (XMLHttp.readyState==4 && XMLHttp.status==200)
document.getElementById('result').innerHTML=XMLHttp.responseText;
}

При помощи свойства status можно узнать код ответа на посланный запрос. Например код 200 - успешная обработка, а 404 - говорит об отсутствии страницы. В примере выше мы выполняем код, только если сервер успешно обработал запрос.

Событие onreadystatechange выполняется каждый раз как изменяется свойство readyState у сервера. Тоесть при успешной обработке запроса событие onreadystatechange  выполнится 4 раза.

Получение ответа сервера

При корректной обработке результата  в свойства responseText (в виде строки символов) и responseXML (в виде XML файла) объекта XMLHttpRequest запишется ответ сервера. В примерах выше мы получали результат из свойства responseText:

document.getElementById('result').innerHTML=XMLHttp.responseText;

Вот и все, мы узнали что же такое ajax, узнали зачем нужна эта технология и привели простые поясняющие примеры.

  • Комментарии не найдены

Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 2000 Ограничение символов
Ваш текст должен быть в пределах 10-2000 символов
Ваш комментарий будет отправлен на модерацию