4. Модификация веб-приложения asp.Net: ajax
Введение в AJAX:
AJAX (Asynchronous JavaScript And XML — асинхронный JavaScript «плюс» XML), обозначает подход к созданию веб-приложений, при котором после первичного вызова веб-страницы она получает возможность обмена данных с сервером и отображения данных без необходимости своей перегрузки.
Это обеспечивают ряд механизмов, основной из которых — движок AJAX. Это посредник между браузером (загруженной в него страницей) и сервером, способный передавать данные серверу и принимать их от него. Окончательно этот механизм сформировался в 1998 году, когда в Internet Explorer 5.0 были внедрены новые ActiveX-объекты, и, в частности, XMLHttpRequest-объект. Именно XMLHttpRequest приобрел наибольшую популярность и поддержку в других браузерах (Mozilla Firefox, начиная с версии 1.0, Opera, начиная с версии 8.0, Safari...).
Движок AJAX (XMLHttpRequest) производит необходимые запросы асинхронно, обычно при помощи XML, не прерывая взаимодействия пользователя с приложением. Ответ сервера — это либо текстовая строка, либо XML документ.
XMLHttpRequest-объект создаётся для страницы, именно как объект, в момент её загрузки или при необходимости обмена данных с сервером. Созданный объект имеет свои методы и свойства, доступные коду JavaScript-скриптов страницы. Вот основные:
open('Тип запроса «GET» или «POST»', 'URL страницы", 'исполнение запроса — «True» — асинхронное исполнение', 'username', 'pasword') — создаёт запрос к серверу.
send('content') — отправляет запрос на сервер. В качестве значений может быть null или данные для запроса «POST» или пустая строка.
onreadystatechange — событие, возникающее при смене состояния объекта:
0 — (uninitialized) — запрос не отправлен;
1 — (loading) — объект инициализирован;
2 — (loaded) — получен ответ от сервера;
3 — (interactive) — соединение с сервером активно;
4 — (complete) — объект завершил работу;
responseText — взять данные от сервера в виде строки.
responseXML — взять данные от сервера в виде XML;
status — свойство статус HTTP-ответа (например, 404 — страница не найдена на сервере).
Все свойства и методы объекта, доступны из JavaScript скриптов. Таким образом, AJAX, как её трактуют сами разработчики, это несколько технологий, объединённых в новое направление:
стандартизованное представление данных с использованием XHTML и CSS;
динамическое отображение и взаимодействие при помощи DOM (Document Object Model);
обмен и управление данными через XML и XSLT;
асинхронные получение данных с использованием XMLHttpRequest;
JavaScript, как язык, связывающий все компоненты.
Подготовка к реализации функциональности AJAX:
Создаём новую страницу («Веб-форма, использующая главную страницу») с именем Ajax.aspx. В качестве основного шаблона выбираем Site.Master. HTML-код добавленной страницы будет таким:
<%@ Page Title="Страница с AJAX" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Ajax.aspx.cs" Inherits="LWP18ASPNET.Axaj" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>
Работа с технологией AJAX!
</h2>
<p align="center">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Серверная кнопка" />
</p>
</asp:Content>
Страница содержит одну кнопку, один Label (в качестве базовых элементов управления).
Добавим страницу в меню (файл Site.Master). Найдём там:
<asp:MenuItem NavigateUrl="~/Page.aspx" Text="Страница"/>
Добавим после:
<asp:MenuItem NavigateUrl="~/Ajax.aspx" Text="AJAX"/>
Теперь добавим код для события Page_Load файла Ajax.aspx.cs:
if (!IsPostBack) { Label1.Text = "Текст при первой загрузке страницы Default.aspx"; }
else { Label1.Text = "Текст при перегрузке страницы"; }
Этот код будет сигнализировать о том, что страница не перегружается при использовании AJAX-вызовов. Загрузим веб-сайт, текст в Label1 будет «Текст при первой загрузке страницы Default.aspx», нажимаем серверную кнопку — «Текст при перегрузке страницы». По смене текста будем судить о том, перегружалась или нет страница:
Рис. 4. 1. Результат работы веб-приложения ASP.NET: загружена «Страница с AJAX»
Среда разработки по умолчанию умеет работать со следующими компонентами AJAX:
Выполним самый простейший вариант, который не требует действия пользователя, а именно AJAX-часы.
Реализации таких часов: вначале добавим простой Label. Затем, на странице, которая будет использовать эту технологию должен быть обязательно элемент управления ScriptManager (группа AJAX-расширения панели элементов). Добавляем его на страницу. Добавляем компонент UpdatePanel. При постбэке из этого элемента будет обновляться только эта часть, то есть элементы внутри UpdatePanel. Внутрь UpdatePanel необходимо добавить тэг ContentTemplate и затем в него уже добавлять компоненты (добавим один TextBox). Добавим на форму компонент UpdateProgress, отображаться который будет, если запрос на обновление UpdatePanel будет происходить дольше, чем указано в свойстве DisplayAfter. Ну и для полноты компонент Timer, который будет перезагружать UpdatePanel через интервал указанный в свойстве Interval (в нашем случае это будет одна секунда):
</p>
<p>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</p>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate >
<asp:Timer ID="Timer1" runat="server" Interval="1000">
</asp:Timer>
<asp:TextBox ID="TextBox1" runat="server" ReadOnly="True"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Обновление...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
Так это будет выглядеть в представлении «Конструктор»:
Теперь код события Page_Load, который будет реализовывать функции часов, и обновлять TextBox через каждую секунду, посредством всех добавленных элементов (Label2 же будет неизменным и будет содержать время старта страницы, так как находится вне UpdatePanel):
Label2.Text = DateTime.Now.ToString();
TextBox1.Text = DateTime.Now.ToString();
Запускаем, следим за текстом в TextBox (временем) и за текстом в Label1 (не получили ли мы «PostBack» случаем):
Рассмотрим несколько простых примеров с действиями. Начнём с самого базового и часто-описываемого: загрузка данных из текстового файла. Будем применять отдельный класс.
Загрузка данных из одного файла:
Создаём в веб-проекте новый текстовый файл AJAX_Text1.txt и заносим туда любой текс, например: «Здесь расположен текст первого текстового файла AJAX_Text1.txt!». Для создания файла выполняем Проект -> Добавить новый элемент...: в открывшемся окне ищем группу Данные и далее Текстовый файл:
Рис. 4. 2. Добавление нового элемента – LWP18ASPNET: Текстовый файл
Сохраняем текст в файле:
Теперь, необходимо создать дополнительный класс для работы AJAX и исполнения загрузки из этого файла. Будем использовать HttpHandler.
ASP.NET обрабатывает запросы HTTP с помощью обработчика HttpHandler, который доступен по умолчанию для всех запрашиваемых страниц c расширением *.aspx и служб (*.asmx). HttpHandlers — это классы, реализующие интерфейсы IHttpHandler и IHttpAsyncHandler и, по существу, служат ISAPI-фильтром, обработки HTTP-запросов. Запросы могут обрабатываться как синхронно (интерфейс System.Web.IHttpHandler) — HttpHandler возвращает управление по завершению обработки запроса или асинхронно (интерфейс System.Web.IHttpAsyncHandler) — путём запуска процессов обработки и возврата управления. Иначе — HttpHandler’ы могут передавать выполнение запроса другим классам или же сами обрабатывают запрос и возвращают результат клиенту.
Важной особенностью ASP.NET является то, что HttpHandler может быть создан разработчиком для выполнения своих конкретных задач.
Для того, чтобы любой класс мог выполнять функции HttpHandler’а, необходимо реализовать в нём интерфейс System.Web.IHttpHandler или System.Web.IHttpAsyncHandler. Можно также создавать экземпляр обработчика HttpHandler с помощью класса, реализующего интерфейс IHttpHandlerFactory.
Интерфейсы System.Web.IHttpAsyncHandler и System.Web.IHttpHandler должны включать методы ProcessRequest (обработчик запроса), свойства IsReusable (поддержка организация пулов). Для интерфейса System.Web.IHttpAsyncHandler требуются дополнительно методы BeginProcessRequest и EndProcessRequest (инициализация и завершение асинхронных вызовов).
Выполним: Проект -> Добавить класс... (Shift+Alt+C). Имя вводим как AJAX.cs. Вставляем туда код:
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;
public class AJAX : IHttpHandler
{
#region Члены IHttpHandler
public bool IsReusable
{
get { return true; }
}
public void ProcessRequest(HttpContext context)
{
HttpRequest Request = context.Request;
HttpResponse Response = context.Response;
// Здесь будет код обработки запроса
}
#endregion
}
Подготовим «почву» для работы AJAX. Откроем файл Site.Master и найдём строчки:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
Добавим после:
<script language = "javascript" type="text/javascript">
function getDataFromServer(dataSource, targetControl)
{
}
</script>
Добавим на страницу Ajax.aspx ещё один серверный Label и Input (Buton). Для события onclick кнопки запишем вызов некоторой функции getDataFromServer('AJAX_Text1.txt', 'Label3') при нажатии кнопки. Задача функции — вывести данные в Label3 из файла без перегрузки страницы. HTML-код будет таким:
<p align="center">
<span class="bold" style="color:Green">[ реализация технологии AJAX: загрузка текста из файла ]</span><br />
<asp:Label ID="Label3" runat="server" Text="Здесь будет выводимый текст"></asp:Label><br />
<input type="button" id="Button2" value="Загрузить текст из AJAX_Text1.txt"
onclick="getDataFromServer('AJAX_Text1.txt', 'MainContent_Label3')"/>
</p>
Заполняем код скрипта:
var myAjaxObject = false;
if (window.XMLHttpRequest) {
myAjaxObject = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
myAjaxObject = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (myAjaxObject) {
myAjaxObject.open("GET", dataSource);
myAjaxObject.onreadystatechange =
function () {
if (myAjaxObject.readyState == 4 && myAjaxObject.status == 200) {
var targetObj = document.getElementById(targetControl);
targetObj.innerHTML = myAjaxObject.responseText;
delete myAjaxObject;
myAjaxObject = null;
}
}
myAjaxObject.send(null);
}
Поясним. Первое, что добавляем в скрипт: создание XMLHttpRequest-объекта.
Создание объектов различно для браузеров Mozilla Firefox, Opera, Safari и некоторых других (new XMLHttpRequest()) и Internet Explorer (new ActiveXObject("Microsoft.XMLHTTP")), что и отражает данный код. Далее, после проверки того, что объект создан, мы создаём запрос к серверу (метод «open»). К событию, возникающему при смене состояния объекта (onreadystatechange), добавляем безымянную функцию, задачей которой будет слежение за состоянием объекта (нас интересует завершение получения данных):
if (myAjaxObject) {
myAjaxObject.open("GET", dataSource);
myAjaxObject.onreadystatechange =
function () {
}
}
В теле функции определяем, что загрузка данных завершена (readyState == 4) и обмен прошёл без ошибок (status == 200). Осталось получить текст (myAjaxObject.responseText) и присвоить его свойству innerHTML элемента Label3:
if (myAjaxObject.readyState == 4 && myAjaxObject.status == 200) {
var targetObj = document.getElementById(targetControl);
targetObj.innerHTML = myAjaxObject.responseText;
delete myAjaxObject;
myAjaxObject = null;
И последнее: отсылка запроса на сервер:
myAjaxObject.send(null);
В результате имеем работающий код, выполняющий динамическое чтение данных из текстового файла:
После нажатия кнопки «Загрузить текст из AJAX_Text1.txt» видим, что страница не обновлялась (сигнализатор: текст в Label1 на странице).
Используем класс AJAX.cs:
Расширим текст кода файла класса AJAX.cs. Найдём:
HttpResponse Response = context.Response;
// Здесь будет код обработки запроса
Добавим после:
// Чтение файла
String s = AppDomain.CurrentDomain.BaseDirectory + (@"AJAX_Text1.txt");
byte[] bText;
using (FileStream filestream = new FileStream(s, FileMode.Open, FileAccess.Read))
{
int bufSize = (int)filestream.Length;
bText = new byte[bufSize];
filestream.Read(bText, 0, (int)filestream.Length);
}
// Так мы вновь потеряем кириллицу
// Response.BinaryWrite(bText);
// А так нет
s = System.Text.Encoding.UTF8.GetString(bText);
Response.Write(s);
Теперь нужно создать файл содержащий скрипт из предыдущего примера. Добавим в наш проект одну пустую форму (Форма Web Forms) с именем Ajax_Script.aspx и следующим простым кодом (заменим код созданного файла):
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_Script.aspx.cs" Inherits="LWP18ASPNET.Ajax_Script" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language = "javascript" type="text/javascript">
function getDataFromServer(dataSource, targetControl) {
var myAjaxObject = false;
if (window.XMLHttpRequest) {
myAjaxObject = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
myAjaxObject = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (myAjaxObject) {
myAjaxObject.open("GET", dataSource);
myAjaxObject.onreadystatechange =
function () {
if (myAjaxObject.readyState == 4 && myAjaxObject.status == 200) {
var targetObj = document.getElementById(targetControl);
targetObj.innerHTML = myAjaxObject.responseText;
delete myAjaxObject;
myAjaxObject = null;
}
}
myAjaxObject.send(null);
}
}
</script>
</head>
</html>
Теперь организуем «регистрацию» нашего класса и привязку его к скрипту. Откроем корневой Web.config, найдём там
<system.web>
Добавим после:
<httpHandlers>
<add verb="GET" path="Ajax_Script.aspx" type="AJAX" />
</httpHandlers>
И наконец, создаём «интерфейс» на странице Ajax.aspx:
<p align="center">
<span class="bold" style="color:Green">[ реализация технологии AJAX: загрузка текста из файла, используя класс ]</span><br />
<asp:Label ID="Label4" runat="server" Text="Здесь будет выводимый текст"></asp:Label><br />
<input type="button" id="Button3" value="Загрузить текст из AJAX_Text1.txt"
onclick="getDataFromServer('Ajax_Script.aspx', 'MainContent_Label4')"/>
</p>
Выбираем загружаемую информацию:
Создаём ещё один текстовый файл с именем AJAX_Text2.txt и текстом «Здесь расположен текст первого текстового файла AJAX_Text2.txt!».
Отредактируем ради новой функциональности код класс AJAX.cs, изменим всю функцию ProcessRequest следующим образом:
public void ProcessRequest(HttpContext context)
{
HttpRequest Request = context.Request;
HttpResponse Response = context.Response;
// Здесь будет код обработки запроса
String id = string.Empty;
// Извлечение параметров
id = Request.QueryString.Get(0);
if (!string.IsNullOrEmpty(id))
{
if (id == "1") { id = AppDomain.CurrentDomain.BaseDirectory + (@"AJAX_Text1.txt"); }
else { id = AppDomain.CurrentDomain.BaseDirectory + (@"AJAX_Text2.txt"); }
}
else { return; }
byte[] bTextid;
using (FileStream filestream = new FileStream(id, FileMode.Open, FileAccess.Read))
{
int bufSize = (int)filestream.Length;
bTextid = new byte[bufSize];
filestream.Read(bTextid, 0, (int)filestream.Length);
}
id = System.Text.Encoding.UTF8.GetString(bTextid);
Response.Write(id);
}
Также подправим код для предыдущего примера, найдём в файле Ajax.aspx:
onclick="getDataFromServer('Ajax_Script.aspx', 'MainContent_Label4')"/>
Изменим на:
onclick="getDataFromServer('Ajax_Script.aspx?id=1', 'MainContent_Label4')"/>
И добавим новый HTML-код (в тэге «p»):
<p align="center">
<span class="bold" style="color:Green">[ реализация технологии AJAX: загрузка текста из файла, используя класс с выбором ]</span><br />
<asp:Label ID="Label5" runat="server" Text="Здесь будет выводимый текст"></asp:Label><br />
<input type="button" id="Button4" value="Загрузить текст из AJAX_Text1.txt"
onclick="getDataFromServer('Ajax_Script.aspx?id=1', 'MainContent_Label5')"/>
<input type="button" id="Button5" value="Загрузить текст из AJAX_Text2.txt"
onclick="getDataFromServer('Ajax_Script.aspx?id=2', 'MainContent_Label5')"/>
</p>
Выбор и отображение изображений:
Создаём новый класс AJAX_Image.cs с кодом:
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;
public class AJAX_Image : IHttpHandler
{
#region Члены IHttpHandler
public bool IsReusable
{
get { return true; }
}
void IHttpHandler.ProcessRequest(HttpContext context)
{
HttpRequest Request = context.Request;
HttpResponse Response = context.Response;
string s = string.Empty;
s = Request.QueryString.Get(0);
if (!string.IsNullOrEmpty(s))
{
if (s == "1") { s = AppDomain.CurrentDomain.BaseDirectory + (@"Image1.jpg"); }
else{ s = AppDomain.CurrentDomain.BaseDirectory + (@"Image2.jpg"); }
}
else { s = AppDomain.CurrentDomain.BaseDirectory + (@"Image1.jpg"); }
using (MemoryStream memorystream = new MemoryStream())
{
Bitmap bitmap = null;
try
{
bitmap = new Bitmap(s);
bitmap.Save(memorystream, ImageFormat.Png);
byte[] b = memorystream.GetBuffer();
// Формат файла рисунка может быть отличен от исходного файла
Response.ContentType = "image/png";
Response.BinaryWrite(b);
bitmap.Dispose();
}
catch (Exception) { }
memorystream.Dispose();
}
}
#endregion
}
Регистрируем класс в Web.config (в блоке httpHandlers):
<add verb="GET" path="Ajax_Script_Image.aspx" type="AJAX_Image" />
Создаём копию страницы со скриптом Ajax_Script_Image.aspx с кодом (изменена одна строка):
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_Script_Image.aspx.cs" Inherits="LWP18ASPNET.Ajax_Script_Image" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language = "javascript" type="text/javascript">
function getImageFromServer(dataSource, targetControl) {
var myAjaxObject = false;
if (window.XMLHttpRequest) {
myAjaxObject = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
myAjaxObject = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (myAjaxObject) {
myAjaxObject.open("GET", dataSource);
myAjaxObject.onreadystatechange =
function () {
if (myAjaxObject.readyState == 4 && myAjaxObject.status == 200) {
var targetObj = document.getElementById(targetControl);
targetObj.innerHTML = "<img src= " + dataSource + ">";
delete myAjaxObject;
myAjaxObject = null;
}
}
myAjaxObject.send(null);
}
}
</script>
</head>
</html>
Тот же скрипт помещаем в Site.Master после предыдущего добавленного в этот файл скрипта. Не забудем это сделать, иначе функция JavaScript будет не определена!
И наконец, создаём интерфейс для реализации выбора и отображения изображения в файле Ajax.aspx:
<div align="center" id="iddivforimage"></div>
<div align="center">
<select id="Select1"
onchange="getImageFromServer('Ajax_Script_Image.aspx?='+this.options[this.selectedIndex].value,
'iddivforimage')">
<option value="1">Рисунок № 1</option>
<option value="2">Рисунок № 2</option>
</select>
</div>
Добавим в корень проекта два изображения с именами Image1.jpg и Image2.jpg (импортируем извне). Например, в данном случае были использованы два изображения:
Первое:
Второе:
«AJAXML»:
Перейдём непосредственно к использованию XML-данных. Как видно из рассмотренных свойств и методов объекта XMLHttpRequest, он имеет специальное свойство для трактовки данных, полученных от сервера, как XML-данные. Это свойство, доступное для чтения — responseXML. Далее, JavaScript имеет методы для разбора XML-файлов.
Следующий пример демонстрирует простейшее использование совместной работы AJAX и JavaScript при получении и разборке XML-данных с сервера без перегрузки страницы.
Создаём простой XML-файл (XML-файл — в окне добавления нового объекта)с именем Data.xml и поместим его в директорию веб-проекта. Структура файла будет такой:
<?xml version="1.0" standalone="yes" ?>
<sites>
<site comments="World Wide Web Consortium (W3C)">http://www.w3.org/</site>
<site comments="Сайт корпорации Microsoft">http://www.microsoft.com</site>
<site comments="Russian on the Net">http://www.ru</site>
</sites>
Создаём новый файл скрипта Ajax_Script_XML.aspx с кодом:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_Script_XML.aspx.cs" Inherits="LWP18ASPNET.Ajax_Script_XML" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function getXMLFromServer(dataSource, targetControl) {
var myAjaxObject = false;
if (window.XMLHttpRequest) { myAjaxObject = new XMLHttpRequest();}
else { if (window.ActiveXObject) { myAjaxObject = new ActiveXObject("Microsoft.XMLHTTP"); } }
if(myAjaxObject)
{
myAjaxObject.open("GET", dataSource);
myAjaxObject.onreadystatechange =
function()
{
if (myAjaxObject.readyState == 4 && myAjaxObject.status == 200)
{
var xmlDocument = myAjaxObject.responseXML;
var i;
var points = xmlDocument.getElementsByTagName("site");
var html='';
for (i = 0; i < points.length; i++)
{
html=html+'<a href="'+points[i].firstChild.data+'" target="blank">'+
points[i].getAttribute ('comments')
+'</a><br/>';
}
var targetObj = document.getElementById(targetControl);
targetObj.innerHTML = html + "";
}
}
myAjaxObject.send(null);
}
}
</script>
</head>
</html>
Не забываем поместить код скрипта (<script> ... </script>) в тэг head файла Site.Master.
Создаём новый класс AJAX_XML.cs с кодом:
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;
public class AJAX_XML : IHttpHandler
{
#region Члены IHttpHandler
bool IHttpHandler.IsReusable
{
get { return true; }
}
void IHttpHandler.ProcessRequest(HttpContext context)
{
HttpRequest Request = context.Request;
HttpResponse Response = context.Response;
string s = string.Empty;
s = AppDomain.CurrentDomain.BaseDirectory + (@"Data.xml");
using (FileStream filestream = new FileStream(s, FileMode.Open, FileAccess.Read))
{
// Чтение символов из файла
using (TextReader streamreader = new StreamReader(s, System.Text.Encoding.Default))
{
s = streamreader.ReadToEnd();
Response.ContentType = "text/xml"; // Ключевая строка для передачи XML
Response.BinaryWrite(System.Text.Encoding.UTF8.GetBytes(s));
}
}
}
#endregion
}
Регистрируем класс в Web.config:
<add verb="GET" path="Ajax_Script_XML.aspx" type="AJAX_XML" />
Код элементов управления для файла Ajax.aspx:
<p align="center">
<span class="bold" style="color:Green">[ реализация технологии AJAX: загрузка текста из XML-файла, используя класс ]</span><br />
<input type="button" id="Button7" value="Загрузить XML-файл"
onclick="getXMLFromServer('Ajax_Script_XML.aspx', 'iddivforxml')" /><br />
<asp:Label ID="Label7" runat="server" Text="Ниже будет выводимое содержимое:"></asp:Label>
</p>
<div align="center" id="iddivforxml"></div>
Готово. Компилируем, проверяем работоспособность. Перед компиляцией перемещаемся на страницу Default.aspx (должна быть активной вкладкой в среде разработки). Перед компиляцией изменим заголовок на странице. Найдём в файле Site.Master строчки:
<div class="title">
<h1>
Мое приложение ASP.NET (C#)
</h1>
И изменим на:
<div class="title">
<h1>
Знакомство с ASP.NET (C#)
</h1>