Попробую быстро и наглядно показать как и где использовать технологию AJAX.
Для начала коротко расскажу про аякс: это полусерверный, полуклиентский язык, а точнее асинхронный. Часть его выполняется на клиенте, часть на сервере, в итоге без перезагрузки страницы мы можем обновлять информацию на сайте, например подгружая ее из базы данных mySQL, причем даже с другого сервера!
Как это работает спросите?
Чтобы получить данные на сервере, XMLHttpRequest предоставляет два метода:
- open – создает соединение
- send – отправляет запрос на сервер
Данные возвращенные сервером извлекаем из атрибутов объекта XMLHttpRequest:
- ResponseXml для файлов XML
- ResponseText для обычного текста.
Важно: объект XMLHttpRequest долен быть создан для каждого нового файла для загрузки!!
Чтобы узнать о процессе извлечения и загрузки данных с сервера существует атрибут readyState объекта XMLHttpRequest, который возвращает следущие параметры от 0 до 4, причем нам важен только последний:
0: не инициализирован. 1: связь. 2: запрос получен. 3: ответ в процессе. 4: закончено.
Рассмотрим подробнее атрибуты Объекта XMLHttpRequest:
| readyState | Код последовательно изменяет свое значение от 0 до 4, где 4 означает “готов”. |
| status | 200 нормально, 404 – страница не найдена. |
| responseText | содержит загруженные данные в виде строки символов. |
| responseXml | содержит загруженные данные в виде файла XML |
| onreadystatechange | обычно принимает в качестве значения функцию, когда readystatechange событие будет запущено. |
ну и собственно методы:
| open (mode, url, boolean) | mode: тип запроса, GET или POST url: расположение файла, вместе с путем. boolean: true (асинхронный) / false (синхронный). опционально: Логин и пароль могут быть добавлены к аргументам. |
| send (“string”) | null для метода GET. |
Ну а теперь приведем пример: (ну наконецто 
))
if (window.XMLHttpRequest) // Объект текущего окна { xhr = new XMLHttpRequest(); // Firefox, Safari, ... } elseif (window.ActiveXObject) // ActiveX версия { xhr = new ActiveXObject("Microsoft.XMLHTTP"); Internet Explorer }
инициировали, теперь ждем ответа
if (xhr.readyState == 4)
{
// Received, OK
} else
{
// Wait...
}
ну а дальше отправляем запрос:
xhr.open('GET', 'http://www.symple.ru/sitemap.xml', true);
xhr.send(null);
Все пример сразу и с HTML кодом:
<html>
<head>
<script>
function submitForm()
{
var xhr;
try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { xhr = new XMLHttpRequest(); }
catch (e3) { xhr = false; }
}
}
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
document.ajax.dyn="Received:" + xhr.responseText;
else
document.ajax.dyn="Error code " + xhr.status;
}
};
xhr.open(GET, "data.txt", true);
xhr.send(null);
}
</script>
</head>
<body>
<FORM method="POST" name="ajax" action="">
<INPUT type="BUTTON" value="отправить" ONCLICK="submitForm()">
<INPUT type="text" name="dyn" value="">
</FORM>
</body>
</html>
скачать ПРИМЕР можно здесь: demo-symple.ru-ajax-post
жду комментариев!