Лёгкий движок AJAX
Часто приходится слышать: ajax-очень сложно, ajax-самостоятельная технология и даже что ajax - это и есть тот присловутый, призрачный web 2.0, о котором все слышали, все всё знают, но ничего конкретного по этому поводу сказать не могут… Ну да ладно, речь пойдет не о web 2.0, а о ajax’e, а точнее о том, что ajax - проще простого!
На самом деле ajax - не отдельная технология, а всего лишь набор javascript‘овых функций:
function createHttpRequest() {
var httpRequest;
// Mozilla/Safari
if (window.XMLHttpRequest)
{
httpRequest=new XMLHttpRequest();
}
// Internet Explorer
else if (typeof ActiveXObject != ‘undefined’)
{
httpRequest = new ActiveXObject(’Microsoft.XMLHTTP’);
}
return httpRequest;
}
function sendRequest(file, _resultId, getRequestProc) {
//- проверяем можно ли отправлять данные
if(document.getElementById(‘ajax_flag’).value==0)
{
//alert(file);
file=encodeURI(file);
resultId = _resultId;
flag_aj=“‘ajax_flag’”;
document.getElementById(resultId).innerHTML = ‘<span style=”border:0px;” onclick=”javascript:document.getElementById(’+flag_aj+’).value=0;”>
<input name=”sub” src=”ajax-loader.gif” type=”image” />// изображение ajax-loader
</span>’;
httpRequest.open(‘POST’, file);
httpRequest.setRequestHeader(‘Content-Type’ , ‘application/x-www-form-urlencoded’);
httpRequest.onreadystatechange = getRequestProc;
httpRequest.send(null);
}
}
function getRequest() {
//– прячем десктопы
if (httpRequest.readyState == 0) {
document.getElementById(resultId).innerHTML = ‘неинициализирован’;
}
if (httpRequest.readyState == 1) {
//– ставим флаг что начали отправку
document.getElementById(‘ajax_flag’).value=1;
}
if (httpRequest.readyState == 4) {
//– ставим флаг что приняли
document.getElementById(‘ajax_flag’).value=0;
document.getElementById(resultId).innerHTML = httpRequest.responseText;
document.getElementById(resultId).style.visibility = ‘visible’;
}
}
var httpRequest = createHttpRequest();
var resultId = ”;
Теперь всё, что нам необходимо сделать - подключить этот скрипт на сайт:
//подключаем файл ajax.js
<script name=”JavaScript” src=”Путь к файлу” type=”text/javascript”></script>
//ставим флаг, обязательно!
<INPUT id=”ajax_flag” type=”hidden” value=”0″>
//пример
<p onclick=’sendRequest(”путь к подгружаемому файлу“, “res_id“, getRequest)’>Кликните, чтобы подгрузить файл</p>
<div id =”res_id“>Здесь будет результат</div>
Всё, готово!
Примеры:
Наведите курсор, чтобы подгрузить файл с изображением
Кликните, чтобы подгрузить файл с изображением
Кликните, чтобы подгрузить файл ajax.js
Рабочий примерчик - demo(154 Kb)
Юзайте на здоровье
Похожие статьи
Если Вам понравилась эта статья,
подпишитесь на RSS !
Метки: AJAX
апреля 1, 2009 at 21:38
Радует, что ваш блог постоянно развивается. Такие посты только прибавляют вам популярности.
апреля 23, 2009 at 10:59
Очень помог AJAX примерчик, спасибо. Веб 2.0 оказывается не так сложен
июля 27, 2009 at 12:06
спасибо за примерчик. надо развиваться в этом направлении.
апреля 28, 2010 at 13:54
хороший скрипт! Внедрил себе на первое время! Афтар респектуха
июня 3, 2010 at 11:17
К сожалению в WordPress у меня не сработал. Причины понять пока не могу. Может кто-нибудь поможет?
апреля 27, 2013 at 21:34
Для индикации AJAX-операций может оказаться полезной JavaScript библиотека AjaxLoader.jshttp://musicvano.github.io/ajaxloader/ Она имеет маленький размер, легка в установке и позволяет заменить в некоторых случаях GIF рисунки, особенно, когда пользователь хочет настроить цвет, размер или скорость анимации.