Клиент обрабатывает данные, содержащиеся в этом выражении, и проверяет имеются ли в них искомые результаты. Если да. то пользователю предлагав ются на выбор несколько вариантов. Все кажется просто, пока вы не заду, маетесь о том, сколько кода JavaScript задействовано в описанном процессе Впрочем, если разбить процесс на ряд небольших этапов, задача написание сценария опережающего ввода с минимальной нагрузкой на сервер оказывается сравнительно простой. В данном проекте самым простым будет код серверной части приложения, поэтому начнем мы именно с него.

10.2. Структура серверной части сценария: С#

Схема опережающего ввода, которую мы будем разрабатывать, состоит из трех частей: сервера, базы данных и клиента. На практике база данных может представлять собой, например, XML-файл, но общая суть от этого не меняется.

10.2.1. Сервер и база данных

Код сервера и базы данных можно писать одновременно, поскольку соединение с базой данных нам требуется только для получения информации. В данном примере мы используем базу данных Northwind (Microsoft), получая необходимые данные из таблицы Products, однако вы можете работать с любой удобной для вас базой данных.

Для отправки запроса от клиента серверу и получения в ответ отформатированной структуры данных нужен объект XMLHttpRequest. В нашем случае динамически создается текстовый документ, заполняемый информацией, полученной из запроса к базе данных. Этот текстовый документ будет содержать код JavaScript, создающий массив с данными. Основные этапы создания массива JavaScript приведены в листинге 10.1,

Листинг 10.1. Сценарий typeAheadData.aspx.cs

//@ Установить тип содержимого Response.ContentType - "text/html";

//© Запросить элемент формы

string strQuery = Request.Form.Get("q").ToString();

string strAny = ""; // О Объявить строку

if (Request.Form.Get("where").ToLower() == "true")

{

strAny = "%";

}

// © Построить выражение SQL

string strSql = "Select top 15 " +

Глава 10. Опережающий ввод 387

"ProductName, " +

"Productld FROM Products " + "WHERE ProductName like '" + strAny + strQuery + "%"

'" ORDER BY ProductName";

// 0 Инициализировать запрос к базе данных DataTable dtQuestions = FillDataTable(

strSql);

//© Построить массив JavaScript System.Text.StringBuilder strJSArr =

new System.Text.StringBuilder( "arrOptions = new Array("); int iCount = 0;

//© Последовательно пройти по результатам foreach (DataRow row in

dtQuestions.Rows)

{

if (iCount > 0)

{ strJSArr.AppendC1,") ; } strJSArr.Append("["); strJSArr.Append("\"" +

row["ProductName"].ToString() + " \ " , " ) ; strJSArr.Append("\"" +

row["Productid"].ToString() + " \ " " ) ; strJSArr.Append("]");

iCount++;

}

strJSArr.Append(");") ;

//0 Записать строку на страницу Response.Write(strJSArr.ToString());

}

// © Выполнить запрос public static DataTable

PillDataTable(string sqlQuery)

{

string strConn = "Initial Catalog = "+ "Northwind;Data Source=127.0.0.1; " "Integrated Security=true;";

SqlConnection conn = new SqlConnection(strConn); SqlDataAdapter cmdl = new SqlDataAdapter(); cmdl.SelectCommand • new SqlCommand(sqlQuery,conn); DataSet dataSetl = new DataSetO; cmdl.Fill(dataSetl);

icmdl.Dispose();

conn.Close();

return dataSetl . Tables[0];

Код, приведенный в листинге 10.1, позволяет получать значения от клиента и передавать данные в строку, формируя массив JavaScript. Этот массив возвращается клиенту и обрабатывается. Данное поведение требуется инициализировать при загрузке страницы документа О. Первое, что мы делаем после возврата строки, — проверяем, что тип содержимого страницы установлен равным text/html ©.

Код клиентской стороны помещает значения на нужную страницу посред, ством объекта XMLHttpRequest. Следовательно, мы должны запросить в элементе формы q текст, представляющий предположительные варианты ввода ©. В отличие от многих схем опережающего ввода, мы позволяем пользователям находить результаты в середине слова, поэтому объявляем строку о отвечающую за обработку такой ситуации. Сценарий клиента передает булеву строку с элементом формы where. Если ее значение равно true, мы добавляем % перед началом термина, чтобы разрешить поиск с любого места строки

Теперь мы можем сформировать выражение SQL ©, которое позволит получать из базы данных значения, соответствующие тому, что вводит пользователь. Чтобы минимизировать нагрузку на пользователя, мы ограничим поиск: возвращать можно всего 15 значений. Затем мы инициализируем © процедуру запроса базы данных © и возвращаем таблицу данных с доступными результатами поиска.

Получив результаты из базы данных, можно формировать массив JavaScript О. Затем мы циклически проходим по множеству записей ©, создавая двухмерный массив с именами вариантов и идентификаторами. После завершения цикла мы пишем нашу строку на страницу ©, чтобы ее могло использовать выражение JavaScript.

Если вы используете серверный язык со страницей кода и HTMLстраницей, то с HTML-страницы необходимо удалить все дополнительные дескрипторы. Если используется такая же страница С # , как в нашем примере, на ASPX-странице должен присутствовать единственный указанный

Если мы не уберем дополнительные дескрипторы HTML, которые по умолчанию присутствуют на ASPX-странице, мы не получим допустимый текстовый файл (с кодом JavaScript), т.е. наши методы DOM JavaScript не смогут использовать данные. Чтобы гарантировать правильность данных, которые возвращаются клиенту, необходима быстрая проверка.

10.2,2. Тестирование серверного кода

При работе с Ajax тестирование серверного кода необходимо, поскольку JavaScript известен своими проблемами, причины которых часто бывает трудно обнаружить. Консоль JavaScript от Mozilla улучшает ситуацию, но чтобы минимизировать шансы на ошибку всегда стоит проверять корректность работы сервера.

При тестировании серверного кода можно пойти двумя путями. Поскольку объект XMLHttpRequest использует метод HTTP POST, мы можем либо создать простую форму с двумя текстовыми окнами и отправить ее на серверную страницу, либо закомментировать строки, проверяющие отправку формы, и задать в этом месте некоторые значения. Выберем второй вариант. Как видно из фрагмента кода, приведенного в листинге 10.2. мы заком-