Использовать кросс-доменный Ajax можно уже сегодня при помощи динамического создания элементов SCRIPT и загрузки кода JavaScript. При этом возникают несколько проблем, часть из которых можно решить, а часть из которых не поддается простому решению. Давайте рассмотрим эти проблемы.

Прежде всего в разных веб-браузерах код будет действовать по-разному и потребуются разные подходы. Например, в некоторых веб-браузерах загрузка начинается в момент присвоения свойству src нового значения, а в других - только при присоединении элемента SCRIPT к дереву DOM документа. В некоторых веб-браузерах можно повторно использовать элементы SCRIPT для загрузки новых скриптов, а других нет.

Проблемой является вызов функции-обработчика и передача ему параметров. В спецификации HTML, к сожалению не специфицированы события, вызывающиеся по загрузке скрипта (аналогично body.onload) и эти события у различных версий веб-браузеров будут разные.

Вы, наверное, уже заждались кода, решающего эти проблемы. Вот он. Некоторые подробности обсудим далее.


function sendScriptRequest(url, httpParams, callback, callbackArgsArray) {
var currentScript = document.createElement("SCRIPT");
if (httpParams)
httpParams="?rand=" + Math.random() + "&" + httpParams;
else
httpParams="?rand=" + Math.random();
currentScript.ajax_readyState = false;
currentScript.onload = scriptCallback(currentScript, callback, callbackArgsArray);
currentScript.onreadystatechange = scriptCallback(currentScript, callback, callbackArgsArray);
currentScript.src = url + httpParams;
document.getElementsByTagName("script")[0].parentNode.appendChild(currentScript);
}function scriptCallback(currentScript, callback, callbackArgsArray){
return function() {
if (currentScript.ajax_readyState)
return;
if (! currentScript.readyState || currentScript.readyState == "loaded" || currentScript.readyState == "complete") {
currentScript.ajax_readyState = true;
callback.apply(currentScript, callbackArgsArray)
currentScript.parentNode.removeChild(currentScript);
}
}
}
К запросу добавляется параметр rand=Math.random(). Это необходимо, если скрипты генерируются динеамически и Вам необходимо избежать использование кэшированных скриптов. Если скрипты статические - можно удалить этот параметр.

К нерешенной проблеме относится то, что ответом на запрос является выполнение кода. И если Вам необходимо получить его в виде строки вроде responseText, Вам придется в генерируемом сервером скрипте присвоить єто значение переменной, например:

var responseText = "abc123" ;

Тогда вызов функции может быть таким


sendScriptRequest("http://test123.com", "a=1&b=2",myCallback, ["test123"]);
function(a) {
alert(responseText); // это переменная из загружаемого скрипта var responseText = "abc123" ;
alert(a) ; этот параметр задается при вызове функции как ["test123"]
}

Более подробно об этом и многом другом Вы можете прочитать в моей книге Овчаренко А. Ajax на примерах

http://www.dhtmlgoodies.com/index.html

По указанной ниже ссылке расположен небольшой учебник о том, как интегрировать AJAX в компоненты Joomla CMS, а также размещен демо-компонент, показывающий, как это делается на практике.

Учебник по интеграции xAJAX в Joomla CMS 1.0.x

• календарь
• меню
• дерево
• wysiwyg-редактор
• слайдер
• часы
• окна
• эффекты интерактивного скрытия, перемещения, изменения цвета элементов
• импорт содержимого из внешнего файла на сервер
• ну и еще всяческие примочки на Аяксе.

Есть онлайн-демо.

Все это в пакете Zapatec Suite. Посмотреть и скачать можно здесь: http://www.zapatec.com

Содержание

1 Что такое AJAX?
2 Шаг 1 — Как послать HTTP запрос
3 Шаг 2 — Обрабатываем HTTP ответ
4 Шаг 3 — Простой пример
5 Шаг 4 — Работа с XML ответом

Что такое AJAX?

Ajax означает Асинхронный JavaScript и XML. В основе технологии лежит использование нестандартного объекта XMLHttpRequest(), необходимого для взаимодействия со скриптами на стороне сервера. Объект может как отправлять, так и получать информацию в различных форматах включая XML, HTML и даже текстовые файлы. Самое привлекательное в Ajax — это его асинхронный принцип работы. С помощью этой технологии можно осуществлять взаимодействие с сервером без необходимости перезагрузки страницы. Это позволяет обновлять содержимое страницы частично, в зависимости от действий пользователя.

Две особенности, которые мы рассмотрим:

* Отправление запросов серверу без перезагрузки страницы
* Работа с XML документами

Шаг 1 — Как послать HTTP запрос

Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введен в Internet Explorer как объект ActiveX, называемый XMLHTTP. Позже в Mozilla, Safari и другие броузеры был введен класс XMLHttpRequest, который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.

В результате, чтобы создать кросс-броузерный объект требуемого класса, вы можете сделать следующее:

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

(В целях наглядности код выше является немного упрощенным. Более жизненный пример будет рассмотрен в шаге 3 этой статьи)

Некоторые версии некоторых броузеров Mozilla не будут корректно работать, если ответ сервера не содержит заголовка XML mime-type. Чтобы решить эту проблему вы можете использовать вызовы дополнительных методов для переопределения заголовка полученного от сервера, если он отличен от text/xml.

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

Далее вам необходимо решить, что вы будете делать после получения ответа сервера. На этом этапе вам необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это делается путем присваивания свойству onreadystatechange имени JavaScript функции, которую вы собираетесь использовать:

http_request.onreadystatechange = nameOfTheFunction;

Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете ее. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:

http_request.onreadystatechange = function(){
// какой-нибудь код
};

Далее, после того как вы объявили что будет происходить после получения ответа, вам необходимо сделать запрос. Вы должны вызвать методы класса open() и send():

http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);

* Первый параметр вызова функции open() — метод запроса HTTP (GET, POST, HEAD или любой другой метод, который вы хотите использовать). Используйте методы в соответствии с HTTP стандартами; иначе некоторые броузеры (такие как Firefox) могут не обработать запрос. Информация о допустимых HTTP запросах доступна по адресу спецификации W3C
* Второй параметр — URL запрашиваемой страницы. Из соображений безопасности вы не можете запрашивать страницы сторонних доменов. Убедитесь, что вы используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку 'доступ запрещен' при вызове функции open(). Типичной ошибкой при доступе к сайту через site.ru является подача запросов на www.site.ru.
* Третий параметр указывает, является ли запрос асинхронным. Если он TRUE, то выполнение JavaScript продолжится во время ожидания ответа сервера. В этом и заключается асинхронность технологии.

Параметром метода send() могут быть любые данные, которые вы хотите послать на сервер. Данные должны быть сформированы в строку запроса:

name=value&anothername=othervalue&so=on

Заметьте, что если вы хотите отправить данные методом POST, вы должны изменить MIME-тип запроса с помощью следующей строки:

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Иначе сервер проигнорирует данные отправленные методом POST.

Шаг 2 — Обрабатываем HTTP ответ

Отправляя запрос, вы указали имя функции JavaScript, обрабатывающей ответ.

http_request.onreadystatechange = nameOfTheFunction;

Давайте посмотрим, что эта функция должна делать. Во-первых, функция должна проверять статус запроса. Если значение переменной статуса 4, то это означает, что ответ от сервера получен и его можно обрабатывать.

if (http_request.readyState == 4) {
// все в порядке, ответ получен
} else {
// все еще не готово
}

Полный список значений кодов readyState такой:

* 0 (uninitialized)
* 1 (loading)
* 2 (loaded)
* 3 (interactive)
* 4 (complete)

(Источник)

Следующее, что нужно проверить — это статус HTTP-ответа. Все возможные коды можно посмотреть на сайте W3C. Для наших целей нам интересен только код ответа 200 OK.

if (http_request.status == 200) {
// великолепно!
} else {
// с запросом возникли проблемы,
// например, ответ может быть 404 (Не найдено)
// или 500 (Внутренняя ошибка сервера)
}

Теперь, после проверки состояния запроса и статуса HTTP-ответа, вы можете делать с данными, полученными от сервера, все что угодно. Есть два способа получить доступ к данным:

* http_request.responseText – возвращает ответ сервера в виде строки текста.
* http_request.responseXML – возвращает ответ сервера в виде объекта XMLDocument, который вы можете обходить используя функции JavaScript DOM

Шаг 3 — Простой пример

Давайте соберем все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ test.html, который содержит текст "I'm a test." и выведет содержимое файла в диалоговом окне.


<script type="text/javascript" language="javascript">
function makeRequest(url) {
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// Читайте ниже об этой строке
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Не вышло Невозможно создать экземпляр класса XMLHTTP ');
return false;
}
http_request.onreadystatechange = function() { alertContents(http_request); };
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents(http_request) {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('С запросом возникла проблема.');
}
}
}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest('test.html')">
Сделать запрос
</span>

В этом примере:

* Пользователь нажимает на ссылку "Сделать запрос" в броузере;
* Это вызывает функцию makeRequest() с параметром test.html — именем HTML файла;
* Посылается запрос, после чего (onreadystatechange) выполнение передается alertContents();
* alertContents() проверяет получен ли ответ и все ли с ним в порядке, после чего содержимое файла test.html выводится в диалоговом окне.

Вы можете попробовать пример в действии здесь, а сам тестовый файл можно посмотреть здесь.

Замечание: Строка http_request.overrideMimeType('text/xml'); вызовет ошибки в консоли JavaScript в Firefox 1.5 или более позднем, как описано в https://bugzilla.mozilla.org/show_bug.cgi?id=311724, если страница вызванная с помощью XMLHttpRequest не является правильным XML (например, если это обычный текст). На самом деле это корректное поведение.

Замечание 2: Если вы посылаете запрос не на статический XML-файл, а на серверный скрипт, возвращающий XML, то нужно установить некоторые заголовки ответа, если вы планируете сделать вашу страницу работоспособной в Internet Explorer помимо Mozilla. Если вы не установите заголовок Content-Type: application/xml, IE будет сообщать об ошибке JavaScript, 'Object Expected', после строки, где вы пытаетесь получить доступ к XML элементу. Если вы не установите заголовок Cache-Control: no-cache броузер будет кэшировать ответ и никогда не будет повторно отправлять запрос, что сделает отладку весьма «забавной».

Замечание 3: Если переменная http_request используется глобально, то конкурирующие функции, вызывающие makeRequest() могут конкурировать друг с другом, вызывая состязания. Объявление переменной http_request локально в функции и передача ее в alertContent() предотвращает состязания.

Замечание 4: При привязывании функции обратного вызова к onreadystatechange нельзя указывать аргументов. По этой причине не работает следующий код:

http_request.onreadystatechange = alertContents(http_request); // (не работает)

Таким образом, для успешной регистрации функции, вы должны передать ей аргументы косвенно через анонимную функцию или используя http_request как глобальную переменную. Вот пример:

http_request.onreadystatechange = function() { alertContents(http_request); }; //1 (одновременный запрос)
http_request.onreadystatechange = alertContents; //2 (глобальная переменная)

Первый способ позволяет делать несколько запросов одновременно, а второй используется, когда переменная http_request является глобальной.

Замечание 5: В случае ошибки взаимодействия (например, если сервер упал), при попытке доступа к переменной .status метода onreadystatechange будет сгенерировано исключение. Убедитесь, что if...then заключено в try...catch. (См. https://bugzilla.mozilla.org/show_bug.cgi?id=238559).

function alertContents(http_request) {
try {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('С запросом возникла проблема.');
}
}
}
catch( e ) {
alert('Произошло исключение: ' + e.description);
}
}
<strong>Шаг 4 — Работа с XML ответом</strong>

В предыдущем примере, после того как был получен ответ на HTTP-запрос мы использовали responseText запрашиваемого объекта, который содержал данные файла test.html. Теперь давайте попробуем использовать свойство responseXML.

Прежде всего, давайте создадим правильный XML документ, который мы будем запрашивать. Документ (test.xml) содержит следующее:

< ?xml version="1.0" ?>

I'm a test.


В скрипте нам всего лишь необходимо заменить строку запроса на:

...
onclick="makeRequest('test.xml')">
...

Далее в alertContents() нам нужно заменить строку alert(http_request.responseText); на:

var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

Этот код берет объект XMLDocument, возвращаемый responseXML и использует методы DOM для доступа к данным, содержащимся в документе XML. Посмотреть test.xml можно здесь, а обновленный скрипт здесь.

Чтобы узнать больше о методах DOM, посмотрите реализация DOM в Mozilla.

Источник: http://developer.mozilla.org

На страницах вашего сайта содержится множество специализированных терминов. Когда пользователь просматривает сайт, у него могут возникать вопросы касательно этих терминов. Как сделать так, чтобы посетитель сайта по мере возникновения вопросов мог незамедлительно получать на них ответы? Раньше термины на страницах сайта оформлялись как ссылки и пользователь при желании мог кликать по ним и получать окно с контекстной подсказкой. Это подход достаточно неуклюжий, он отнимает у пользователя слишком много времени - на то, чтобы кликнуть по ссылке, дождаться загрузки окна и затем закрыть окно. В эпоху AJAX мы можем быть ближе к пожеланиям пользователей. Мы можем сделать так, чтобы уже при наведении мыши на термин незамедлительно появлялось сообщение с подсказкой и как только курсор мыши сдвинут с термина, сообщение исчезало. Наличие этого сервиса не отразится на объеме страниц сайта. При запросе контекстной подсказки Java Script будет обращаться к внешнему словарю, получать содержание и отображать его.

Метод получения информации по неявному запросу может найти применение не только в словаре терминов. Обращали ли вы внимание на ссылки с двойным подчеркиванием в таких проектах как hotscripts.com и devarticles.com? Это контекстная реклама на основе движка IntelliTXT компании Vibrant Media. При наведении курсора мыши на подобную ссылку появляется окно с рекламным предложением на соответствующую тему. Эта технология уже получила название in-text advertising.

Все чаще и чаще подобный метод применяется и на новостных порталах. Посетители видят на главной странице портала лишь заголовки новостей. Однако при наведении курсора мыши на заголовок новости они получают ее краткое описание. Таким образом, на главной странице портала можно вместить куда как больше новостей. Посетитель портала увидит заголовки и для того, чтобы получить анонсы новостей, ему будет достаточно пробежаться курсором мыши по заголовкам.

Давайте теперь рассмотрим, каким образом реализуется контекстная подсказка с помощью AJAX. Программисту, освоившему этот метод, не составит труда заставить портал комментировать новости по запросу или же написать модуль in-text advertising.

Итак, очевидно нам следует позаботиться об окне сообщения, того самого, которое будет появляться каждый раз, когда посетитель наводит курсор на термин. Для того, чтобы окно появлялось и исчезало мгновенно, следует поместить его на скрытом DIV.


<div id="InstantMessage" class="instant_message"> </div>

Для простоты эксперимента мы можем оформить его в стиле системных сообщений MS Windows.


<style>
.instant_message { padding: 5px; font-size: 12px; font-family: Arial; visibility: hidden;
position: absolute; width: 240px; border: outset 2px #FFFFFF; background: #D4D0C8}
.instant_message a { width: 240px; padding: 2px 17px; color: black; text-decoration: none;
cursor: default}
.instant_message a:hover {color: #ffffff; background: #0A246A}
</style >


Окно должно появиться в тот момент, когда посетитель навел курсор мыши на термин и исчезнуть, когда курсор мыши будет за пределами термина. Причем, в тот самый момент окно должно содержать уже не пробел, а текст определения термина. Таким образом, мы должны поместить термины в тексте документа в inline тег, поддерживающий события onMouseOver и onMouseOut. Первому событию следует назначить функцию JavaScript, которая получит определение термина, поместит его в окно сообщения и покажет окно. Второму событию требуется назначить функцию, которая просто скроет окно сообщения.


<a onmouseover="getDefinition('термин', event);"
onmouseout="hideMessage();">термин</a>


В параметре функции, отображающей окно (getDefenition) сообщения надо указать термин. Этот термин будет использован для запроса текста определения посредством AJAX. Так как при показе окна нам потребуется его позиционировать под курсором мыши для поддержки Gecko-базированых браузеров, в эту функцию также следует передать параметр event. Функция для сокрытия окна (hideMessage) не требует каких-либо параметров.

Теперь наша задача - при вызове функции getDefinition заставить JavaScript позиционировать окно сообщения.

function adjustMessage(evt) {
MessageObj = document.getElementById('InstantMessage');
if (isThisMozilla) event=evt;
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < MessageObj.offsetWidth)
MessageObj.style.left = document.body.scrollLeft +
event.clientX - MessageObj.offsetWidth;
else
MessageObj.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < MessageObj.offsetHeight)
MessageObj.style.top = document.body.scrollTop + event.clientY -
MessageObj.offsetHeight;
else
MessageObj.style.top = document.body.scrollTop + event.clientY;
MessageObj.innerHTML = 'Loading...';
MessageObj.style.visibility = "visible";
}

Итак, мы имеем окно сообщения, рапортующее о загрузке данных. Теперь следует выполнить запрос к контроллеру за определением термина. Вы можете написать собственные функции для обслуживания AJAX запросов. Но если вы только начинаете работать с AJAX, я могу порекомендовать вам готовую библиотеку от Yahoo. В этом случае запрос будет выглядеть так:


function getDefinition(term,evt){
adjustMessage(evt);
var request = YAHOO.util.Connect.asyncRequest('POST',
'http://адрес_контроллера', callback, 'term='+term);
}


Раз мы запрашиваем контроллер, очевидно, нам надлежит его написать. В общем случае, это самая простая часть. Задача контроллера - вернуть описание термина, переданного в POST. Каким бы языком программирования мы не пользовались при написании контроллера, нам достаточно выполнить несколько простейших операций.

* соединиться с базой данных
* выполнить SQL запрос для получения определения термина
* отобразить на консоль результат в следующем виде:

{
"errormsg" : "в случае ошибки ее код",
"content" : "текст определения"
}

Это структура данных, известная как JSON. Она воспринимается JavaScript в явном виде, как < родная>. В случае использования AJAX-библиотеки YAHOO ответ контроллера обслуживается следующей конструкцией

var handleSuccess = function(o){
if(o.responseText !== undefined){
showMessage(o.responseText);
}
};
var handleFailure = function(o){
if(o.responseText !== undefined){
showMessage("Connection Error");
}
};
var callback =
{
success:handleSuccess,
failure:handleFailure,
argument:['foo','bar']
};

Нам осталось лишь описать функцию showMessage(), которая помещает принятый текст определения в окно сообщения
function showMessage(json) {
var respondStructure = eval( '(' + json + ')' );
MessageObj.innerHTML = respondStructure.content;
return false;
}

Как вы понимаете, для сокрытия окна сообщения потребуется лишь изменить атрибут объекта

function hideMessage(){
var MessageObj=document.getElementById('InstantMessage');
MessageObj.style.visibility="hidden";
}

Когда вы будете опробовать этот пример, едва ли вы встретитесь с проблемами под браузером MS IE, однако, в FireFox вы можете обнаружить мерцание окна сообщения. Это связано с тем, что FireFox своеобразно обслуживает события onMouseOver/onMouseOut. Впрочем, эту проблему можно решить путем расстановки флагов задержки в функциях обслуживания этих событий.

Скрипты приведенного здесь примера можно загрузить здесь

Работу примера можно увидеть здесь http://www.phpclasses.org/browse/package/3505.html
Информация об авторе.

Дмитрий Шейко

http://www.cmsdevelopment.com

Ведущий программист Red Graphic Systems

Занят разработкой программного обеспечения с 1987 года. Начиная с 1998 года опубликовал более 50 технических статей в специализированных изданиях. С 2001 года разрабатывает архитектурные решения и инструментальные средства для управления содержанием (Content Management, CMF, ECM). В 2004 году разработал и опубликовал спецификацию универсального языка для разработчиков CMS XML Sapiens

Установка:

1. Скачайте плагин и разархивируйте его.
2. Закачайте файл Google-AJAX-Search.php в папку wp-content/plugins/
3. В админ. панели активируйте плагин Google Ajax Search
4. После активации появятся настройки переходим к ним:

• Получите API key здесь http://code.google.com/apis/ajaxsearch/signup.html
• Настройте остальные параметры

5. Вставьте в шаблон wp этот код <?php gajaxsearch(); ?>, обычно можно использовать sidebar.

Пример поиска можно увидеть в боковой панели.

Требования: MochiKit 1.3 и выше,

HTML Canvas: Safari 2+, Opera 9+, Firefox 1.5+, IE 6

SVG: Opera 9+, Firefox 1.5+ (примечание), IE6 с Adobe SVG

Примечание: В Firefox 1.5+ на Linux и Windows поддерживается, в Firefox 1.5+ на Mac не прорисовывается SVG.

– Показывать внутренние страницы

– Создавать загрузку файлов

– Создавать окна для входа на сайт, такие как настройка, контакты и т.п.

– Показывать/прослушивать видео, аудио файлы

Какие браузеры поддерживает:

Safari
Firefox 1.5 и выше
Internet Explorer 5.5 и выше
Opera 8.5 и выше

Скачать напрямую