Home | О проекте | Новости | Рекламные статейки

Сообщение Между Сервером и Клиентом
Нередко Вашим приложениям JavaScript нужно передать информацию либо с сервера клиенту, либо с клиента на сервер. Например, когда пользователь в первый раз выполняет доступ к приложению videoapp, оно динамически генерирует список категорий видео-файлов из текущего содержимого БД. Эта информация, генерируемая на сервере, должна быть передана обратно клиенту. И наоборот, когда пользователь щёлкает на категории из этого списка, выбор пользователя должен быть передан обратно на сервер, чтобы он мог сгенерировать набор файлов.
 
Отправка Значений с Клиента на Сервер

Есть несколько способов отправки информации с клиента на сервер:

  • Машина выполнения автоматически создаёт свойства объекта request для каждого значения в HTML-форме.
  • Если Вы используете основанную на URL технику обслуживания свойств объекта client, Вы можете модифицировать URL, отправленный серверу, чтобы включить значения свойств объектов client и request.
  • Вы можете использовать куки для установки значений свойств объектов client и request.
  • На стороне клиента Вы можете модифицировать шапку/header клиентского запроса. Вы можете затем использовать метод httpHeader объекта request для манипулирования шапкой и, возможно, телом запроса.
 
Доступ к Значениям Формы
1.Рекламка: s |

Формы это альфа и омега приложений на JavaScript. Вы используете такие элементы формы как текстовые поля и радио-кнопки в качестве первичного механизма переноса данных с клиента на сервер. Когда пользователь щёлкает на кнопке Submit, браузер отправляет значения, введённые форму, на сервер для обработки.

2.Рекламка: s | ;
x |   

Атрибут ACTION тэга FORM определяет приложение, которому отправляются значения. Для того чтобы отправить информацию приложению на сервер, используйте URL приложения как значение атрибута ACTION.

Если документ, содержащий форму, является скомпилированной частью того же самого приложения, Вы можете просто предоставить имя страницы вместо полного URL. Например, вот тэг FORM из приложения-примера Hangman:

<FORM METHOD="post" ACTION="hangman.html">

Формы, отправляемые приложениям на серверном JavaScript, могут использовать get или post в качестве значения атрибута METHOD.

Приложения на серверном JavaScript не поддерживают автоматическую выгрузку файлов. То есть, если специфицированная action это страница в приложении JavaScript, Вы отправляете элемент INPUT с типом TYPE="file", Ваше приложение обязано само обработать этот файл.

Каждый элемент ввода HTML-формы соответствует свойству объекта request. Имя свойства специфицируется атрибутом NAME элемента формы. Например, следующий HTML создаёт свойство объекта request под названием guess, которое принимает одиночный символ в текстовом поле. Вы обращаетесь к этому свойству в серверном JavaScript как к request.guess.

<FORM METHOD="post" ACTION="hangman.html">
<P>
What is your guess?
<INPUT TYPE="text" NAME="guess" SIZE="1">

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

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

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

<INPUT TYPE="hidden" NAME="result" SIZE=5>
Затем Вам нужно создать обработчик события onClick для кнопки Submit, который назначает вывод функции в скрытый элемент:
<INPUT TYPE="submit" VALUE="Submit"
onClick="this.form.result.value=calc(this.form)">

Значение элемента result отправляется вместе с другими значениями элементов формы. Обратиться к этому значению в приложении можно request.result.

 
Использование Списков Select

HTML-тэг SELECT, используемый с атрибутом MULTIPLE, даёт возможность ассоциировать несколько значений с одним элементом формы. Если Вашему приложению нужны списки с возможностью выбора нескольких опций, Вы используете функцию getOptionValue для получения значений в JavaScript. Синтаксис getOptionValue таков:

itemValue = getOptionValue(name, index)

Здесь name это строка, специфицированная как атрибут NAME тэга SELECT, а index это порядковый индекс выбранной опции, начиная с 0. Функция getOptionValue возвращает значение выбранного элемента, как специфицировано ассоциированным тэгом OPTION. Функция getOptionValueCount возвращает количество опций (специфицированных тэгами OPTION) в списке выбора. Она требует только одного аргумента, строки, содержащей имя тэга SELECT.

Например, у Вас имеется следующий элемент:

<SELECT NAME="what-to-wear" MULTIPLE SIZE=8>
<OPTION SELECTED>Jeans
<OPTION>Wool Sweater
<OPTION SELECTED>Sweatshirt
<OPTION SELECTED>Socks
<OPTION>Leather Jacket
<OPTION>Boots
<OPTION>Running Shoes
<OPTION>Cape
</SELECT>

Вы можете обработать ввод из этого select-списка таким образом:

<SERVER>
var i = 0;
var howmany = getOptionValueCount("what-to-wear");
while ( i < howmany ) {
var optionValue =
getOptionValue("what-to-wear", i);
write ("<br>Item #" + i + ": " + optionValue + "\n");
i++;
}
</SERVER>

Если пользователь оставил выбор по умолчанию, скрипт возвратит:

Item #0: Jeans
Item #1: Sweatshirt
Item #2: Socks

Кодирование Информации в URL

Вы можете вручную кодировать свойства объекта request в URL, по которому выполняется доступ к странице Вашего приложения. При создании URL используется следующий синтаксис:

URL?varName1=value1[&varName2=value2...]

Здесь URL это базовый URL, каждое varNameN это имя свойства, каждое valueN это соответствующее свойству значение (с мнемониками специальных символов). В этой схеме после базового URL идёт знак вопроса (?), после которого, в свою очередь, идут пары имён свойств и их значений. Каждая пара отделяется амперсандом (&). Когда машина выполнения на сервере получает результирующий URL в качестве клиентского запроса, она создаёт свойство объекта request под названием varNameN для каждой переменной.

Например, следующий HTML определяет гиперссылку на страницу, инстанциирующую свойства объекта request i и j в 1 и 2, соответственно. Операторы JavaScript в refpage.html могут затем обратиться к эти переменным request.i и request.j.

<A HREF="refpage.html?i=1&j=2">Click Here</A>

Вместо использования статической URL-строки, как в предыдущем примере, Вы можете использовать операторы серверного или клиентского JavaScript для динамической генерации URL, кодирующего значения свойств. Например, Ваше приложение может включать страницу:

<HTML>
<HEAD>
<SCRIPT>
function compute () {
// ... заменить подходящими расчётами,
// которые возвращают строку поиска ...
return "?num=25";
}
</SCRIPT>
</HEAD>
<BODY>
<a HREF="refpage.htm" onClick="this.search=compute()">
Click here to submit
a value.</a></p>
</BODY>
</HTML>

В данном случае, если пользователь щёлкнет на ссылке, машина выполнения на клиенте запустит на выполнение обработчик события onClick. Этот обработчик устанавливает часть поиска из URL в ссылке в какую-нибудь строку, возвращённую функцией compute. Когда машина выполнения на сервере получит этот запрос, она создаст свойство num объекта request и установит его значение в 25.

В качестве второго примера Вы можете добавить свойства объекта request в URL, созданный в серверном скрипте. Это особенно применимо, если Вы перенаправляете клиентский запрос на новую страницу. Чтобы добавить свойства объекта request в серверный скрипт, Вы можете использовать такой оператор:

<A HREF=`"refpage.html?i=" + escape(i) + "&j=" + escape(j)`>
Click Here</A>

Если вы создаёте URL в операторе серверного JavaScript, свойства объекта client не добавляются автоматически. Если Вы используете технику на основе URL для объекта client, используйте функцию addClient для генерирования окончательного URL. В этом примере оператор может быть таким:

<A HREF=`addClient("refpage.html?i=" + escape(i)
+ "&j=" + escape(j))`>Click Here</A>

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

Помните, что URL не изменяется, если пользователь перезагружает его, хотя содержимое страницы может измениться. Любые свойства, высланные в оригинальном URL, восстанавливают свои значения в URL, имевшиеся на момент его первой отправки, независимо от любых возможных изменений, сделанных при обработке. Например, если пользователь щёлкнул кнопку Reload для перезагрузки URL в предыдущем примере, i и j снова установятся в 1 и 2, соответственно.

 
Отправка Значений с Сервера Клиенту

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

Однако Вам может понадобиться выслать значения непосредственно клиентскому скрипту. Можно сделать это по-разному, включая такие способы:

  • Вы можете установить значения по умолчанию формы и значения для скрытых/невидимых элементов формы.
  • Вы можете непосредственно заменить информацию в клиентских операторах SCRIPT или обработчиках событий.
  • Вы можете использовать куки для отправки значений свойств объекта client или других значений клиенту.
  • Вы можете изменить шапку/header ответа, высылаемую клиенту, используя функции deleteResponseHeader и addResponseHeader.
 
Значения по Умолчанию Формы и Скрытых Элементов Формы

Чтобы отобразить HTML-форму с набором значений по умолчанию в элементах формы, используйте тэг INPUT для создания необходимых элементов формы, замещая выражения серверного JavaScript атрибутов VALUE. Например, Вы можете использовать следующий оператор для отображения элемента text и установки значения по умолчанию на основе значения переменной client.custname:

<INPUT TYPE="text" NAME="customerName" SIZE="30" VALUE=`client.custname`>

Начальным значением этого текстового поля становится значение переменной client.custname. Так, если значением client.custname является Victoria, клиенту будет выслан такой оператор:

<INPUT TYPE="text" NAME="customerName" SIZE="30" VALUE="Victoria">

Вы может использовать аналогичную технику со скрытыми элементами формы, если не хотите показывать значения пользователю, как в следующем примере:

<INPUT TYPE="hidden" NAME="custID" SIZE=5 VALUE=`client.custID`>

В обоих случаях Вы можете использовать эти значения клиентского JavaScript в значениях свойств объектов, доступных клиенту. Если эти два элемента находятся в форме с именем entryForm, то значения станут свойствами JavaScript document.entryForm.customerName и document.entryForm.custID, соответственно. Вы можете затем выполнять обработку этих значений на стороне клиента.

 
Прямая Замена

Вы можете также использовать серверный JavaScript для генерирования клиентских скриптов. Эти значения могут использоваться в последовательности операторов на клиенте. В качестве простого примера Вы можете инициализировать клиентскую переменную по имени budget на основе значения client.amount таким образом:

<p>The budget is:
<SCRIPT>
<SERVER>
write("var budget = " + client.amount);
</SERVER>
document.write(budget);
</SCRIPT>

Если значение client.amount равно 50, это сгенерирует такой JavaScript:

<p>The budget is:
<SCRIPT>
var budget = 50
document.write(budget);
</SCRIPT>

При запуске на клиенте это будет выглядеть так:

The budget is: 50

 
Использование Кук

Куки это механизм, который Вы можете использовать на клиенте для сохранения информации между запросами. эта информация находится в файле с названием cookie.txt (куки-файл), хранящемся на клиентской машине.

Вы можете использовать куки для отправки информации в обоих направлениях, от клиента серверу и с сервера клиенту. Куки, высылаемые с клиента, становятся свойствами объекта client или объекта request. Хотя Вы можете выслать с сервера клиенту любое строковое значение в качестве куки, простейший метод будет - отправить свойства объекта client.

 
Свойства Объекта client как Куки

Если приложение использует технику клиентских кук для работы с объектом client, машина выполнения на сервере сохраняет имена и значения свойств объекта client как куки на клиенте.

Для свойства объекта client propName машина выполнения автоматически создаёт куку с именем NETSCAPE_LIVEWIRE.propName, принимая, что приложение использует технику работы с клиентскими куками. Машина выполнения кодирует значения свойств так, как это требуется по протоколу кук Netscape cookie protocol.

Для доступа к этим кукам в клиентском JavaScript Вы можете извлечь эту информацию путём использования свойства document.cookie и такой функции как getSSCookie, как показано здесь:

function getSSCookie(name) {
var search = "NETSCAPE_LIVEWIRE." + name + "=";
var retstr = "";
var offset = 0;
var end = 0;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
retstr = unescape(document.cookie.substring(offset, end));
}
}
return(retstr)
}

Функция getSSCookie не является предопределённой функцией JavaScript. Если Вам нужна похожая функциональность, Вы обязаны определить её (функцию) в Вашем приложении.

Чтобы отправленная на сервер информация стала свойством объекта client, добавьте куку с именем, имеющим форму NETSCAPE_LIVEWIRE.propName. Предположим, Ваше приложение использует технику работы с клиентскими куками, а машина выполнения на сервере создаёт свойство объекта client под названием propName для данной куки.

Тогда Вы можете использовать функцию типа следующей:

function setSSCookie (name, value, expire) {
document.cookie =
"NETSCAPE_LIVEWIRE." + name + "="
+ escape(value)
+ ((expire == null) ? "" : ("; expires=" + expire.toGMTString()));
}

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

Вы можете вызывать эти функции в клиентском JavaScript для получения набора значений свойств объекта client, как в следующем примере:

var value = getSSCookie ("answer");
if (value == "") {
var expires = new Date();
expires.setDate(expires.getDate() + 7);
setSSCookie ("answer", "42", Expires);
}
else
document.write ("The answer is ", value);

Эта группа операторов проверяет, имеется ли свойство объекта client с названием answer. Если нет, код создаёт его и устанавливает значение 42; если найдено, выводится его значение.

 
Другие Куки

Когда серверу высылается запрос на страницу приложения JavaScript, шапка/header запроса включает все куки, установленные в данный момент для приложения. Можно использовать метод request.httpHeader для доступа к этим кукам из серверного JavaScript и присвоения их значений серверным переменным. И наоборот, Вы можете использовать функцию addResponseHeader для добавления новых кук в ответ, высылаемый обратно клиенту.

На клиентской стороне Вы можете использовать функцию вроде приведённой здесь для доступа к куке:

function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg) {
var end = document.cookie.indexOf (";", j);
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(j, end));
}
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}

И Вы может использовать функцию типа приведённой ниже для установки куки на клиенте:

function setCookie (name, value, expires, path, domain, secure) {
document.cookie =
name + "="
+ escape(value)
+ ((expires) ? "; expires=" + expires.toGMTString() : "")
+ ((path) ? "; path=" + path : "")
+ ((domain) ? "; domain=" + domain : "")
+ ((secure) ? "; secure" : "");
}

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

Вы можете использовать эту технику для передачи информации куки между клиентом и сервером, независимо от вида используемой техники работы с объектом client.


footer:
Rambler's Top100