2. Использование Ajax
реклама
Технология Ajax при построении web-приложений
Ajax — это коллекция технологий, существующих с момента появления Web. Термин
«Ajax» используется с 2004 года и обозначает «асинхронный JavaScript + XML».
Основные особенности:
Взаимообмен данными и манипуляция с использованием XML и XSLT;
Асинхронное формирование запроса к серверу и извлечение данных с
использованием объекта XMLHttpRequest;
Между сервером и браузером передаются данные, а не их html-представление.
Данные могут передаваться как в обычном текстовом формате, так и
структурированных форматах данных – XML или JSON;
JavaScript, который с помощью объектной модели представления html-документа
осуществляет управление содержимым html-документа.
Ajax — простая технология, поддерживаемая всеми основными браузерами. Как можно
вкратце отметить, единственным предварительным условием для внедрения Ajax является
знание JavaScript.
При использовании технологии Ajax для обмена данными на серверной стороне должен
существовать сценарий или др.программный код, который генерирует нужные данные.
Если на сервере используется asp.net-страница, то структура такой страницы будет
следующей:
//файл Proba.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Proba.aspx.cs"
Inherits="Proba" %>
//файл Proba.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Proba : System.Web.UI.Page
{
// обработчик загрузки страницы
protected void Page_Load(object sender, EventArgs e)
{
// тело обработчика
Response.Write("Текст результата запроса");
}
}
Таким образом, страница не имеет html-разметки, а класс, обрабатывающий события
страницы, должен содержать только обработчик загрузки страницы, который формирует
ответ с помощью объекта Response и его метода Write.
В оболочке Visual Studio 2005 и выше можно использовать для асинхронного обмена
данными файлы, которые имеют тип «Generic Handler» (расширение ashx). Данный файл
определяет класс, который раскрывает интерфейс IHttpHandler, предоставляющий
возможность обмена данными с помощью протокола http. Такой файл имеет вид:
//файл Proba.ashx
<%@ WebHandler Language="C#" Class="Proba" %>
using System;
using System.Web;
public class Proba : IHttpHandler {
// метод выполнения запроса и генерации ответа
public void ProcessRequest (HttpContext context)
{
// обработка запроса
context.Response.ContentType = "text/plain";
context.Response.Write("Текст результата запроса");
}
public bool IsReusable
{
get {
return false;
}
}
}
Этот файл полностью заменяет asp.net-страницу.
На стороне браузера выполняется JavaScript-код, который управляет содержимым htmlстраницы. Основная html-страница приложения должна содержать функцию создания
объекта асинхронного обмена данными и по две функции для каждого запроса на сервер
(функция генерации и отправки запроса и функция получения и обработки запроса).
Таким образом, основная html-страница приложения, которая отправляет один запрос на
сервер, может иметь следующую структуру:
<%@ Page Language="C#" AutoEventWireup="true"
Inherits="_Default" %>
CodeFile="Default.aspx.cs"
<html xmlns="http://www.w3.org/1999/xhtml" >
<script type="text/jscript">
// создание объекта асинхронного обмена данными с сервером
var httpRequester = getHTTPRequestObject();
// функция создания объекта асинхронного обмена данными с сервером
function getHTTPRequestObject()
{
var xmlHttpRequest;
try
{
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (exception1)
{
try
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (exception2)
{
xmlHttpRequest = false;
}
}
if (!xmlHttpRequest && typeof XMLHttpRequest != 'undefined')
{
try
{
xmlHttpRequest = new XMLHttpRequest();
}
catch (exception)
{
xmlHttpRequest = false;
}
}
return xmlHttpRequest;
}
// функция обращения к серверу методом GET
function F_Send()
{
var url="Proba.aspx";
// или Proba.ashx
// открытие соединения – 1 параметр – метод отправки данных, 2 параметр –
// адрес сценария, 3 параметр – равен true при асинхронном запросе
httpRequester.open("GET", url,true);
// назначение функции-обработка при получении ответа от сервера –
// при изменении состояния
httpRequester.onreadystatechange = F_Response;
// отправка сообщения
httpRequester.send(null);
}
// функция обработки ответа от серверна
function F_Response ()
{
// если произошел переход в состояние получения ответа от сервера (4)
if ( httpRequester.readyState == 4)
{
// получение с помощью объектной модели документа ссылки на элемент с
// идентификатором proba
var panel=document.getElementById('proba');
// замена текста элемента на полученный ответ от сервера
panel.innerHTML=httpRequester.responseText;
}
}
</script>
<body>
<!-- html-разметка страницы
-->
<span id="proba">
<input type="button" value="Отправить запрос" onclick="F_Send()">
</span>
</body>
</html>
В случае отправки данных на сервер с помощью метода POST требуется немного
изменить функцию F_Send():
// функция обращения к серверу методом POST
function F_Send()
{
var url="Proba.aspx";
// или Proba.ashx
// открытие соединения – 1 параметр – метод отправки данных, 2 параметр –
// адрес сценария, 3 параметр – равен true при асинхронном запросе
httpRequester.open("POST", url,true);
// задание типа запроса, т.е. указание, что вместе с обращнием на сервер
// будут переданы данные
httpRequester.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// назначение функции-обработка при получении ответа от сервера –
// при изменении состояния
httpRequester.onreadystatechange = F_Response;
// формирование строки параметров
var params="login=111&pass=111";
// отправка сообщения
httpRequester.send(params);
}
