Суть использования AJAX заключается в передаче данных на сервер без перезагрузки страницы - что очень удобно для пользователей. Сегодня мы напишем простейший пример использования этого в виде digg-like голосования, без использования js-фреймворков (библиотек типа jQuery или MooTools). Это теоретическая статья для желающих ознакомиться с технологией AJAX, для прикладного использования существуют готовые скрипты и плагины.

Структура такова: на странице есть множество объектов с уникальным id (например, список постов). Для каждого из них нужно показать текущее количество голосов, а так же ссылки для голосвания за или против. При голосовании на сервер отправляется информация об id и типе голоса, данные добавляются в базу, высчитывается новый рейтинг и данные отправляются обратно на страницу, обновляя рейтинг (естественно, без перезагрузки страницы).

Начнем с основной функцией, реализующей асинхронную передачу данных (в разных источниках она выглдяит по разному и не всегда работает):

function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

Я не буду останавливаться на подробном разборе этой функции, это не так уж важно, главное что она работает.

HTML-код, 17 - идентификатор объекта:

<div>
<a href="#" onclick="vote('rulez','17')">плюс</a>
<div id=votestatus17> 0 </div>
<a href="#" onclick="vote('sux','17')">минус</a>
</div>

Две ссылки для голосвания, хотя можно реализовать их как угодно - кнопками, картинками, главное сделать вызов нашей js-функции. В блоке votestatus[id] отображается текущий рейтинг и впоследствии обновленный (а так же статус загрузки).

А вот и основная функция, реализующая голосование:

function vote(type,id){
var req = getXmlHttp()  

req.onreadystatechange = function() {
	if (req.readyState == 4) {
	if(req.status == 200) {
document.getElementById('votestatus'  + id).innerHTML = req.responseText;
	}
	}

	}

req.open('GET', 'vote.php?type='+type+'&id=' + id, true);
req.send(null);
document.getElementById('votestatus'  + id).innerHTML = 'загрузка...';
}

Читаем код с конца Как только функция вызывается, на место текущего рейтинга помещается заглушка (можно вставить gif-картинку к примеру). Данные отправляются скрипту vote.php через GET параметры, а как только запрос выполнится - отправляет на страницу возвращенный скриптом ответ.

Сам скрипт vote.php индивидуален, но к примеру он может быть таким:

<?
$type=$_GET['type'];
$id=$_GET['id'];

/*
//Обновляем рейтинг в базе
if($type=="rulez") mysql_query("UPDATE posts SET votes=votes+1 WHERE id='$id'");
if($type=="sux") mysql_query("UPDATE posts SET votes=votes-1 WHERE id='$id'");

//Получаем новый рейтинг и выводим его
$row=mysql_fetch_array(mysql_query("SELECT votes FROM posts WHERE id='$id'"));
echo $row['votes'];
*/

//А чтобы тестовый пример работал
echo rand(1,10);
?>

Естественно, сюда стоит добавить защиту от накрутки (по IP), красиво оформить кнопки голосования, блокировать (или просто скрывать) их после нажатия и т.д., но это выходит за рамки статьи.

Демо

Вот в принципе и всё

Допустим, у нас есть блок данных, который нужно показать только по клику по ссылке:

<div id="hidden_content" style="display: none;">скрытый контент</div>

Первый способ: jQuery
Очень простой и функциональный способ, однако придется подключать дополнительную библиотеку.

<a onclick="$('div#hidden_content').slideToggle('slow')">Показать/Скрыть блок</a>

В настройках можно указать скорость появления блока (slow/fast). Повторный клик скрывает блок.

Подробнее можно прочитать в документации jQuery (кликов:415).

Второй способ: чистый JavaScript
Занимает меньше места, однако не так функционален.
<script language="javascript" type="text/javascript">
function toggle(el) {
el.style.display = (el.style.display == 'none') ? '' : 'none'
}
</script>


И непосредственно сама ссылка:

<a onclick="toggle(hidden_content)">Показать/Скрыть блок</a>

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

Данная проблема затрагивает не только пользователей, которые захотят прийти еще раз к вам на сайт, она также касается больших сложности либо полной невозможности проиндексировать внутренние страницы сайта поисковыми машинами так, чтобы в в результатах поисковых запросов можно было выдавать корректную ссылку на ресурс (прим.: данная проблема очень схожа с проблемой frame'ов, поднимаемой несколько лет назад: поисковые машины замечательно индексировали сайт, но в качестве ссылки выдавали главную страницу, и не всегда было понятно, как же на этом сайте получить ту информацию, за которой пришел. Я считаю, что данная проблема сейчас не актуальна, ибо сами ссылки по сайту прописываются статичными, если при переходе по ним пользователь получается какую- то новую информацию, либо вообще не приписываются, если на них предполагается «повесить» динамические обработчики).
Решение первое: используйте специальную AJAX-библиотеку
В предыдущей статье делался обзор методов, которые позволяют сохранять историю в браузере, часть из них позволяет работать и с закладками.
Прим.: суть решения: при каждом вызове AJAX к URL'у страницы в качестве якоря добавляется флаг, являющийся ключом текущей страницы. При добавлении ее в избранное, страница добавляется вместе с якорем. Затем, при открытии страницы приложение проверяет якорь-флаг и перегружает требуемое содержание.
? Подход Mike Stenhouse'а. Демо-версия предельна проста и работает почти во всех браузерах. Демо-версия этого решения можно посмотреть по этой ссылке и проследить, что происходит с URL'ом страницы, когда вы кликаете по ссылкам, затем сохранить ссылку как закладку. При открытии закладки происходит перегрузка содержание.
? Подход Brad Neuberg'а. Демо-версия. Эта библиотека пытается быть максимально кроссбраузерной без лишнего усложнения кода.
? Подход mikage'а с использованием библиотеки jQuery можно посмотреть здесь.
Использование скрытых iframe'ов в данном случае, как я считаю, совсем не оправдано, ведь в закладки попадает та же основная страница, а не та, которая грузится в iframe. Да и как было справедливо замечено http://bersz.habrahabr.ru/http://bersz.habrahabr.ru/bersz, у некоторых iframe'ы могут автоматически «резаться» как рекламосодержащие.
Чуть дальше поясняется, почему первое решение не всегда подходит.
Решение второе: используйте специальные ссылки
Хотя не существует идеального решения, которое бы обеспечивало пользователя ссылкой на текущую страницу со всеми GET параметрами, можно частично преодолеть эту проблему за счет ухудшения поддержки самой возможности добавлять страницу в закладки. Например, этот подход используется в Google Maps. Если пользователь ищет какой-либо адрес, то URL страницы остается тем же самым (http://maps.google.com), однако при нажатии на ссылку "Link to this page", запрошенный URL преобразуется, чтоб отображать текущее местоположение уже с учетом GET параметров (например, http://maps.google.com/maps?f=q&hl=en&geocode=&q=Moscow&ie=UTF8&z=17&om=1).
Этот подход позволяет, на самом деле, создать горизонтальную интерпретацию вертикальной ссылки, которая бы вела на текущую страницу. При использовании этого решения следует иметь в виду некоторые аспекты:
? предварительное добавление в закладки — этот подход не будет работать, если пользователь добавил данную страницу в закладки перед тем, как кликнул по специальной ссылке (прим.: имеется в виду, наверное, то, что при изменении якоря у страницы браузер не может ее сохранить как новую в закладках, это справедливо для IE, у него не учитывается различие закладок по якорям, однако, в Firefox 2 и Opera 9 каждая страница с другим якорем сохраняется как новая закладка);
? кодирование URL — если данные, описывающие текущее состояние, содержат специальные символы (например, символы табуляции, проценты, амперсанды), они должны быть закодированы (URL encoded), когда создается ссылка для закладки;
? приватные данные — если данные для текущего состояния содержат какую-либо приватную информацию (например, пароль пользователя), не следует их включать в качестве GET параметров строки запроса. (Однако, если данные для текущей страницы содержат приватную информацию, то, в первую очередь, не стоит вообще делать возможным сохранение такой страницы в закладках.)

Для того, чтобы начать работу с технологией Atlas необходимо загрузить соответствующее расширение для Visual Studio 2005. Сделать это можно с сайта фирмы Microsoft (скачать).
После установки данного расширения необходимо создать новый Web проект, выбрав шаблон «ASP.NET ‘Atlas’ Web Site»

После создания базы данных и заполнения ее какими-нибудь данными можно приступать к созданию веб-службы, необходимой для получения информации из базы данных в формате XML.
Для создания веб-службы необходимо выделить в окне «Solution Exploler» созданный проект, и после этого в меню Website выбрать Add New Item. В появившемся окне выбрать шаблон Web Service, ввести имя WebAccess.asmx, и убрать галочку Place code in separate file.

Теперь добавим код нашей веб-службы:

<%@ WebService Language="VB" Class="WebAccess" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient
Imports System.Collections

_
_
Public Class WebAccess
Inherits System.Web.Services.WebService
Public Structure EmployeeLittleRec 'Структура для отправки данных об
учетных записях
Dim Name As String 'Имя учетной записи
Dim ID As Integer 'Код учетной записи
End Structure

Private Structure EmployeeRec 'Структура для получения дополнительно
информации об учетной записи
Dim Name As String 'Имя учетной записи
Dim Password As String 'Пароль учетной записи
Dim DateBegin As Date 'Дата создания
Dim DateEnd As Date 'Дата удаления
Dim Comments As String 'Комментарии
End Structure
'''
''' Функция получения дополнительно информации по коду учетной записи
'''
'''
Код учетной записи ''' Возвращает HTML код содержащий информацию об учетной
записи
_
Public Function GetFullEmployeeInfo(ByVal IDEmployee As Integer) As
String
Dim Rec As EmployeeRec
Dim ReturnStr As String
Dim con As New SqlConnection("workstation id=Test;packet
size=4096;Data Source=crash;Initial Catalog=WebAccess;user id=sa") 'Создаем
соединение с базой данных
con.Open() 'Открываем соединение (здесь конечно необходимо выполнить
перехват исключений, но данная статья не об этом)
Dim command As New SqlCommand("SELECT * FROM sprEmployee WHERE
IDEmployee=" & CStr(IDEmployee), con) 'Создаем запрос к нашей таблице
Dim dbReader As SqlDataReader
dbReader = command.ExecuteReader() 'Создаем SqlDataReader для чтения
данных из таблицы
If dbReader.Read Then
Rec.Name = CStr(dbReader("Name"))
Rec.Password = CStr(dbReader("Password"))
Rec.DateBegin = CDate(dbReader("DateBegin"))
If Not IsDBNull(dbReader("DateEnd")) Then
Rec.DateEnd = CDate(dbReader("DateEnd"))
Else
Rec.DateEnd = Nothing
End If
Rec.Comments = CStr(dbReader("Comments"))
ReturnStr = String.Format(" Имя: {0}

Пароль: {1}
Дата подключения: {2}
Дата
отключения: {3}
Комментарии: {4}

",Rec.Name, Rec.Password,
Rec.DateBegin, Rec.DateEnd, Rec.Comments) 'Создаем код HTML который сразу же
будет выведен на страницу
Else
ReturnStr = "Ошибка при получении данных" 'Запись не была найдена
End If
con.Close()
con.Dispose()
Return ReturnStr
End Function
'''
''' Функция необходимая для получения списка учетных записей
'''
'''
Максимальное количество записей ''' Массив с информацией о записях
Public Function GetEmployee(ByVal Count As Integer) As
Generic.List(Of EmployeeLittleRec)
Dim sql As String
Dim ListRec As New Generic.List(Of EmployeeLittleRec) 'Создаем массив
Dim OneRec As EmployeeLittleRec
Dim ReturnStr As String = ""
Dim con As New SqlConnection("workstation id=Test;packet
size=4096;Data Source=crash;Initial Catalog=WebAccess;user id=sa")
con.Open() 'Соединяемся с базой данных
Dim command As SqlCommand
If Count > 0 Then 'Проверяем установлено ли количество выводимых записей
sql = String.Format("SELECT TOP {0} IDEmployee,Name FROM
sprEmployee", Count)
Else
sql = "SELECT IDEmployee,Name FROM sprEmployee"
End If
command = New SqlCommand(sql, con)
Dim dbReader As SqlDataReader
dbReader = command.ExecuteReader
Do Until Not dbReader.Read 'Заполняем массив учетных записей
OneRec.ID = dbReader("IDEmployee")
OneRec.Name = dbReader("Name")
ListRec.Add(OneRec)
Loop
con.Close()
con.Dispose()
Return ListRec 'Возвращаем массив
End Function
End ClassТеперь приступим к созданию веб-страницы для доступа к информации об учетных записях. Для этого, выделив в окне «Solution Exploler» созданный проект и выбрав в меню Website пункт Add New Item, задаем соответствующие параметры создаваемой странице

Шаблон – Web Form.
Name - AtlasDropDown.aspx.
Галочка Place code in separate file – снята

После создания веб-формы введем в нее код, необходимый для ее работы

<%@ Page Language="VB" %>

//

Теперь запустим созданный проект на выполнение.

Однако эти решения полностью написаны на javascript и исполняются на машине клиента. Цитируя некоторых именитых PHP разработчиков имеющих посредственные знания в javascript, что делает очень затруднительным использование этих библиотек в PHP приложениях. К счастью я натолкнулся на библиотеку xAJAX, которая полностью написана на PHP, который включает Ajax функции.

При использовании библиотеки xAJAX требуется ОЧЕНЬ мало знаний по javascript, однако при использовании других библиотек я бы сказал что требуются солидные знания javascript. Я полагаю что интеграция Prototype.js в библиотеку xAJAX сделала бы его еще лучше, и разработчикам пришлось бы сталкиваться с javascript еще меньше. Хорошо что все это планируется в новых версиях xajax. Учитывая все это, я полагаю xAJAX это наиболее подходящий выбор для PHP разработчиков, которые будут интегрировать в свои вебприложения Ajax.

Основные принципы xAJAX При начале работы с xAJAX вы должны привыкнуть к некоторым вещам. Мы должны увидеть в PHP коде xAJAX, некоторый вид циклического процесса, который содержит в себе события на стороне клиент и события на стороне сервера.

Мощь xAJAX заключается в том, что мы можем вызвать PHP функцию напрямую из клиентского окружения. Функции, описанные в бекенде (PHP функции на сервере) доступны во фронтенде (dhtml/javascript на стороне клиента). Очень мощный встроенный механизм. Хорошие новости для разработчиков – фактически 99% javascript генерируются автоматически посредством xajax. Давайте ознакомимся с начальными сведениями – из чего состоит xAJAX .

Я создал четыре различных примера, которые помогут понять различные способы применения xAJAX. Однако есть некоторые принципы относящиеся ко всем примерам. Давайте посмотрим что это за принципы:

Шаг 1: подключение класса – библиотеки xAJAX require_once("xajax.inc.php"); Мы всегда подключаем библиотеку xajax.

Шаг 2: Функция xajax на стороне сервера function makeBold($p_sArg) { $sOut = ''.$p_sArg.''; $objResponse is new xajaxResponse(); $objResponse->addAssign('my_element', 'innerHTML', $sOut); return $objResponse->getXML(); } Функция получает строковый параметр $p_sArg в качестве аргумента и возвращает его в тегах .

Первым делом мы инициализируем объект xajaxResponse который будет обрабатывать ответ на клиентской стороне. Вторым мы назначаем элемент HTML, который будет обновлятся посредством объекта xajaxResponse.

Метод xajaxResponse->addAssign() имеет 3 аргумента:

Значение id тега элемента HTML на нашей странице Свойство, которое мы хостим изменить на стороне клиента Данные, которые мы хотим передать на сторону клиента В заключении, мы возвращаем ответ используя метод xajaxResponse->getXML().

Эти действия ВСЕГДА совершаются на стороне сервера посредством функций Ajax functions. Но здесь я хочу рассказать немного больше о классе xajaxResponse. Кроме того о методе я хочу рассказать поподробней xajaxResponse->addAssign().

Я взял список ниже с домашней страницы xajax и добавил несколько пояснений.

addAssign($sTargetId,$sAttribute,$sData)

Назначает свойству ($sAttribute) элемента, с id равным $sTargetId новые данные ($sData).

В связи с этим мы можем заменять данные определенного элемента новыми, сгенерированными на сервере.

$objResponse->addAssign("contentDiv","innerHTML", "Some Text");

$objResponse->addAssign("checkBox1","checked","true");

addAppend($sTargetId,$sAttribute,$sData)

Добавляет после, данные ($sData) к свойству элемента ($sAttribute), с id равным $sTargetId. Это значит, что в содержание свойства элемента будет находится старое значение, после которого добавлен результат выполнения функции на стороне сервера.

$objResponse->addAppend("contentDiv","innerHTML", "Some Text");

addPrepend($sTargetId,$sAttribute,$sData)

Добавляет перед, данные ($sData) к свойству элемента ($sAttribute), с id равным $sTargetId.

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

$objResponse->addPrepend("contentDiv","innerHTML", "Some Text");

addReplace($sTargetId,$sAttribute,$sSearch,$sData) заменяет все вхождения поиска ($sSearch) данными ($sData) в свойстве ($sAttribute) элемента HTML с id = $sTargetId

$objResponse->addReplace("contentDiv","innerHTML", "text","text");

addClear($sTargetId,$sAttribute) Удаляет значение свойства($sAttribute) элемента HTML с id=$sTargetId

$objResponse->addClear("Input1","value");

addCreate($sParentId, $sTagname, $sId, $sType)

Добавляет элемент-потомок ($sTagName) существующего элемента с id= $sParentId, и назначает id элемента-потомка ($sId), также можно задать тип элемента потомка $sType.

$objResponse->addCreate("form1","input", "pass", "password");

addRemove($sElementId)

Удаляет элемент с id=$sElementId из вашего приложения

$objResponse->addRemove("div1");

addAlert($sMsg) Показывает предупреждение javascript c текстом = $sMsg $objResponse->addAlert("The server said: Hi!");

addScript($sJS) Выполняет код JavaScript, содержащийся в $sJS.

Этим мощным методом мы можем отсылать на сторону клиента для немедленного исполнения.

$objResponse->addAlert("var txt = prompt('get some text');");

Шаг 3: Для всего этого создаем оболочку. После установки одной или нескольких функций конечно же ничего не случается.

Мы должны сделать некоторые обязательные вещи:

$objAjax = new xajax(); $objAjax->registerFunction('makeBold');

$objAjax->processRequests();

Первым делом мы создаем экземпляр класса xajax. Этот обект будет обрабатывать все события. Вторым мы регистрируем функцию для объекта xAJAX, которую ранее создали.

Делаем это посредством метода xajax->registerFunction().

В заключении мы можем обработать запросы методом xajax->processRequests().

Вы удивитесь 'Ну и что мы с этого получили?'.

Остался только один шаг для того чтобы доставить до клиентской стороны всю мощь языка PHP. После создания функций и установки объекта xAJAX мы можем отправлять HTML с сервера. Теперь мы добавим xAJAX на страницу HTML, для этого используем простой код, который должен располагаться в теге :

$objAjax->printJavascript();

Теперь мы можем закончить нашу страницу и использовать функции которые мы описали на первых шагах, напрямую со стороны клиента. В Для завершения нашего примера нам нужно взять элемент HTML с ID = 'my_element':

I'm gonna have my ass kicked by xajax!(этот юмор переводить не буду)
Если мы добавим ссылку на страницу вызывающую наши функции с сервера, то они выделят текст жирным шрифтом без перезагрузки. Вид этой ссылки приведен ниже: Kick his ass! Ура, мы сделали это! Мы создали нашу первую AJAX ссылку. Щелкните по ней, чтобы увидеть магию AJAX. Как вы можете увидеть функции с сервера всегда вызывается посредством javascript функции с таким же именем, только с префиксом xajax_. В нашем примере мы вызываем xajax_makeBold().

Мы используем document.getElementById('my_element') для изменения содержания элемента HTML. Мы можем определить содержание этого элемента как заключенного в теги и . Двигаемся дальше Это всё? По основам, все! Это действительно легко. Конечно, немного больше вы узнаете, дочитав статью до конца, основные принципы вы уже получили. Теперь продемонстрируем мощь библиотеки и легкость использования в полнофункциональном приложении.

Демонстрации имеют полностью документированный код с понятными объяснениями, как это все работает. Поэтому если статья вас заинтересовала создайте мини сайт и посмотрите xAJAX в действии.

Посмотреть демо сайт!

И в заключении Если вы могли заметить, при прочтении этой статьи, что создание сайтов на AJAX не так сложно, как вы могли себе представить. Библиотека xAJAX сделана на границе Ajax и PHP, что позволяет писать приложения почти также легко как и на обычном PHP. Конечно, есть множество других библиотек, которые определенно стоит посмотреть. Я просто выбрал xajax потому что его можно непринужденно использовать, и при этом имеет такие большие возможности. Я надеюсь что эта статья будет для вас полезна.

Счастливо поAJAXить!

Обновлено: Дж. Макс Вилсон, создатель xajax сообщил прекрасную новость:

Привет. Я создатель php библиотеки xAJAX. Спасибо за презентацию (прим. перев. : автор проводил презентацию xAJAX)! Сейчас мы ведем сложную работу над новым релизом xAJAX. Мы выпускаем бета версию на следующей неделе. Новые изменения включают: Новая обработка ошибок: Ошибки, которые не являются критическими могут теперь скрываться и записываться только в лог файл или показываться пользователю в предупреждениях. ООП: Вы теперь можете регистрировать объекты и статические методы для вызова через xAJAX.

Эта особенность делает xAJAX легким для применения в различных ООП CMS-разработках (CMS – система управления сайтом). Локализация: xajax по умолчанию использует UTF-8, но мы добавляем возможность определять нужную вам кодировку. Регистрация внешних функций: вы можете теперь регистрировать функции во внешних файлах .php и xajax будет динамически включать файл и вызывать функцию только если она запрошена. Мы имеем сообщество разработчиков, использующих xajax.

Оригинал www.i-marco.nl/weblog/archive/2005/11/12/easy_ajax_for_the_masses_with
Автор: Марко Ван Хилкам
Перевод: Федоринов Григорий

Источник: www.myjoomla.ru

Библиотека xAjax создает функции JavaScript, которые являются оболочкой для PHP функций, которые вы можете вызывать с сервера из вашего приложения. Когда вызывается функция JavaScript то эта функция, которая является оболочкой для функции PHP использует объект XMLHttpRequest для асинхронного соединения с объектом xAjax на сервере, который вызывает соответствующую функцию PHP. После завершения этого действия, возвращается xAjax XML ответ от вызванной PHP функции. Возращенный XML содержит инструкции и данные, которые будут проанализированы специальными функциями JavaScript-овой части xAjax и использованы для обновления содержания вашего приложения.

Почему Вы должны использовать xAjax, а не другую библиотеку?

• Вы выберете эту библиотеку, так как она удовлетворит все ваши потребности при разработке вашего проекта.
• xAjax предлагает следующие возможности, которые вместе делают его уникальным и мощным инструментом:
• xAjax's уникальная система на javaScript, которая может анализировать возращенный XML и автоматически его обрабатывать согласно инструкциям находящимся в этом ответе. Т.к. xAjax обрабатывает все это, то вам не нужно отдельно писать отдельные функции на Javascript для того чтобы обрабатывать возвращенный XML.
• xAjax это объект ориентированный на создание отношений между программным кодом и данными для хранения кода хajax отдельно от другого программного кода. Так как это объектно-ориентированный код, то вы всегда можете добавлять свои функции в класс xAjaxResponse используя метод addScript().
• xAjax работает в Firefox, Mozilla, возможно что и в остальных родственных Mozilla браузерах, Internet Explorer, и Safari. Помимо обновления значений элементов (имеется в виду DOM) и innerHTML, xAjax также может быть использован для обновления стилей, css классов, значений чекбоксов и выпадающих списков, или каких либо других свойств элемента.
• xAjax может использовать одно и многоразмерные массивы, а также ассоциативные массивы из javascript в PHP как параметры ваших функций xAjax. В дополнение, если вы вводите объект javascript в функцию xAjax function, функция PHP будет получать ассоциативных массив, определяющий свойства этого объекта.
• xAjax предоставляет легкую асинхронную обработку формp. Используя метод javascript xAjax.getFormValues(), вы можете легко отправить массив данных в форме как параметры для асинхронной функции xAjax: xAjax_processForm(xAjax.getFormValues('formId');.
  Если действие совершилось совместно с элементом формы input под именем "checkbox[][]" и "name[first]" для того чтобы создать многоразмерные и ассоциативные массивы такие как если бы вы отправляли форму используя массив $_GET. Используя xAjax вы можете динамически подгружать дополнительный javascript для вашего приложения для того чтобы при его исполнении менялись свойства элемента DOM.
• xAjax автоматически сравнивает данные возвращенные из PHP функций с текущими значениями свойства элемента, который вы хотите изменить. Свойство изменяется только в том случае если это изменение актуально на данный момент. Это позволяет устранить мерцание, которое происходит если элемент обновляется каждый раз через определенные промежутки времени. Каждая функция зарегистрируется для того чтобы быть доступной через xAjax, который имеете различные типы запросов. Все функции по умолчанию используют POST за малым исключением GET. Это сделано для большей безопасности запросов.
• Если не определен запрашиваемый URI, xAjax пытается автоматически определить запрашиваемый URL скрипта. Алгоритм автоопределения xAjax достаточно универсален, так что он будет работать как на безопасном протоколе https:// так и на http:// и на нестандартных портах.
• xAjax перекодирует все свои запросы и ответы в кодировку UTF-8 таким образом он поддерживает большой спектр различных знаков и языков.
• xAjax был протестирован на различных языках в юникоде включая Испанский, Русский, Арабский. Почти весь javascript динамически подгружается через javascript расширения.
• xAjax может быть использован в шаблонном движке Smarty для создания переменной в smarty должен быть следующий код: $smarty->assign('xAjax_javascript', $xAjax->getJavascript()); Когда используете xAjax подставляйте в заголовок следующий тег {$xAjax_javascript}.

Источник: www.seotm.com

Исходные данные: есть сайт, переходы между страницами реализованы ajax`ом.

Задача:

а. Заставить кнопки Back и Forward (и все остальное что связано с history бразузера) работать как подобает.

б. Пользователи должны иметь ссылку на ТЕКУЩУЮ страницу, в не зависимости от того, сколько переходов было совершено. Если пользватель зашел на страницу А и перешел на странцу Б, он должен иметь ссылку на страницу Б, причем с минимальным включением мозга.

Решение:

Для начала решим вторую задачу:

Просто в лоб менять url в браузере не получится - произойдет переход. Обойти этот пунктик врядли получится - такое поведение жестко зашито в BOM (Browser Object Model) и любое отклонение от него есть баг. Единственная часть URL, которая может быть безболезненно изменна - это якорь. Им и займемся:

При каждом переходе меняем якорь страницы.

Т.е. если человек находится на странице /about/ и переходит на /shop/, то урл должен стать примерно таким: /about/#url=/shop/. Теперь пользователь может копировать ссылку из адресной строки и посылать ее друзьям.

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

<script type="text/javascript">
<!--
if(document.location.hash && document.location.hash.indexOf('url=') > -1) {
document.location = new String(document.location.hash).replace('#url=','');
}
-->
</script>

При этом код должен быть в заголовке страницы (между <HEAD> и </HEAD>) и не должен выноситься в .js-файл - тогда переход будет осуществляться ДО того как начнется прориосвка страницы.

Теперь пользователь, открывая в браузере страницу /about/#url=/shop/ будет перебрасываться на /shop/, т.е. задача б решена.

Теперь займемся основной задачей.

Основная сложность заключается в том, что браузеры по разному отрабатывают движение по history. Если FireFox и Opera воспринимают изменение якоря как отдельное событие в history, то IE их в упор не замечает. Также прибавляет хлопот практически не управляемый объект history.

FireFox и Opera:

При нажатии на Back / Forvard в адресной сторке либо меняется якорь либо осуществляется преход на прошлую страницу. Если переход, то никаких действий не требуется, если же меняется якорь, нужно это изменение отловить и переправить посетителя на нужную страницу.

В JS создаем глобальную переменную, в которую при открытии страницы и каждом ajax-переходе пишем текущий url (с якорем).

Добавляем таймер (setInterval(...)), который через каждую секунду проверяет соответствие этой переменной фактическому URL в браузере. Если не соответствует, осуществляем переход на тот, что указан в браузере.

Internet Explorer:

При нажатии Back/Forward происходит переход на предыдующую страницу, все изменения якоря игнорируются. Нам нужно заставить IE отработать все изменения якоря как отдельные переходы. Для этого:

В JS (или в PHP - не суть) проверяем браузер пользователя и, если это IE, добавляем скрытый IFRAME.

В папку /myajax/ кладем .htaccess, который перенаправляет все запросы несуществующих страниц на файл-обработчик. .htaccess должен содержать примерно следующее:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule (.*) index.php?qs=$1 [QSA]

Если mod_rewrite или .htaccess не доступны, можно реализовать аналогичную логику при помощи страницы 404.

При загрузке страницы, а также при каждом ajax-переходе в iframe загружаем URL вида: /myajax/наш_урл (т. е при переходе пользователя на страницу /about/ будет /myajax/about/). Это позволяет нам фиксировать переходы для IE. Кроме того, при нажатии Back переход осуществится не в основном документе, а в iframe.
В файле /myajax/index.php нам нужно создать JS-код, который при загрузке страницы будет проверять, соответствует ли его URL (за исключением /myajax/) тому что загружено в основном окне браузера. Если нет - осуществить переход. Реализация может выглядеть примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<script language="JavaScript" type="text/javascript">
<!--
function historyGo() {
if(window.parent) {
var parentUrl = '';
var newUrl = '<?=str_replace("/myajax/", "", $_SERVER["REQUEST_URI"]);?>';
var parentLoc = window.parent.location;
if(parentLoc.hash && parentLoc.hash.indexOf('url=')>-1) {
var sss = new String(parentLoc);
parentUrl = new String(sss.substr(sss.indexOf('url=')+4));
}
else {
parentUrl = new String(parentLoc.href.replace('http://'+parentLoc.hostname, ''));
}
parentUrl = parentUrl.replace('/myajax/', '');
if(parentUrl != newUrl) {
if(window.parent.document.changePage) {
window.parent.document.changePage(newUrl);
}
else {
window.parent.location.href = newUrl;
}
}
}
}
//-->
</script>
</head><body onload="historyGo()">&nbsp;</body></html>

Пробуем:

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

Источник: community.livejournal.com

Сегодня я написал простые плагины для Smarty, поддерживающие AJAX. Я не пытался разработать мощный фреймворк для веб-приложений,- просто хотелось дать идею, как можно интегрировать AJAX-технологию в Smarty. Но если у Вас есть любые предложения по улучшению системы, или Вы просто хотите отправить отзыв, оставьте комментарий на сайте.

На практике мне нужно несколько вещей от AJAX: обновить некоторые узлы DOM, отправить форму на сервер без перегрузки страницы, получить некоторые значения или выполнить вычисления на стороне сервера (возможно с использованием базы данных или других серверных ресурсов). Необходимо написать кучу кода JavaScript для реализации этих требований, даже несмотря на использование замечательной библиотеки JavaScript Prototype.

Я решил подружить Smarty и AJAX. Вот три плагина Smarty, которые были созданы: ajax_update, ajax_call, ajax_form. Ниже я опишу все эти плагины.

ajax_update

Эта функция Smarty может быть использована для обновления некоторых частей веб-страницы.
Пример использования:

<a href="#" mce_href="#" onclick="{ajax_update update_id='intro_content'
function='update_intro' params='page=about'}">О нас</a>

Возможные параметры:

url - URL для AJAX-запроса (если не указан URL, будет использован текущий)
method - метод запроса (по умолчанию get, может быть get или post)
update_id - ID элемента HTML для обновления
function - имя функции PHP, которая будет вызвана
params - URL-закодированные параметры

ajax_call

Эта функция Smarty может быть использована для вызова PHP-функции на стороне сервера и получения результатов ее вывода.
Пример использования:

<a href="#" mce_href="#" onclick="{ajax_call function='calculate'
params_func='calc_params' callback='calc_cb'}">Посчитать</a>

Возможные параметры:

url - URL для AJAX-запроса (если не указан URL, будет использован текущий)
method - метод запроса (по умолчанию get, может быть get или post)
function - имя функции PHP, которая будет вызвана
params - URL-закодированные параметры
callback - функция JavaScript, которая будет выполнена по завершении запроса
params_func - функция JavaScript, которая используется для вычисления параметров запроса на стороне клиента

ajax_form

Этот блок Smarty может быть использован для отправки веб-форм на сервер без перезагрузки страницы.

Пример использования:

{ajax_form method="post" id="form_register"}

Любой элемент формы может быть размещен здесь

{/ajax_form}

Возможные параметры:

url - URL для AJAX-запроса (если не указан URL, будет использован текущий)
method - метод запроса (по умолчанию get, может быть get или post)
params - URL-закодированные параметры
id - ID элемента формы
callback - функция JavaScript, которая будет выполнена по завершении запроса

Примеры

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

Источник: ajaxhelp.net

На страницах вашего сайта содержится множество специализированных терминов. Когда пользователь просматривает сайт, у него могут возникать вопросы касательно этих терминов. Как сделать так, чтобы посетитель сайта по мере возникновения вопросов мог незамедлительно получать на них ответы? Раньше термины на страницах сайта оформлялись как ссылки и пользователь при желании мог кликать по ним и получать окно с контекстной подсказкой. Это подход достаточно неуклюжий, он отнимает у пользователя слишком много времени - на то, чтобы кликнуть по ссылке, дождаться загрузки окна и затем закрыть окно. В эпоху 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. Впрочем, эту проблему можно решить путем расстановки флагов задержки в функциях обслуживания этих событий.

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

Источник: ajaxhelp.net

Одно из главных затруднений, с которым сталкиваются разработчики интерфейсов веб-приложений, состоит в том, что после того, как страница оказалась в браузере клиента, связь браузера с сервером заканчивается. Любое действие с элементом интерфейса требует повторного обращения к серверу с повторной загрузкой новой страницы. Из-за этого веб-приложение теряет свою элегантность и медленно работает. В данной статье я расскажу о том, как данную проблему можно решить с помощью JavaScript и объекта XMLHttpRequest.

Я уверен, что вам знакома традиционная модель интерфейса веб-приложений. Пользователь запрашивает страницу с сервера, которая на сервере создается, а затем пересылается браузеру. У данной страницы есть HTML-элементы, описывающие форму, в которую пользователь вводит данные. После этого пользователь отсылает данные на сервер и получает новую страницу, основанную на введенных данных, и процесс повторяется. Весь этот процесс определяется самой природой HTTP-протокола и отличается от того, как мы работаем с обычными приложениями, интерфейс которых неразрывно связан с программной логикой.

Возьмем простой пример ввода серийного номера в каком-либо Windows-приложении. Согласно правилам, после того, как вы закончите вводить замысловатый набор цифр и букв в поля, рядом с ними появится зеленая "галочка", означающая, что вы ввели правильный номер. Она появляется моментально, как результат логики "вшитой" в интерфейс. Как только вы закончили набирать номер, программа проверяет его и выдает ответ.

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

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

На сцене появляется JavaScript

Благодаря JavaScript определенное количество программной логики можно перенести в HTML-страницу, что позволит быстро реагировать на действия пользователя. Однако у этого решения есть один главный недостаток. Первая проблема заключается в том, что как только JavaScript попадает в браузер пользователя вместе со страницей, программная логика доступна для просмотра невооруженным глазом. В случае например с проверкой правильности введенного адреса e-mail это может быть и не страшно, но если проверка связана с серийным номером, алгоритм проверки становится доступным всем, кто скачал страницу, а это неприемлемо.

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

Объект XMLHttpRequest

Решением этой проблемы может стать объект XMLHttpRequest. Этот объект впервые был реализован компанией Microsoft в виде объекта ActiveX, но сейчас он доступен как встроенный объект во всех браузерах Mozilla и Safari. Этот объект позволяет JavaScript-у осуществлять HTTP-запросы к удаленному серверу без необходимости перезагружать страницу. По сути HTTP-запросы отправляются и получаются полностью за "кулисами" страницы, а пользователь их даже не замечает.

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

Начнем с основ

Из-за своей противоречивой истории объект XMLHttpRequest еще не является частью какого-либо стандарта (хотя нечто подобное уже было предложено в спецификации W3C DOM Level 3 Load and Save). Поэтому существует два отличных друг от друга метода вызова этого объекта в коде скрипта. В Internet Explorer объект ActiveX вызывается так:

var req = new ActiveXObject("Microsoft.XMLHTTP");

В Mozilla и Safari это делается проще (так как там это объект, встроенный в JavaScript):
var req = new XMLHttpRequest();

Разумеется из-за таких различий вам необходимо создавать в коде ветки, каждая из которых будет выполняться в зависимости от того, в каком браузере загружен скрипт. Существует несколько способов, как сделать это (включая различные мудрёные хаки и метод "условных комментариев"). Но я считаю, что лучше всего просто проверять в коде, поддерживается ли браузером тот или иной объект. Хорошим примером может служить код, взятый с сайта Apple, где выложена документация по этому объекту. Давайте им и будем пользоваться:

var req;
function loadXMLDoc(url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}

В этом коде особенно важно обратить внимание на свойство onreadystatechange.

Посмотрите, как ему присваивается значение функции processReqChange. Это свойство - хендлер события, которое запускается всякий раз, когда меняется состояние объекта req. Состояния обозначаются номерами с 0 (объект неинициализирован) по 4 (запрос выполнен). Важно это потому, что наш скрипт не будет ждать ответа от сервера, чтобы продолжить свою работу. HTTP-запрос будет сформирован и отослан на сервер, но скрипт будет выполняться дальше. Из-за того, что мы выбрали такой вариант поведения, нам нельзя просто в конце функции вернуть результат запроса, так как нам неизвестно, получили мы его к этому времени или нет. Для этого мы и предусмотрели функцию processReqChange, которая будет отслеживать состояние объекта req, и сообщит нам в нужное время, что процесс получения документа закончен, и мы можем идти дальше.
Для этого функции processReqChange требуется проверять две вещи. Первая - ждать, когда состояние объекта req изменится на 4 (означающее, что процесс получения документа с сервера закончен). Второе, это проверить HTTP-статус ответа. Вы знаете, что код 404 означает "файл не найден" и 500 - "произошла ошибка на сервере". Но нам нужен старый добрый код 200 ("все ОК"), который означает, что на сервере наш запрос был успешно выполнен. Если мы получили и состояние 4 и код 200, мы можем продолжать выполнение нашего скрипта и обрабатывать результаты, полученные от сервера. Разумеется в противном случае мы должны обработать все ошибки, например, если код ответа отличается от 200.

function processReqChange()
{
// only if req shows "complete"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
// ...processing statements go here...
} else {
alert("There was a problem retrieving
the XML data:\n" + req.statusText);
}
}
}

На практике

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

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

Форма

Это самая легкая часть работы - простая форма с полем для ввода "ника". К событию onblur мы привязываем наш скрипт проверки. Для того, чтобы вывести пользователю сообщение о результатах проверки, я вставил его в форму и спрятал с помощью CSS. Это более элегантный и вежливый способ, чем стандартное диалоговое окно функции alert().

<input id="username" name="username" type="text"
onblur="checkName(this.value,'')" />
<span class="hidden" id="nameCheckFailed">
This name is in use, please try another.
</span>

В CSS объявлены свойства класса hidden, а также еще одного класса error, который служит для вывода сообщений об ошибке.

span.hidden{
display: none;
}
span.error{
display: inline;
color: black;
background-color: pink;
}

Обработка введенных данных

Функция checkName служит для проверки данных, введенных пользователем форму. Задача функции - взять данные, решить, какому серверному скрипту эти данные отдать, вызвать другую функцию, которая сделает всю "грязную" работу с HTTP-запросами и ответами, и затем обработать ответ. Эта наша функция будет состоять из двух частей. Одна часть - берет данные из формы, а другая - обрабатывает ответ от сервера. Я объясню, зачем это сделано, чуть позднее.

function checkName(input, response)
{
if (response != ''){
// Response mode
message = document.getElementById('nameCheckFailed');
if (response == '1'){
message.className = 'error';
}else{
message.className = 'hidden';
}
}else{
// Input mode
url = 'http://localhost/xml/checkUserName.php?q=' \\
+ input;
loadXMLDoc(url);
}
}

Ответ обрабатывается просто - ответ, который мы получим от серверного скрипта, будет либо 1, либо 0. 1 означает, что такой "ник" уже кем-то используется. В зависимости от ответа наша функция меняет название класса сообщения об ошибке - оно либо показывается, либо прячется. Как понятно из кода, работу на сервере выполняет скрипт checkUserName.php.

Формирование HTTP-запроса и ответа

Как вы видели выше, работа с HTTP выполняется двумя функциями: loadXMLDoc и processReqChange. В первом практически ничего менять не надо, а во втором требуется кое-что поменять для работы с DOM-ом. Как вы помните, пока успешный результат выполнения запроса не будет передан функции processReqChange, мы не можем из этой функции вернуть какое-либо значение. Из-за этого нам требуется выполнять явный вызов функции из другого места кода, чтобы воспользоваться результатом. Вот почему функция checkName разбита на две части. Таким образом, главная задача функции processReqChange состоит в том, чтобы обработать XML-ответ, полученный от сервера, и передать определенное значение из этого ответа функции checkName. Мы не хотим вносить в эти функции какой-либо специфический код, так как эти функции могут использоваться и другими элементами страницы для обращения к серверу. Поэтому мы и не вписывали в функцию processReqChange имя функции checkName. Вместо этого мы решили, что сервер сам будет в своем ответе давать название функции, которая к нему обращалась.

<?xml version="1.0" encoding="UTF-8"
standalone="yes"?>
<response>
<method>checkName</method>
<result>1</result>
</response>
Разбор этого простого ответа выполняется без каких-либо проблем.
ПросмотретьРаспечатать?
function processReqChange()
{
// only if req shows "complete"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
// ...processing statements go here...
response = req.responseXML.documentElement;
method = response.getElementsByTagName('method') \\
[0].firstChild.data;
result = response.getElementsByTagName('result') \\
[0].firstChild.data;
eval(method + '(\'\', result)');
} else {
alert("There was a problem retrieving \\
the XML data:\n" + req.statusText);
}
}
}

Обратившись к свойству responseXML объекта XMLHttpRequest, мы получаем XML-ответ, пришедший от сервера, который мы затем разбираем с помощью DOM. Взяв из ответа название функции, которая требовала этот ответ, мы знаем, какой функции надо передать полученное значение. После того, как вы закончите тестирование, уберите условие else, чтобы скрипт не беспокоил пользователей лишним сообщением об ошибке.

Серверный скрипт

Последний элемент нашей мозаики - это серверный скрипт, который будет получать запрос, обрабатывать его и возвращать ответ в виде XML. В нашем примере скрипт будет обращаться к базе данных пользователей, чтобы определить, используется ли уже данный "ник" или нет. Для краткости в моем примере скрипт не использует базу данных, а просто проверяет два имени "Drew" и "Fred".

<?php
header('Content-Type: text/xml');
function nameInUse($q)
{
if (isset($q)){
switch(strtolower($q))
{
case 'drew' :
return '1';
break;
case 'fred' :
return '1';
break;
default:
return '0';
}
}else{
return '0';
}
}
?>

<?php echo '<?xml version="1.0" encoding="UTF-8"
standalone="yes"?>'; ?>
<response>
<method>checkName</method>
<result><?php
echo nameInUse($_GET['q']) ?>
</result>
</response>

Разумеется, ту же процедуру проверки надо предусмотреть и в том серверном скрипте, который будет выполняться, когда пользователь нажмет кнопку "Submit" на форме регистрации. Это на тот случай, если у него в браузере был отключен JavaScript, или пользователь намеренно ввел "ник", который уже используется. Кроме того на загруженных сайтах может так случиться, что во время выбора "ника" он был свободен, а на момент подачи его уже кто-то занял.

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

В заключение

Этот небольшой пример лишь слегка касается темы использования объекта XMLHttpRequest. Вот лишь некоторые примеры его использования: Google Suggest, где XMLHttpRequest используется для того, чтобы подсказать искомые слова, приложение Ta-da Lists, где данные подаются на сервере опять-таки с помощью XMLHttpRequest благодаря чему интерфейс работает очень быстро. Самое интересное здесь не том, чтобы заставить код работать, а в том, чтобы найти еще какие-либо интересные способы его использования.

Источник: ajaxhelp.net