Технология Ajax – передача структурированной информации



Скачать 52.96 Kb.
Дата16.09.2014
Размер52.96 Kb.
ТипДокументы
Технология Ajax – передача структурированной информации

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

В таких ситуациях передачу данных от сервера браузеру производят в форматах XML или JSON (JavaScript Object Notation). Оба формата поддерживаются браузерами. XML-данные могут быть обработаны с помощью древовидного представления XML-документа – DOM. Второй формат JSON специфичен для применения в JavaScript и, в какой-то степени, легче обрабатывается на стороне браузера.

Разберем пример отсылки данных о товарах, их наличию на складе и ценах на них в формате XML. Код серверного aspx-сценария может быть таким:

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;

using System.Xml;

using System.IO;

using 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-код:







. . .


На стороне браузера требуется данный XML-документ получить и обработать. Ответ будет получен с помощью свойства объекта передачи информации, который называется responseXML. Сохранив его значение в строковой переменной, можно потом осуществить его разбор с помощью применения модели DOM. В данной модели можно обращаться к элементам с помощью функции getElementsByTagName. Дочерние элементы доступны с помощью коллекции childNodes, к элементам которой можно обращаться как к элементам массива. Атрибуты элемента доступны с помощью коллекции attributes. Найти в ней значение атрибута по его имени можно с помощью функции getNamedItem с указанием имени атрибута. Например, сформировать html-таблицу с полученными данными можно с помощью следующей JavaScript-функции:

function printCatalog()

{

// получение html-панели, в которую будет вставлена таблица



var panel=document.getElementById('tablePanel');

var s="";

// пусть catalog – переменная, которая хранит ответ в виде xml-документа

// array_tov – массив элементов типа Tovar

var array_tov=catalog.getElementsByTagName("Tovar");

for(var i=0;i

{

// получение атрибутов товара и отображение их в столбцах таблицы



s+="";


s+="";

s+="

";

}

s+="

"+array_tov[i].attributes.getNamedItem("name_tovar").text+

"

"+array_tov[i].attributes.getNamedItem("count_tovar").text+

"

"+array_tov[i].attributes.getNamedItem("price_tovar").text+

"

";



// замена html-кода панели на сформированную таблицу

panel.innerHTML=s;

}

Заметим, что передача данных xml-вида из ashx-файла не дает возможности получения данных через свойство responseXML. В этом случае можно получить данные как текст, а затем на стороне клиента JavaScript-средствами создать xml-документ и загрузить его из полученной строки:



var xmlDoc=new ActiveX('Microsoft.XMLDOM');

xmlDoc.loadXML(httpRequester.responseText);

При использовании формата JSON должен быть сгенерирован следующий документ в текстовом формате:

{“tovars” : [

{“name_tovar” : “tovar1”, “id_tovar” : 1, “count_tovar” : 10,

“price_tovar” : 1000},

{“name_tovar” : “tovar2”, “id_tovar” : 2, “count_tovar” : 1000,

“price_tovar” : 100},

. . .

]};
Особенность формата JSON заключается в том, что к элементам данных можно обращаться напрямую по их именам как к свойствам объекта. JavaScript-код генерации таблицы с информацией о товарах примет следующий вид:



// получение json-данных в текстовом формате

// нужно заключить полученные данные в круглые скобки

var jsonData=eval('('+httpRequester.responseText+')');

var panel=document.getElementById('tablePanel');

var s="";

// обращение к товарам как к массиву

for(var i=0; i

s+="

";

s+="

"+jsonData.tovars[i].name_tovar+""+

jsonData.tovars[i].count_tovar+"

"+

jsonData.tovars[i].price_tovar+"

";

// замена html-кода панели на сформированную таблицу



panel.innerHTML=s;

Похожие:

Технология Ajax – передача структурированной информации iconAjax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml
Технология ajax служит для создания более гибких и интерактивных web-приложений. Она позволяет выполнять асинхронные обращения к...
Технология Ajax – передача структурированной информации iconРуководство по использованию технологии ajax содержание
Технология ajax в системе «1с-битрикс: Управление сайтом» реализована на двух уровнях
Технология Ajax – передача структурированной информации iconТехнология Ajax при построении web-приложений
Термин «Ajax» используется с 2004 года и обозначает «асинхронный JavaScript + xml». Основные особенности
Технология Ajax – передача структурированной информации iconОптимизация обработки и обмена данными при помощи технологии ajax
Особенно это важно в сложных распределенных системах работа которых строится на основе web-сервисов. Для решения этой проблемы может...
Технология Ajax – передача структурированной информации iconОбработка и передача измерительной информации вейвлет-технология анализа вариаций геомагнитного поля
Это приводит к появлению следующих проблем: (1) для определенных видов особенностей отсутствует теоретический аппарат по их выделению;...
Технология Ajax – передача структурированной информации iconAjax с помощью jQuery
Большинство современных сайтов используют технологию, которая называется ajax, для быстрого и эффективного взаимодействия с посетителем....
Технология Ajax – передача структурированной информации iconЭкзаменационные билеты по информатике. 9 класс. Билет №1
Понятие информации. Виды информации. Роль информации в живой природе и в жизни людей. Язык как способ представления информации: естественные...
Технология Ajax – передача структурированной информации iconЭкзаменационные билеты по информатике 9 класс
Понятие информации. Виды информации. Язык как способ представления информации. Естественные и формальные языки. Основные информационные...
Технология Ajax – передача структурированной информации iconЭкзаменационные билеты по курсу «Информатика и икт»
Понятие информации. Виды информации. Язык как способ предоставления информации: естественные и формальные языки. Основные информационные...
Технология Ajax – передача структурированной информации iconЗадача: Перевести число 245 10 в двоичную систему счисления
Понятие информации. Виды информации. Роль информации в живой природе и в жизни людей. Язык как способ представления информации: естественные...
Разместите кнопку на своём сайте:
ru.convdocs.org


База данных защищена авторским правом ©ru.convdocs.org 2016
обратиться к администрации
ru.convdocs.org