
- Комментарии не найдены
AJAX - это замечательная технология, которая позволяет сделать сайты полностью интерактивными и живыми :) читаем дальше
В нашем мире новых информационных технологий то и дело появляются всякие эзотерические языки программирования, сервисы, форматы, но ajax – это отнюдь не чья-то прихоть, это мощнейший подход к созданию интерактивных сайтов. Поверьте ajax легче выучить чем новый язык программирования. В этой статье мы получим базовые понятия и рассмотрим простые примеры.
С появлением web-технологий для доступа к самой свежей информации нам всего лишь нужен браузер и ... и всё! Мы всегда будем в курсе новинок всех магазинов и будем иметь доступ к самой свежей информации. Но за все приходится платить. В данном случае нам приходится все время ждать загрузки страниц, форм и прочего. Технология ajax позволяет избавиться от загрузки целой страницы. Теперь мы можем обновить то что нам нужно. Например, заполнив форму, не будем загружать с сервера всю страницу, а загрузим лишь ответ от сервера в определенное место страницы.
Для того, чтобы понять ajax нужно иметь представление о других, web-технологиях, так как ajax одновременно охватывает в себе несколько составляющих:
Если Вы уже знакомы с данными технологиями - отлично. Если нет, ничего страшного. На нашем сайте вы найдете много интересных статей, которые помогут Вам в изучении этих технологий.
Перед тем как перейти к примеру рассмотрим алгоритм действий, которые нужно выполнить для того чтобы реализовать ajax запрос:
Тут ничего трудно. Создаем обычный объект:
переменная = new XMLHttpRequest();
Метод 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. Остановимся на нем подробнее. Данной свойство позволяет узнать состояние сервера. Существует пять состояний сервера:
Процесс обработки запроса переключает состояние сервера поочередно с 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, узнали зачем нужна эта технология и привели простые поясняющие примеры.
Советуем почитать
Комментарии