Если вы когда-либо пользовались веб-клиентом Gmail или Google Maps, то замечали возможность проверки правописания и прокрутки по всему изображению, соответственно, без обновления страниц. AJAX — это технология, обрабатывающая операции в JavaScript и асинхронно запускающая операции серверной стороны, предоставляющие желаемый результат.
В основе технологии AJAX лежит объект XMLHttpRequest. Изначально он появился в Internet Explorer, а затем — в Mozilla/Safari. На момент написания этой статьи уже была поставлена 8-я совместимая версия Opera. Однако, Opera в свое время отличилась нестабильностью с точки зрения реализации XMLHttpRequest.
AJAX в действии
Действие AJAX легче всего показать на портальном сценарии: просмотр сообщений электронной почты. Большинство веб-порталов позволяют пользователям предварительно просматривать содержимое почтового ящика с основной страницы. Однако, чтобы просмотреть содержимое сообщения, необходимо отдельно щелкнуть на каждом сообщении, при этом страница должна обновляться каждый раз. На этом примере можно увидеть возможность осуществления более богатого поведения, подобно аналогичному в Outlook Express и Mozilla Thunderbird, при этом задействовав существующие веб-технологии AJAX.
На основе этого строится портлет, предоставляющий не только доступ к списку недавних сообщений, но также обеспечивающий предварительный просмотр самих сообщений -всех из главной страницы без необходимости их обновления.
Чтобы получить доступ к содержимому сообщения, нужен серверный компонент, предоставляющий доступ к сообщениям. В нашем примере есть простой сервлет в качестве имитатора, который показывает сообщения через точку с запятой в следующей последовательности: от кого, тема, дата и тело сообщения:
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
if ("1".equals(req.getParameter("message_id"))) {
resp.getWriter().println( "John Doe,Greetings,10 10-2005, Hi.I am doing good" ) ;
} else if ("2".equals(req.getParameter("message_id"))) {
resp.getWriter().println( "Joanna Doe,Hi,10-10-2005,Document is complete." );
} else if ("3".equals(req.getParameter("message_id"))) {
resp.getWriter().println("Joanna Doe,Hi,10-10-2005,Meeting is at 3.");
...
} else {
resp.getWriter().println( ",NA ,NA ,NA ,Nothing to display" );
} //end else
} //end service
Следующий пример на С# для ASP.NET. Функционально он аналогичен сервлету и приводим мы его лишь для того, чтобы убедить читателей, что для работы с AJAX не важно на каком языке написана ваша серверная часть.
public class service: System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
if (Request.Params["message_id"] != null)
{
switch (Request.Params["message_id"])
{
case "1":
Response.Write("John Doe,Greetings,10-10-2005,Hi.I am doing good");
break;
case "2":
Response.Write("Joanna Doe,Hi,10-10-2005,Document is complete.");
break;
case "3":
Response.Write("Joanna Doe,Hi,10-10-2005,Meeting is at 3.");
break;
}
}
else
{
Response.Write(",NA ,NA ,NA ,Nothing to display");
}
}
.....
}
В портале будет находиться окошко/портлет портала по просмотру почты с упрощенным списком входящих сообщений слева и панелью просмотра справа. Если щелкнуть мышью на сообщении слева, то на панели просмотра будет виден запрос к серверу и вывод текста сообщения на экран в реальном времени, в этом процессе задействован AJAX.
Создаем портлет для просмотра почты в Сети
Для начала необходимо создать веб-страничку, имитирующую типичный портлет для веб-почты, и встроить события onMouseOver JavaScript, запускающие вызовы AJAX
В этом случае события «onMouseOver» прилагаются к полям таблицы (ПТ) с именами отправителей. Выбор полей с данными и запуск событий для вызовов AJAX предназначены строго для иллюстративных целей:
<form name="inbox">
<table style="previewTable">
<thead id="tableHeader">
<tr>
<td>From</td>
<td>Subject</td>
</tr>
</thead>
<tbody>
<tr class="even">
<td onMouseOver="displayMessageBody(1)">John Doe</td>
<td>Greetings</td>
</tr>
<tr>
<td onMouseOver="displayMessageBody(2)">Joanna Doe</td>
<td>Status of the report</a></td>
</tr>
<tr class="even">
<td onMouseOver="displayMessageBody(3)">Jim Doe</td>
<td>Meeting is today</td>
</tr>
...
</tbody>
</table>
</div>
<div id="preview">
<input id="messageBody" class="message" type="textarea" READONLY value=""/>
</div>
</form>
Обратите внимание на то, что поле ввода «messageBody» — единственное, которое будет наполнено методом displayMessageBody, принимающим ID сообщения как параметр. Вызов AJAX будет использовать этот параметр для запроса деталей сообщения с сервера.