Пример создания не большого приложения AJAX
Автор: Paladinovolk | Категория: Сайтостроение Пятница 15 Январь 2010Что такое AJAX
AJAX – это асинхронный JavaScript и XML.
AJAX базируется на JavaScript и HTTP-запросах.
Прежде чем продолжить, вы должны иметь базовые знания по HTML / XHTML и JavaScript.
AJAX не является новым языком программирования, а новый способ использования существующих стандартов.
AJAX основана на существующих стандартах. Эти стандарты были использованы разработчиками в течение нескольких лет.
AJAX базируется на следующих веб-стандартах: JavaScript, XML, HTML, CSS.
С Ajax, JavaScript могут общаться напрямую с сервером, с помощю объекта XMLHttpRequest. С этой целью, JavaScript может обмениваться данными с веб-сервером, без перезагрузки страницы.
AJAX использует асинхронную передачу данных (HTTP запросах) между браузером и веб-сервер, позволяющие загружать мелкие кусочки информации с сервера, а не целые страницы.
Технология AJAX делает интернет-приложения меньше по размеру, быстрее и более удобным для пользователей.
AJAX использует объект XMLHttpRequest
Чтобы получить или отправить информацию в/из базы данных или файлов на сервере с помощю традиционного JavaScript, вам придется сделать форму HTML, и пользователю придется нажать кнопку «Отправить» для отправки/получения информации, ждать ответа с сервера пока новая страница загружается с результатами.
Поскольку сервер возвращает новую страницу каждый раз, когда пользователь отправляет информацию, традиционные веб-приложения могут работать медленно и, как правило, являются менее удобным для пользователей.
С помощю Ajax, ваш JavaScript общается непосредственно с сервером, через объект JavaScript XMLHttpRequest.
С помощю объекта XMLHttpRequest, веб-страница может сделать запрос и получить ответ от веб-сервера – без перезагрузки страницы.
Пользователь будет оставаться на той же странице, и он не заметит, что данные на сервер отправляются в фоновом режиме.
AJAX была популярна в 2005 году Google (с Google Suggest).
Объект XMLHttpRequest поддерживается всеми основными браузерами (Internet Explorer, Firefox, Chrome, Opera и Safari).
Пример создания не большого приложения AJAX
Мы будем создавать приложения AJAX с нуля. Приложение будет использовать две кнопки. При нажатие на которые будем получать данные с сервера и отображения информации на веб-странице, без перезагрузки самой страницы.
Сначала мы создать небольшую страницу HTML с контейнером <div>. <div> будет использоваться для показа альтернативной информации, запрошенной с сервера.
Чтобы определить <div>, мы используем атрибут id="test":
<body>
<div id="test">
<h2>Click to let AJAX change this text</h2>
</div>
</body>
</html>
Мы добавим две простые кнопки <buttons>. Кнопки вызовают функцию loadXMLDoc(), когда по ним щелкнули:
<button type="button" onclick="loadXMLDoc('test2.txt')">Click Me</button>
Наконец, мы добавим <script> на страницу в <head> содержащий функцию loadXMLDoc() :
<script type="text/javascript">
function loadXMLDoc(url)
{
…. Your AJAX script goes here …
}
</script>
</head>
Все новые браузеры поддерживают встроенный объект JavaScript XMLHttpRequest (IE5 и IE6 использует ActiveXObject).
Этот объект может использоваться для запроса данных с сервера.
Давайте обновим наш HTML файл с JavaScript в <head>:
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML=xmlhttp.responseText;
}
Создаем объект XMLHttpRequest: xmlhttp=new XMLHttpRequest()
Используем ActiveXObject если IE5 или IE6: xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
Откройте объект запроса: xmlhttp.open("GET",url,false)
Отправляем запрос на сервер: xmlhttp.send(null)
Обновляем страницу ответом с сервера: document.getElementById('test').innerHTML=xmlhttp.responseText
Получаем:
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<div id="test">
<h2>Click to let AJAX change this text</h2>
</div>
<button type="button" onclick="loadXMLDoc('test1.txt')">Click Me</button>
<button type="button" onclick="loadXMLDoc('test2.txt')">Click Me</button>
</body>
</html>
Чтобы отправить запрос на веб-сервере, мы используем open() и send() методы.
Open() метод принимает три аргумента. Первый аргумент определяет, какой метод использовать (GET или POST). Второй аргумент определяет имя сервера, ресурса (URL). Третий аргумент задает запрос должна обрабатывается асинхронно или нет.
Send() метод отправляет запроса сервер. Если мы предположим, что загружаем файл с названием "time.asp", код должен быть:
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
В этом примере мы предполагаем, что текущая веб-страница и запрашиваемый, находятся в одном каталоге.
Третий параметр в xmlhttp.open «false». Это заставляет объект XMLHttpRequest подождать завершения текущего запроса до отправки следующего.
Для небольших приложений и простого запроса к серверу, это нормально. Но если запрос занимает много времени или не может быть выполнен, это может привести к зависанию или остановке вашего веб-приложения.
Если третий параметр xmlhttp.open «true». Это заставляет объект XMLHttpRequest продолжить выполнение запроса к серверу.
Вы не можете просто использовать ответ с сервера, после завершения запроса, необходимо установить onreadystatechange.
В этом onreadystatechange функции вы должны проверить readyState прежде чем сможете использовать результат.
Просто измените код:
{
if(xmlhttp.readyState==4)
{document.getElementById('test').innerHTML=xmlhttp.responseText}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
Возможные значения для readyState:
0 – запрос не инициализируется
1 – запрос создан
2 – запрос отправлен
3 – запрос в процессе
4 – запрос выполнен
В итоге получаем:
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<div id="test">
<h2>Click to let AJAX change this text</h2>
</div>
<button type="button" onclick="loadXMLDoc('test1.txt')">Click Me</button>
<button type="button" onclick="loadXMLDoc('test2.txt')">Click Me</button>
</body>
</html>
Здесь можно посмотреть пример как все выше изложенное работает.
