передача структурированной информации с помощью форматов

Технология Ajax – передача структурированной информации
(форматы XML и JSON)
Передача простых текстовых данных, не требующих дальнейшего разбора и
использующихся в том же виде, не представляет особых трудностей. Сложнее обработать
ответ на запрос, который содержит структурированные данные, например, данные о заказе
корзине покупателя Internet-магазина. Эти данные должны содержать название товара,
заказанное количество, цена единицы товара и пр. В этом случае передача ответа в виде
простого текста не представляется целесообразной и, если производится, то требует
тщательной и непростой обработки на стороне браузера.
В таких ситуациях передачу данных от сервера браузеру производят в форматах XML или
JSON (JavaScript Object Notation). Оба формата поддерживаются браузерами. XMLданные могут быть обработаны с помощью древовидного представления XML-документа
– DOM. Второй формат JSON специфичен для применения в JavaScript и, в какой-то
степени, легче обрабатывается на стороне браузера.
Разберем пример отсылки данных о товарах, их наличию на складе и ценах на них в
формате XML. Код серверного aspx-сценария может быть таким:
using
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Data;
System.Configuration;
System.Collections;
System.Web;
System.Web.Security;
System.Web.UI;
System.Web.UI.WebControls;
System.Web.UI.WebControls.WebParts;
System.Web.UI.HtmlControls;
System.Xml;
System.IO;
System.Data.OleDb;
public partial class Catalog : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// обращение к базе данных для получения списка товаров
string ConnString = "Provider=SQLOLEDB;Data Source=AAA\\SQLEXPRESS;
Integrated Security=SSPI;Initial Catalog=shop";
OleDbConnection con = new OleDbConnection(ConnString);
con.Open();
OleDbCommand com = new OleDbCommand("select * from tovars", con);
OleDbDataReader dr = com.ExecuteReader();
// генерация XML-документа в виде текстовой строки (StringWriter)
StringWriter sw = new StringWriter();
XmlTextWriter xmlTR = new XmlTextWriter(sw);
xmlTR.WriteStartDocument();
// создание корневого элемента Catalog для списка всех товаров
xmlTR.WriteStartElement("Catalog");
while(dr.Read())
{
// создание элемента Tovar для каждого из товаров
xmlTR.WriteStartElement("Tovar");
// задание атрибутов для элемента Tovar –
// названия, кода, количества,цены
xmlTR.WriteAttributeString("name_tovar", ""+dr["name_tovar"]);
xmlTR.WriteAttributeString("id_tovar", "" + dr["id_tovar"]);
xmlTR.WriteAttributeString("count_tovar", ""+dr["count_tovar"]);
xmlTR.WriteAttributeString("price_tovar", "" + dr["price_tovar"]);
// закрытие элемента для товара
xmlTR.WriteEndElement();
}
// закрытие элемента для каталога товаров
xmlTR.WriteEndElement();
con.Close();
xmlTR.WriteEndDocument();
// отправка полученного каталога товаров в виде XML-документа
Response.AddHeader("Content-Type", "text/xml");
Response.Write(sw.ToString());
}
}
В результате будет получен примерно следующий XML-код:
<Catalog>
<Tovar name_tovar=”tovar1” id_tovar=”1” count_tovar=”10” price_tovar=”1000”/>
<Tovar name_tovar=”tovar2” id_tovar=”2” count_tovar=”1000”
price_tovar=”100”/>
.
.
.
</Catalog>
На стороне браузера требуется данный XML-документ получить и обработать. Ответ
будет получен с помощью свойства объекта передачи информации, который называется
responseXML. Сохранив его значение в строковой переменной, можно потом осуществить
его разбор с помощью применения модели DOM. В данной модели можно обращаться к
элементам с помощью функции getElementsByTagName. Дочерние элементы доступны с
помощью коллекции childNodes, к элементам которой можно обращаться как к
элементам массива. Атрибуты элемента доступны с помощью коллекции attributes. Найти
в ней значение атрибута по его имени можно с помощью функции getNamedItem с
указанием имени атрибута. Например, сформировать html-таблицу с полученными
данными можно с помощью следующей JavaScript-функции:
function printCatalog()
{
// получение html-панели, в которую будет вставлена таблица
var panel=document.getElementById('tablePanel');
var s="<table>";
// пусть catalog – переменная, которая хранит ответ в виде xml-документа
// array_tov – массив элементов типа Tovar
var array_tov=catalog.getElementsByTagName("Tovar");
for(var i=0;i<array_tov.length; i++)
{
// получение атрибутов товара и отображение их в столбцах таблицы
s+="<tr><td>"+array_tov[i].attributes.getNamedItem("name_tovar").text+
"</td>";
s+="<td>"+array_tov[i].attributes.getNamedItem("count_tovar").text+
"</td>";
s+="<td>"+array_tov[i].attributes.getNamedItem("price_tovar").text+
"</td></tr>";
}
s+="</table>";
// замена html-кода панели на сформированную таблицу
panel.innerHTML=s;
}
Заметим, что передача данных xml-вида из ashx-файла не дает возможности получения
данных через свойство responseXML. В этом случае можно получить данные как текст, а
затем на стороне клиента JavaScript-средствами создать xml-документ и загрузить его из
полученной строки:
var xmlDoc=new ActiveX('Microsoft.XMLDOM');
xmlDoc.loadXML(httpRequester.responseText);
При использовании формата JSON должен быть сгенерирован следующий документ в
текстовом формате:
{“tovars” : [
{“name_tovar” : “tovar1”,
“price_tovar”
{“name_tovar” : “tovar2”,
“price_tovar”
.
.
.
]};
“id_tovar” : 1, “count_tovar” : 10,
: 1000},
“id_tovar” : 2, “count_tovar” : 1000,
: 100},
Особенность формата JSON заключается в том, что к элементам данных можно
обращаться напрямую по их именам как к свойствам объекта. JavaScript-код генерации
таблицы с информацией о товарах примет следующий вид:
// получение json-данных в текстовом формате
// нужно заключить полученные данные в круглые скобки
var jsonData=eval('('+httpRequester.responseText+')');
var panel=document.getElementById('tablePanel');
var s="<table>";
// обращение к товарам как к массиву
for(var i=0; i<jsonData.tovars.length;i++)
s+="<tr><td>"+jsonData.tovars[i].name_tovar+"</td><td>"+
jsonData.tovars[i].count_tovar+"</td><td>"+
jsonData.tovars[i].price_tovar+"</td></tr>";
s+="</table>";
// замена html-кода панели на сформированную таблицу
panel.innerHTML=s;