Привет, дорогой читатель. В этой статье я расскажу тебе о том, что такое ajax и с чем его едят.Ajax(Asynchronous Javascript And Xml)- технология для взаимодействия с сервером без перезагрузки страниц. Преимущество ajax в том, что при его использование можно изменить часть web страницы, не перезагружая всю страницу целиком, а только лишь нужную нам часть. Сейчас мы рассмотрим простой пример использования ajax.
Создадим файл "ajax.html", в него вставим этот html код:
|
1 2 3 4 5 6 7 8 9 |
<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, который умеет отправлять запрос и получать ответ от сервера.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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():
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function now_time() { var req = getXmlHttp() // создадим объект для запроса к серверу var statusElem = document.getElementById('time') // id div`a в котором будет отображатся ход выполнения скрипта req.onreadystatechange = function() { // onreadystatechange - активируется при получении ответа сервера if (req.readyState == 4) { // если запрос закончил выполняться statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..) if(req.status == 200) { // если статус 200 - выдать ответ пользователю alert("Ответ сервера: "+req.responseText); // выдаем ответ } } } req.open('GET', '/time.php', true); // задаем адрес подключения скрипта /* объект запроса подготовлен: указан адрес и создана функция onreadystatechange для обработки ответа сервера */ req.send(null); // отослать запрос statusElem.innerHTML = 'Ожидаю ответа сервера...' } |
Серверный обработчик, к которому обратился наш ajax-запрос (в примере это time.php), по сути, ничем не отличается от обычной php страницы.
Теперь мы перейдем к файлу time.php
|
1 2 3 4 5 6 7 |
<?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<p></p>"; ?> |