Блог Web-мастера

jQuery, php, CSS и немножко SEO


Лёгкий движок 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)
Юзайте на здоровье

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Похожие статьи

Если Вам понравилась эта статья,
подпишитесь на RSS !

Метки:

6 Комментариев к “Лёгкий движок AJAX”

  1. БPATAH написал:

    Радует, что ваш блог постоянно развивается. Такие посты только прибавляют вам популярности.

  2. Max написал:

    Очень помог AJAX примерчик, спасибо. Веб 2.0 оказывается не так сложен :)

  3. Женя написал:

    спасибо за примерчик. надо развиваться в этом направлении.

  4. Korobasow написал:

    хороший скрипт! Внедрил себе на первое время! Афтар респектуха

  5. Master написал:

    К сожалению в WordPress у меня не сработал. Причины понять пока не могу. Может кто-нибудь поможет?

  6. Иван написал:

    Для индикации AJAX-операций может оказаться полезной JavaScript библиотека AjaxLoader.js http://musicvano.github.io/ajaxloader/ Она имеет маленький размер, легка в установке и позволяет заменить в некоторых случаях GIF рисунки, особенно, когда пользователь хочет настроить цвет, размер или скорость анимации.

Оставить комментарий

Я не робот.