AJAX ТЕХНОЛОГИЯ

Титульная > Общее описание > Подпрограммы


_

Общее описание

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

Сравнение стандартного подхода и AJAX

Классическая модель веб-приложения:


ajax1.jpg


Так построено классическое WEB-приложение

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

Модель AJAX:


ajax2.jpg


Устройство веб-приложения, использующего AJAX

- Пользователь заходит на веб-страницу и нажимает на какой-нибудь ее элемент.
- Браузер отправляет соответствующий запрос на сервер.
- Сервер отдает только ту часть документа, которая изменилась.

AJAX-подход к разработке веб-приложений базируется на двух основных принципах:

- Использование DHTML для динамического изменения содержимого страницы.
- Использование XMLHttpRequest для обращения к серверу "на лету", не перезагружая всю страницу полностью (также существует альтернативный вариант — динамическая подгрузка JavaScript с использованием DOM).

PHP, характер передачи данных без ajax

Запуск PHP модуля с помощью Javascript с передачей данных от X к $X выглядит следующим образом (но в данном случае происходит перезагрузка страницы):

location='module.php?X='+X;

Из окна out формы: location='module.php?X='+form.out.value.

Если передается строка, в которой элементы разделены запятыми, далее используется $X=split(',',$X), тогда функция count($X) возвращает размер вектора (а не строки).

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

В результате дальнейшей эксплуатации выяснилось, что оболочка обладает маленькой производительностью, и автор вынужден был переписать все заново, но уже на языке С, что позволило увеличить скорость работы РНР. Сегодня РНР - это мощный кроссплатформенный набор средств, который располагается на сервере и предназначен для обработки специального кода, встраиваемого в HTML-страницу. Благодаря этому, появляется возможность легко создавать динамические сайты. Файлы, созданные таким образом, хранятся и обрабатываются на сервере, и когда посетитель запрашивает документ с РНР, скрипт обрабатывается не браузером посетителя, как, например, JavaScript, а сервером, и посетителю передаются уже только результаты работы. Точно так же работает CGI-программа, написанная на С или Perl. Но, в отличие от CGI, код РНР можно встраивать в любое место HTML-странички, что является основным преимуществом по отношению к CGI. А кроме того, сам язык РНР очень прост для изучения и не требует каких-либо специфических знаний.

Термин AJAX впервые появился в статье Дж. Гарретта (Jesse James Garrett) "AJAX: Новый подход к веб-приложениям", опубликованной в феврале 2005 года. В этой статье автор обращает внимание читателя на новый подход к работе веб-приложений, реализованный программистами корпорации Google в известных интерактивных сервисах Google Maps и Google Suggest, и предлагает назвать этот новый подход термином AJAX. Полезная статья, очень рекомендуемая к прочтению каждому, кто интересуется современными веб-технологиями (технологиями Web 2.0).

Сам термин AJAX является сокращением и расшифровывается как "Asynchronous JavaScript And XML" (Aсинхронный JavaScript и XML). AJAX - это не самостоятельная технология, а синтез технологий, которые сами по себе существовали еще за несколько лет до появления термина AJAX. Так еще в 1996 году в браузере Internet Explorer была реализована поддержка тэга IFRAME, позволяющего загружать контент во фрейм без необходимости перезагрузки всей страницы. Поскольку тэг IFRAME и его аттрибут SRC позволяют осуществлять загрузку любого URL во фрейме, то при использовании JavaScript это в принципе позволяет добиться характерных для AJAX эффектов.

В настоящий момент технологии AJAX используются на целом ряде известных веб-сайтов. В частности, как отмечает в своей статье Дж. Гарретт, компания Google инвестирует в разработку AJAX-приложений существенные средства. Все новые сервисы Google, и в том числе такие сервисы как GMail, Orkut, Google Groups, Google Maps, Google Suggest, Google Finance и т.д., являются AJAX-приложениями.

ОБЩИЙ ШЛЮЗОВЫЙ ИНТЕРФЕЙС: КНОПКИ, ПОЛЯ ВВОДА


Общий шлюзовой интерфейс (Common Gateway Interface, или CGI) - это стандарт, который позволяет внешним программам взаимодействовать с серверами, например, серверами HTTP, баз данных, электронной почты и т.д. Для связи с Web-приложением (CGI-программой) используются HTML-формы. Формы создаются с помощью тэгов, которыми отмечаются поля ввода на Web-странице. После того как форма заполнена, все данные, введенные пользователем, передаются Web-серверу, который передает их дальше CGI-программе для обработки.


Быстрый переход по странице:


Тэг <FORM>


Тэг <FORM> используется для создания формы на Web-странице и для того, чтобы указать, что все поля внутри этого тэга принадлежат одной форме. Единственный способ поместить на странице поле ввода - заключить его в тэг <FORM>. Для создания формы применяется следующая конструкция:


<FORM>
<!-- Здесь вставляются поля формы -->
</FORM>


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


Атрибут ACTION


Обработка формы в некотором смысле аналогична обработке ссылки, так как при обработке формы у сервера также запрашивается определенный ресурс. В общем случае URL этого ресурса указывает на CGI-программу, которая должна обработать данные, введенные в форму. Создавая форму, в атрибуте ACTION вы указываете, какой ресурс обрабатывает данные этой формы. В следующем примере данные будут переданы программе cgi-bin/example.pl


<FORM ACTION="cgi-bin/example.pl">
<!-- Здесь вставляются поля формы -->
</FORM>


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


Атрибут METHOD


Этот атрибут указывает, каким способом передать данные серверу. Для этого существеют два метода - GET и POST. Вообще говоря, эти методы взаимозаменяемы, по крайней мере с точки зрения создания форм. При написании CGI-программы вам уже придется подумать, какой из методов передачи данных применить. Если метод не указан явно в тэге <FORM>, по умолчанию применяется метод GET.


Атрибут ENCTYPE


Этот атрибут указывает, как кодируются данные при передаче серверу. Типы кодирования перечислены в спецификации MIME. По умолчанию применяется тип кодирования application/x-www-form-urlencoded. Второй тип кодирования, который применяется только для полей, связанных с файлами, - multipart/form-data.


Атрибут TARGET


Если ваша страница состоит из нескольких фреймов, вы сможете с помощью атрибута TARGET указать, в каком фрейме отображать результаты обработки данных формы. Например, если ваша страница имеет два фрейма, left_nav и main_content, можете расположить поисковую форму в левом фрейме, а результаты поиска в правом, основном, фрейме. Для этого вы должны указать в тэге <FORM> атрибут TARGET="main_content". По умолчанию результаты обработки формы попадают в тот же фрейм, в котором находится сама форма.

Тэг <INPUT>


Тэг <INPUT> применяется для создания большинства полей формы. Атрибут TYPE этого тэга указывает, какое именно поле создается, а остальные атрибуты определяют параметры этого поля. Существуют чледующие типы полей: текстовое, поле пароля, флажок, переключатель, скрытое поле и поле файла. С помощью тэга <INPUT> создаются также кнопки Submit и Reset (Отправить и Очистить). Ниже мы рассмотрим все это подробнее.


Поговорим об атрибутах NAME и VALUE, которые есть у всех полей. Когда данные передаются серверу они организовываются в пары: имя-значение. Атрибут NAME позволяет вам идентифицировать (проименовать) каждое поле в форме. Вообще говоря, форма служит для того чтобы связать с каждым полем (именем) некоторое значение. Атрибут VALUE позволяет предварительно задать это значение. Смысл этого атрибута зависит от типа поля.


Иногда бывает так, что поля объединяются в группы, причем все поля группы имеют одно и то же имя. Мы рассмотрим такой случай ниже.

Кнопка


Кнопка (Button) применяется для старта javascript процедур. Атрибуту TYPE дается значение button. Атрибут VALUE определяет ее надпись. Вот пример кнопки:


<INPUT TYPE="button" value="Обработать" onClick="имя javascript процедуры">

Кнопка передачи


Кнопка передачи (Submit) применяется для передачи данных формы на сервер. Как именно данные будут переданы и куда, определяется в тэге <FORM> при создании формы. Для создания кнопки передачи атрибуту TYPE дается значение submit.


Атрибут VALUE определяет ее надпись. Вот пример создания кнопки передачи:


<INPUT TYPE="submit" value="передать данные">

Кнопка сброса


Кнопка сброса (Reset) предназначена для сброса всех введенных пользователем данных. Если для некоторого поля был указан атрибут VALUE, то при щелчке на кнопке сброса в поле заносится значение этого атрибута. Если такой атрибут не был указан, то поле просто очищается. Для создание кнопки сброса атрибуту TYPE дается значение reset.


Атрибут VALUE самой кнопки определяет ее надпись. Вот пример создания кнопки сброса:


<INPUT TYPE="reset" value="Сброс данных">


Файловые поля


Файловые поля предназначены для того, чтобы пользователь мог с помощью формы передать свой файл на сервер. Для создания такого поля атрибуту типа поля дается значение file. В таком поле пользователь может указать файл на своем компьютере, и при передаче данных этот файл юудет отослан вместе с ними. Форма имеющая файловые поля должна применять метод передачи POST и тип кодировки multipart/form-data.


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


Вот фрагмент кода, создающий файловое поле:


<P>Фотография:<br>
<INPUT TYPE="file" NAME="foto">
</p>


Фотография:


Текстовое поле


Поле в форме по умолчанию является текстовым. В такое поле текст можно вводить в виде одной строки. Вы можете при создании поля явно указать его тип, задав атрибут TYPE в тэге <INPUT>.


С помощью атрибута VALUE можно задать значение поля по умолчанию. Если этот атрибут указан, то его значение выводится в поле до того, как пользователь введет туда новое значение.


Атрибуты SIZE и MAXLENGTH обозначают отображаемую ширину поля и максимальное число символов, которое можно в него ввети. Вы должны указывать разумное значение атрибута MAXLENGTH, но вы не можете полагаться на его значение в своих CGI-программах. Посетитель вашей страницы может передать данные программе без использования формы, и вы должны учитывать это при программировании. Есть несколько способов передать данные программе, не соблюдая ограничений, наложенных формой. Например, пользователь может загрузить форму, модифицировать ее и передать данные. Кроме того, он может просто написать программу и передать данные вашей CGI-программе без помощи броузера вообще.


Вот пример тэга <INPUT>создающего текстовое поле:


<INPUT TYPE="TEXT" NAME="Name" SIZE="30" MAXLENGTH="60" VALUE="http://">


Вот так выполняется этот код:



Поле пароля


Поле для ввода пароля аналогично текстовому, за исключением того, что оно маскирует ввод пользователя так, что посторонний не может увидеть ваш пароль, подглядывая через ваше плечо. Но нужно иметь ввиду, что данные в этом поле никак не кодируются при передаче броузеру.


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


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


<INPUT TYPE="password" NAME="password" size="10" maxlength="10">



Флажок


Флажок служит для двоичного выбора - он или установлен или сброшен. Когда пользователь щелкает на флажке, его значение меняется на противоположное. Если флажок был установлен, он сбрасывается, и наоборот. Если флажот установлен в момент передачи данных форме, его пара имя-значение передается серверу, если он был сброшен, серверу ничего не передается.


Для того чтобы создать флажок, необходимо задать атрибуту TYPE значение checkbox. Атрибуту VALUE необходимо придать некоторое значение, иначе вы не сможете проверить состояние этого флажка так как будет недостаточно данных для формирования пары имя-значение. Неважно какое значение вы присвоита атрибуту VALUE, это просто условное значение, которое можно проверить в CGI-программе. Обычно его задаюк как yes или no.


У флажка может быть еще один атрибут - CHECKED. Он не имеет значения, просто если он установлен, флажок при открытии страницы будет установлен, если не указан - флажок будет сброшен. Вот пример кода и сразу же образец его выполнения:


<P>Ваши интересы:<br>
<INPUT TYPE="checkbox" NAME="books" value="yes">Книги<br>
<INPUT TYPE="checkbox" NAME="music" value="yes">Мызыка<br>
</p>


Ваши интересы:
Книги
Музыка


Переключатели


Переключатель предназначен для выбора из нескольких возможных ответов. Когда вы выбираете один из вариантов, то выбранный ранее сбрасывается. По-английски переключатель называется radio button, т.е. радиокнопка (по аналогии со старыми автомобильными приемниками, в которых при нажатии кнопки некоторой радиостанции ранее нажатая кнопка выскакивала).


Переключатель создается с помощью тэга <INPUT>, в котором атрибут имеет значение radio. Каждый тэг создает только одну кнопку переключателя, поэтому если вам нужно создать несколько связных кнопок, вы должны несколько раз применить тэг <INPUT> и каждый раз атрибуту NAME давать одно и то же имя.


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


<P>>Ваш месячный доход:<br>
<INPUT TYPE="radio" NAME="income" value="100">$100<br>
<INPUT TYPE="radio" NAME="income" value="250">$250<br>
<INPUT TYPE="radio" NAME="income" value="500">$500++<br>
</p>


Ваш месячный доход:
$100
$250
$500++


Скрытые поля


Существует такой тип поля, от которого, на первый взгляд нет пользы. Скрытые поля могут содержать данныекоторые пользователь не может изменить. Более того, скрытое поле вообще не отображается на странице. Однако данные, записанные в этом поле, существуют и передаются броузеру со всеми остальными данными. А броузер, в свою очередь, передает их серверу. Для того чтобы создать скрытое поле, вы должны указать атрибут TYPE со значением hidden. Кроме этого атрибута у скрытого поля могут быть атрибуты NAME и VALUE. Создается скрытое поле так:


<INPUT TYPE="hidden" NAME="name" value="value">


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


Немного о HTTP, методах GET и POST.


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

Немного о HTTP


Сервер принимает три типа запросов: GET, POST и HEAD. Запрос программы к Web-серверу выглядит следующим образом:


GET /index.html HTTP/1.0


Первая часть, в данном случае GET, - это метод запроса, вторая, index.html, - запрашиваемый URL, третья, HTTP/1.0, - протокол, используемый клиентом.


Два основных метода запроса - это GET и POST. Это те самые методы которые доступны вам при создании формы. Метод HEAD редко используется броузером, поскольку он запрашивает только заголовок ответа, а тело ответа в таком случае не передается. Например, для проверки того, не изменилась ли страница, броузер может запросить заголовок, но при этом не порождается полноценный обмен данными.

Метод GET


По умолчанию при запросе используется метод GET. Метод POST используется только тогда, когда это явно указано в запросе формы. Для CGI-программиста очень важно понимать, что при запросе методом GET данные формы передаются серверу вместе с URL. Web-серверы, поддерживающие CGI, копируют эти данные в переменную окружения с именем QUERY_STRING. После этого забота о получении данных из переменной окружения и их обработке возлагается на CGI-программу.


URL со строкой запроса выглядит так:


http://www.domen-name.com/login.pl?nick=maks&psw=parol


Знак ? отделяет строку запроса от собственно URL ресурса; nick и psw - переменные передаваемые серверу, maks и parol - их значения соответственно.

Метод POST


Метод POST используется тогда, когда это явно указано в атрибуте формы METHOD. В отличии от метода GET, POST помещает данные не в URL, а в тело запроса. Запрос POST во многом похож на ответ HTTP. Первая строка представляет собой стандартный запрос HTTP, в котором указан метод POST. В ней могут быть необходимые дополнительные заголовки, отделяемые от тела запроса пустой строкой.


Тело запроса при использовании метода POST передается программе как стандартный поток ввода.

Выбор между GET и POST


Понятно, что при разработке форм перед CGI-программистом встанет вопрос: какой из этих методов применять. В большинстве случаев применимы оба метода и оба будут хорошо работать. Однако бывают ситуации, когда использование того или иного метода дает определенные преимущества.


Рассмотрим несколько ситуаций, когда есть смысл предпочесть метод GET или POST.


  • Если вы хотите, чтобы ваша программа вызывалась с помощью ссылки, предпочтение следует отдать методу GET.

  • Если вы не хотите, чтобы аргументы, передаваемые вашей программе, записывались в файл отчета сервера, используйте метод POST. Например, если форма требует указать имя пользователя и пароль, вы вряд ли захотите, чтобы имена и пароли сохранялись в файле отчета. Кроме того, не разумно передавать пароль как часть URL.

  • Если ваша форма имеет значительные размеры, непример в ней есть текстовые окна с заметками и коментариями, следует использовать метод POST. Вообще говоря, можно и в этом случае применять метод GET, но тогда вы сможете столкнуться  с ограничениями на размер URL, разными для разных операционных систем и броузеров (ограничение обусловленно размером переменных окружения). Проще воспользоваться методом POST.

  • Если ваша форма содержит файловое поле, используйте метод POST. Кроме того, в этом случае нужно установить значение атрибута ENCTYPE в multipart/form-data.

artspb.com   

 


 

_