Привет, дорогой читатель. В этой статье я расскажу тебе о том, что такое ajax и с чем его едят.Ajax(Asynchronous Javascript
And Xml)- технология для взаимодействия с сервером без перезагрузки
страниц. Преимущество ajax в том, что при его использование можно
изменить часть web страницы, не перезагружая всю страницу целиком, а
только лишь нужную нам часть. Сейчас мы рассмотрим простой пример использования ajax.
Создадим файл "ajax.html", в него вставим этот html код:
<html>
<head>
<title>Пример асинхронной передачи данных</title>
</head>
<body>
<input value="Сколько время?" onclick="now_time()" type="button">
<div id="time">Здесь будет ответ сервера
</body>
</html>
Теперь рассмотрим данный html код.
При нажатие на кнопку "сколько время?" будет вызвана java script функция now_time(). Функция пошлет запрос на сервер, сервер обработает запрос и вышлет нам ответ в div time.
Теперь мы рассмотрим саму функцию now_time():
Во-первых, для асинхронного обмена данными мы будем использовать специальный объект XmlHttpRequest, который умеет отправлять запрос и получать ответ от сервера.
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;
}
Подробно про этот объект вы можете прочитать тут.
А теперь про саму функцию now_time():
function now_time() {
var req = getXmlHttp()
var statusElem = document.getElementById('time')
req.onreadystatechange = function() {
if (req.readyState == 4) {
statusElem.innerHTML = req.statusText
if(req.status == 200) {
alert("Ответ сервера: "+req.responseText);
}
}
}
req.open('GET', '/time.php', true);
req.send(null);
statusElem.innerHTML = 'Ожидаю ответа сервера...'
}
Серверный обработчик, к которому обратился наш ajax-запрос (в примере
это time.php), по сути, ничем не отличается от обычной php страницы.
Теперь мы перейдем к файлу time.php
<?php
sleep(2);
setlocale(LC_TIME, 'ru_RU.CP1251', 'rus_RUS.CP1251', 'Russian_Russia.1251');
$time = strftime("%H:%M:%S\n");
$unix_time = time();
echo "<p>Человеческое время: $time <br> Unix время: $unix_time";
?>
http://live-code.ru
| 
