Вы можете выполнить данный запрос очень просто. Запустите программу telnet.exe, введите в качестве хоста www.php.net, укажите порт 80, и просто наберите данный запрос, нажав два раза Enter в качестве \r\n\r\n. В ответ вы получите HTML код главной страницы сайта www.php.net.
1.3 Структура запроса
Рассмотрим, из чего состоит HTTP запрос. Все достаточно просто. Начнем с того, что HTTP запрос — это вполне осмысленный текст. Из чего же он состоит в общем случае? Будем рассматривать протокол HTTP 1.0. Итак: Request-Line [ General-Header | Request-Header | Entity-Header ]\r\n[ Entity-Body ]
Request-Line — строка запроса
Формат: "Method Request-URI HTTP-Version\r\n"
Method — метод, которым будет обрабатываться ресурс Request-URI, может быть GET, POST, PUT, DELETE или HEAD. Request-URI — относительная или абсолютная ссылка на страницу с набором параметров, например, /index.html или http://www.myhost.ru/index.html или /index.html?a=1&b=qq. В последнем случае серверу будет передан запрос с набором переменных a и b с соответствующими значениями, а знак "&" — амперсант служит разделителем между параметрами. HTTP-Version — версия HTTP протокола, в нашем случае "HTTP/1.0".
Нам крайне интересны методы обработки GET и POST. Методом GET можно просто передать параметры в скрипт, а методом POST можно эмулировать submit формы.
Для метода GET, Request-URI может выглядеть, например, так: "/index.html?param1=1¶m2=2". General-Header — главная часть заголовка.
Формат: [Date: value\n | Pragma: no-cache\n]
Может иметь только два параметра: Date или Pragma. Date — дата по Гринвичу в формате "День недели, Число Месяц Год ЧЧ:ММ:СС GMT", например, "Tue, 15 Nov 1994 08:12:31 GMT" — дата создания запроса. Pragma может иметь одно значение no-cache, которое запрещает кэширование страницы.
Request-Header — часть заголовка, описывающая запрос.
Request-Header может иметь следующие параметры: Allow, Authorization, From, If-Modified-Since, Referer, User-Agent.
Вданной главе мы не будем рассматривать параметр Autorization, так как он используется для доступа к закрытым ресурсам, что требуется не так уж часто. Вы можете самостоятельно изучить формирование заголовка для авторизованного доступа на сайте www.w3c.org.
Allow — задает допустимые методы обработки.
Формат: "Allow: GET | HEAD\n".
Параметр игнорируется при указании метода обработки POST в Request-Line. Задает допустимые методы обработки запроса. Прокси сервера не модифицируют параметр Allow и он в неизменном виде доходит до сервера.
From — e-mail адрес, пославшего запрос.
Формат: "From: adderss\r\n".
Например, "From: myname@mailserver.ru\r\n".
If-Modified-Since — указывает, что запрос не модифицировался с такого-то времени.
Формат: "If-Modified-Since: date\r\n"
Используется только для метода обработки GET. Дата указывается по Гринвичу в таком же формате, как и для параметра
Date в General-Header.
Referrer — абсолютная ссылка на страницу, с которой произошла инициация запроса, т. е. ссылка на страницу, с которой пользователь перешел на нашу.
Формат: "Referrer: url\n".
Пример: "Referrer: www.host.ru/index.html\n". User-Agent — тип браузера.
Например: "User-Agent: Mozilla/4.0\n"
Entity-Header — часть заголовка, описывающая данные Entity-Body.
Вданной части запроса задаются параметры, которые описывают тело страницы. Entity-Header может содержать следующие параметры: Allow, Content-Encoding, Content-Length, Content-Type, Expires, Last-Modified, extension-header. Allow — параметр аналогичный Allow из General-Header.
Content-Encoding — тип кодирования данных Entity-Body. Формат: "Сontent-Encoding: x-gzip | x-compress | другой тип\n".
Пример: "Сontent-Encoding: x-gzip\n". Символ "|" означает слово "или", то есть то или то или то и.т.д.
Другой тип может указывать на способ кодирования данных, например, для метода POST: "Сontent-Encoding: application/x-www-form-urlencoded\n".
Content-Length — количество байт, пересылаемых в Entity-Body. Значение Content-Length имеет совсем другой смысл для данных, пересылаемых в формате MIME, где он выступает как параметр описания части данных — "external/entity-body". Допустимыми являются целые числа от нуля и больше.
Пример: "Content-Length: 26457\n". Content-Type — тип передаваемых данных.
Например: "Content-Type: text/html\n".
Expires — Время, когда страница должна быть удалена из кэша браузера.
Формат: "Expires: date\n". Формат даты алогичен формату даты для параметра Date из General-Header. Last-Modified — время последнего изменения пересылаемых данных.
Формат: "Last-Modified: date\n". Формат даты алогичен формату даты для параметра Date из General-Header. Extention-header — часть заголовка, которая может предназначаться, например, для обработки браузером, или другой программой, которая принимает документ. В данной части можно описывать свои параметры в формате "ParameterName:
parametervalue\n". Данные параметры будут игнорироваться, если программа-клиент не знает, как их обработать. Например: "Cookie: r=1\r\n" — устанавливает всем известные печеньки для страницы.
А теперь после таких страшных слов давайте попробуем немного успокоиться и понять, что же нам надо? Понимать мы естественно будем на примерах.
Давайте представим, что нам надо получить страницу с сайта, передав Cookies (Печеньки), иначе нас просто пошлют как незванных гостей, и более того, известно, что на данную страницу пускают только после того, как Вы побывали на главной странице сайта.
2 Метод GET Напишем наш запрос.
GET http://www.site.ru/news.html HTTP/1.0\r\n Host: www.site.ru\r\n
Referer: http://www.site.ru/index.html\r\n Cookie: income=1\r\n
\r\n
Данный запрос говорит нам о том, что мы хотим получить содержимое страницы по адресу http://www.site.ru/news.html, использую метод GET. Поле Host говорит о том, что данная страница находится на сервере www.site.ru, поле Referer говорит о том, что за новостями мы пришли с главной страницы сайта, а поле Cookie говорит о том, что нам была присвоена такая-то кука. Почему так важны поля Host, Referer и Сookie? Потому что нормальные программисты при создании динамических сайтов проверяют данные поля, которые появляются в скриптах (РНР в том числе) в виде переменных. Для чего это надо? Для того, например, чтобы сайт не грабили, т.е. не натравливали на него программу для автоматического скачивания, или для того, чтобы зашедший на сайт человек всегда попадал бы на него только с главной страницы и.т.д.
Теперь давайте представим, что нам надо заполнить поля формы на странице и отправить запрос из формы, пусть в данной форме будет два поля: login и password (логин и пароль),- и, мы естественно знаем логин и пароль.
GET http://www.site.ru/news.html?login=Petya%20Vasechkin&password=qq HTTP/1.0\r\n Host: www.site.ru\r\n
Referer: http://www.site.ru/index.html\r\n Cookie: income=1\r\n
\r\n
Логин у нас "Petya Vasechkin" Почему же мы должны писать Petya%20Vasechkin? Это из=за того, что специальные символы могут быть распознаны сервером, как признаки наличия нового параметра или конца запроса и.т.д. Поэтому существует алгоритм кодирования имен параметров и их значений, во избежание оштбочных ситуаций в запросе. Полное описание данного алгоритма можно найти здесь, а в PHP есть функции rawurlencode и rawurldecode для кодирования и декодирования соответственно. Хочу отметеить, что декодирование РНР делает сам, если в запросе были переданы закодированные параметры. На этом я закону первую главу знакомства c протоколом HTTP. В следуючей главе мы рассмотрим построение запросов типа POST (в переводе с английского — "отправить"), что будет гораздо интереснее, т.к. именно данный тип запросов используется при отправке данных из HTML форм.
3. Метод POST.
В случае HTTP запроса типа POST существует два варианта передачи полей из HTML форм, а именно, используя алгоритм application/x-www-form-urlencoded и multipart/form-data. Различия между данными алгоритмами весьма существенные. Дело в том, что алгоритм первого типа создавался давным-давно, когда в языке HTML еще не предусматривали возможность передачи файлов через HTML формы. Итак, давайте рассмотрим эти алгоритмы на примерах.
3.1 Content-Type: application/x-www-form-urlencoded.
Пишем запрос, аналогичный нашему запросу GET для передачи логина и пароля, который был рассмотрен в предыдущей главе:
POST http://www.site.ru/news.html HTTP/1.0\r\n Host: www.site.ru\r\n
Referer: http://www.site.ru/index.html\r\n Cookie: income=1\r\n
Content-Type: application/x-www-form-urlencoded\r\n Content-Length: 35\r\n
\r\n
login=Petya%20Vasechkin&password=qq
Здесь мы видим пример использования Content-Type и Content-Length полей заголовка. Content-Length говорит, сколько байт будет занимать область данных, которая отделяется от заголовка еще одним переводом строки \r\n. А вот параметры, которые раньше для запроса GET помещались в Request-URI, теперь находятся в Entity-Body. Видно, что они формируются точно также, просто надо написать их после заголовка. Хочу отметить еще один важный момент, ничто не мешает, одновременно с набором параметров в Entity-Body, помещать параметры с другими именами в Request-URI, например:
POST http://www.site.ru/news.html?type=user HTTP/1.0\r\n
.....
\r\n
login=Petya%20Vasechkin&password=qq 3.2 Content-Type: multipart/form-data
Как только интернет мир понял, что неплохо бы было через формы отсылать еще и файлы, так W3C консорциум взялся за доработку формата POST запроса. К тому времени уже достаточно широко применялся формат MIME (Multipurpose Internet Mail Extensions — многоцелевые расширения протокола для формирования Mail сообщений), поэтому, чтобы не изобретать велосипед заново, решили использовать часть данного формата формирования сообщений для создания POST запросов в протоколе HTTP.
Каковы же основные отличия этого формата от типа application/x-www-form-urlencoded?
Главное отличие в том, что Entity-Body теперь можно поделить на разделы, которые разделяются границами (boundary). Что самое интересное — каждый раздел может иметь свой собственный заголовок для описания данных, которые в нем хранятся, т.е. в одном запросе можно передавать данные различных типов (как в Mail письме Вы одновременно с текстом можете передавать файлы).
Итак, приступим. Рассмотрим опять все тот же пример с передачей логина и пароля, но теперь в новом формате.
POST http://www.site.ru/news.html HTTP/1.0\r\n Host: www.site.ru\r\n
Referer: http://www.site.ru/index.html\r\n Cookie: income=1\r\n
Content-Type: multipart/form-data; boundary=1BEF0A57BE110FD467A\r\n Content-Length: 209\r\n
\r\n --1BEF0A57BE110FD467A\r\n
Content-Disposition: form-data; name="login"\r\n \r\n
Petya Vasechkin\r\n --1BEF0A57BE110FD467A\r\n
Content-Disposition: form-data; name="password"\r\n \r\n
qq\r\n --1BEF0A57BE110FD467A--\r\n
Теперь давайте разбираться в том что написано. :-) Я специально выделил некоторые символы \r\n жирным, чтобы они не сливались с данными. Присмотревшись внимательно можно заметить поле boundary после Content-Type. Это поле задает разделитель разделов — границу. В качестве границы может быть использована строка, состоящая из латинских букв и цифр, а так же из еще некоторых символов (к сожалению, не помню каких еще). В теле запроса в начало границы добавляется '--', а заканчивается запрос — границей, к которой символы '--' добавляются еще и в конец. В нашем запросе два раздела, первый описывает поле login, а второй поле password. Content-Disposition (тип данных в разделе) говорит, что это будут данные из формы, а в поле name задается имя поля. На этом заголовок раздела заканчивается и далее следует область данных раздела, в котором помещается значение поля (кодировать значение не требуется!).
Хочу обратить Ваше внимание та то, что в заголовках разделов не надо использовать Content-Length, а вот в заголовке запроса надо и его значение является размером всего Entity-Body, стоящего после второго \r\n, следующего за ContentLength: 209\r\n. Т.е. Entity-Body отделяется от заголовка дополнительным переводом строки (что можно заметить и в разделах).
Атеперь давайте напишем запрос для передачи файла.
POST http://www.site.ru/postnews.html HTTP/1.0\r\n Host: www.site.ru\r\n
Referer: http://www.site.ru/news.html\r\n Cookie: income=1\r\n
Content-Type: multipart/form-data; boundary=1BEF0A57BE110FD467A\r\n Content-Length: 491\r\n
\r\n --1BEF0A57BE110FD467A\r\n
Content-Disposition: form-data; name="news_header"\r\n \r\n
Пример новости\r\n --1BEF0A57BE110FD467A\r\n
Content-Disposition: form-data; name="news_file"; filename="news.txt"\r\n Content-Type: application/octet-stream\r\n
Content-Transfer-Encoding: binary\r\n \r\n
Авот такая новость, которая лежит в файле news.txt\r\n
--1BEF0A57BE110FD467A--\r\n
В данном примере в первом разделе пересылается заголовок новости, а во втором разделе пересылается файл news.txt. Внимательный да увидит поля filename и Content-Type во втором разделе. Поле filename задает имя пересылаемого файла, а поле Content-Type — тип данного файла. Application/octet-stream говорит о том, что это стандартный поток данных, а Content-Transfer-Encoding: binary говорит на о том, что это бинарные данные, ничем не закодированные. Очень важный момент. Большинство CGI скриптов написано умными людьми, поэтому они любят проверять тип пришедшего файла, который стоит в Content-Type. Зачем? Чаще всего закачка файлов на сайтах используется для получения картинок от посетителя. Так вот, браузер сам пытается определить что за файл посетитель хочет отправить и
вставляет соответствующий Content-Type в запрос. Скрипт его проверяет при получении, и, например, если это не gif или
не jpeg игнорирует данный файл. Поэтому при "ручном" формировании запроса позаботьтесь о значении Content-Type, чтобы оно было наиболее близким к формату передаваемого файла.
image/gif |
для gif |
image/jpeg |
для jpeg |
image/png |
для png |
image/tiff |
для tiff (что используется крайне редко, уж больно емкий формат) |
|
|
В нашем примере формируется запрос, в котором передается текстовый файл. Точно так же формируется запрос для передачи бинарного файла.
4. Постскриптум.
Думаю, что о передаче запросов на сервер не стоит рассказывать подробно. Это уже дело чисто РНР техники :-). Достаточно внимательно прочитать раздел о функциях работы с сокетами, или о функциях модуля CURL в официальной документации РНР.
Из выше сказанного, надеюсь теперь понятно, почему вопрос: "Как мне сформировать POST запрос, используя функцию header?" — бессмысленен. Функция header(string) добавляет запись только в заголовок запроса, но никак не в тело запроса.
Есть еще один тип запросов — Content-Type: multipart/mixed, надеюсь после прочтения данной статьи Вы легко разберетесь с данным типом сами. Подробно изучить его можно Здесь
О запросах других типов можно прочитать в официальной спецификации протокола HTTP 1.0 здесь.
Для чего нужны клиентские сценар ии?
Начиная изучать web -техно логии , В ы узнали , что все web -до кум енты со здаются с по мощью языка HT ML, ко тор ый не является языком про грамм иро вания, а лишь языком разметки гипер тексто вых до кум енто в. Тепер ь же выясняется , что для создания web -до кум ентов недостаточно знать то лько язык HTML, а нужно ум еть еще и про гр амм иро вать. Зачем это?
Дело в том, что без програм м иро вания мо жно создавать лишь статичные web -до кум енты , ко тор ые никак не р еагир уют на действия по льзо вателя - их м о жно то лько просм атр ивать.
Клиентские сценар ии обеспечивают интер активно сть до кум ентов и выпо лняют р яд др угих полезных функций . Во т их непо л ный перечень:
1 . Пер вичная о брабо тка по льзо вательских данных ( введенных по средством фор мы) до о тпр авки их на сер вер.
Если данные введены невер но или не в по лном объеме ( напр имер, не запо лнены обязательные по ля, число сим во ло в в ИНН, номере страхо вого сви детельства, паспор та и т . д. не со о тветствует
о пр еделенно м у ко личеству, в e -mail о тсутствует знак @ или точка, в телефо нном ном ере есть буквы , в фам илии - цифры и т.д . ) на клиенте фор м ируется соо бщение о б ошибке и соо тветствующий элем ент форм ы пр ио бретает фо кус . Данные пользо вателя не тер яются. Эко ном ится врем я и снижается тр аффик. На сер вере со хр аняются только пр овер енные данные.
Для о беспечения тако й про вер ки кно пка sub mit зам еняется кно пко й b utto n, для ко торо й назначается
обр або тчик со бытия o nclick. Е го значением является вызо в клиенско й функции , ко тор ая
обеспечивает про вер ку по льзо вательских данных и, либо соо бщает о б ошибке и обеспечивает фо кус том у или ином у элементу, либо отправляет данные сервер но м у сценарию ( указанно м у в
атр ибуте actio n тэга form. )
2 . Динам ическое изм енение стиля или содер жания всего до кум ента или о тдельных фр агментов в зависимости о т характер истик бр аузера клиента .
Ср едствам и клиентских сценар иев мо жно автом атически выяснить название и версию бр аузер а клиента , а также р яд хар ак тер истик бр аузера и ПК по льзо вателя ( наприм ер, есть ли
по ддер жка FLASH, Java-апплет , како во р азр ешение дисплея и т .д .). В зависимости о т это го мо жно пр едусмо треть загр узку, напр имер, тексто во й версии сайта .
Настро йку стиля мо жно сделать интер активно й - напр им ер на
сайте www. eco mstatio n.ru по льзо вателю пр едлагается выбрать цвето вую схем у о форм ления сайта .
В последнее вр ем я все бо льшее распро странение по лучают Системы Управления Ко нтентом (CMS - Co nte nt Management Systems) . Это клиент -сер вер ные пр ило жения , по зво ляющие непо дго то вленном у
в о бласти Web -техно логий по льзо вателю со здавать на сайте но вые страницы , р азделы, редактиро вать или удалять существующие . Они со дер жат встро енные WYSIW YG ком по ненты, поз во ляющие легко форм атиро вать HTML -до кум ент в визуально м режиме (сгенер иро ванный код затем записывается в сер вер ную базу данных) . См ., напр им ер, FCKEd itor .
3 . Обеспечение интерактивно сти в зависимо сти от назначения web -сайта , р еагиро вания на р азличные со бытия
( см. раздел Обработ ка событ ий )
см ены исто чника изо бражения , о пределения траектор ии
движения фр агмента , движения на кур сор " Перетаскивание" фр агменто в В ключение и выключение звука
По явление или со крытие отдельных фр агменто в Со здание хр о ном етра ( напр им ер, для систем о нлайно вого тестирования )
1 или 2
и м но гое др угое ...
4 . Авто матическое о бновление стр аниц чер ез опр еделенные интер валы вр ем ени .
Это мо жет по требо ваться , напр им ер, на но востных страницах, сайтах, где осуществляются о нлайно вые финасо вые о перации ( для о беспечения актуально сти информ ации), или , напр им ер, в
системах аутентификации , где нео бхо димо о граничить врем я пр ебывания по льзо ват еля на стр анице .
5 . Всевозмо жные р асчеты .
Напр имер , пересчет стоим ости корзины пр и изм енении ее состава или пер есчет сим плексно й таблицы пр и перехо де о т одного о по р но го плана к др уго м у.
6 . Со здание ключико в (coo kies) - небо льших количеств информации на ко м пьютере клиента.
С помо щью ключико в, напр им ер, о беспечивается то т факт, что каждый по льзо ватель ( зах одя в электро нный м агазин с о дно го и то го же ПК) видит в корзине сво и товары, пр ичем эта корзина хр анится о пр еделенное вр ем я, а затем о чищается .
Java и JavaScrip t - про сьба не путать !
Осно вным и языкам и создания клиентских сценар иев являются JavaScript и VBScript . Нер едко язык JavaScript называют Java . Это гр убая о шибка . Дело в том, что Java - это др уго й язык
про гр амм иро вания. И Java, и JavaScript - языки про грам м иро вания для Интер нет, но между ним и существует пр инципиальная р азница.
На языке JavaScript , как В ы уже знаете , создаются програм мы ( так называем ые клиент ские сценарии ), ко тор ые встр аиваются в ко д HTML -до кум ента и интер пр етир уются браузером.
Про граммы , написанные на языке Java сначала компилируют ся , а уж е по том в о тком пилированном виде пер ем е щаются по сети. Главным пр еим уществом языка Java является плат форменная независимост ь , т. е. во змо жность выпо лнения на ком пьютер ах с р азлично й ар хитектур о й, р азличным и о перацио нным и системам и.
Язык Java позво ляет создавать про гр амм ы двух типо в:
пр ило ж ен и я (applications ), т .е. о бычные прикладные про гр амм ы, анало гичные тем, ко торые создаются на др угих языках про грам м иро вания ;
апплеты (applets) , т. е. про граммы , ко тор ые могут существо вать только в среде HTML -до кум ента ( пр имер ).
Язык JavaScript , или язык сценар иев, по явился в в ко нце 1995 г . благо дар я совместным усилиям ком паний Netscape и Sun Microsystems . Техно ло гия Java к этом у времени бла уже очень
по пуляр но й. Как и Java, JavaScript является объект но -ориент ированным .
Почти ср азу же после по явления языка JavaScript , ком пания Microsoft о ценила его значимость и создала со бственную его вер сию - язык сценариев JScript . Это т язык сейчас широ ко пр им еняется для р азр або тки сер вер ных сценар иев, в частно сти, в техно ло гии Microsoft ASP (Active Server Pages ).
Ко нтейнер <scrip t>... </scrip t> - куда его пр истро ить?
Для того, что бы браузер распознал сценар ий , встр оенный в HTML -код , его (сценар ий ) следует заключать в ко нтейнер
<script>...</script>
Сценар ий , заключенный в ко нтейнер, мо жет распо лагаться в любом месте до кум ента , но по
возмо жно сти следует разм ещать сценар ии в секции <he a d>.. . </hea d> . В этом случае сценар ий будет загр ужен в пам ять ср азу же по вызо ву до кум ента браузером. Кром е то го, размещение сценар иев в секции <hea d>. .. </hea d> делает ко д бо лее по нятным.
До кумент мо жет со держать неско лько сценариев - каждый из них должен быть заключен в
ко нтейнер <sc ript >.. . </sc r ipt > . Исключение составляют сценар ии, выпо лняем ые пр и о бр або тке какого -либо со бытия : они ( без ко нтейнер а <script >.. . </scr ipt > ) пом ещаются непоср едственно в соо тветствующий тэг . Напр имер , пр и щелчке на кно пке вызывается метод a le rt :
<input type="Button" value="Проверим работу метода alert" onclick="alert('ЭТО НАШ ПЕРВЫЙ JAVASCRIPT-
сценарий!!!!');">
Сценар ий мо жно р азм естить о тдельно о т HTML -до кум ента - в др уго м файле. В это м случае
тэг <script> до лжен иметь атр ибут src='адрес файла со сценарием '. Ф айл, со дер жащий сценар ий, до лжен иметь расширение js. Тэго в <head>, <bo dy>, <script> в нем указывать не нужно - там
до лжен со дер жаться только сам сценар ий .
<script src="myScript.js"></script>
Обработка событий в JavaScript
Популярность JavaScript во многом обусловлена именно тем, что написанный на нем сценарий может реагировать на действия пользователя и другие внешние события. Каждое из событий связано с тем или иным объектом: формой, гипертекстовой ссылкой или даже с окном, содержащим текущий документ.
В качестве примеров внешних событий, на которые могут реагировать объекты JavaScript, можно привести следующие. окончание загрузки документа в окно (или окончание загрузки документов во все фреймы окна). Это событие связано с объектом window;
щелчок мышью на объекте. Это событие может быть связано с интерактивным элементом формы или с гипертекстовой ссылкой;
получение объектом фокуса ввода. Это событие может быть связано с объектами типа Text, Password и с другими интерактивными элементами; передача на сервер данных, введенных пользователем с помощью интерактивных элементов. Связывается с формой.
Обработка события производится с помощью специально предназначенного для этого фрагмента кода, называемого обработчиком события. Для каждого события JavaScript предоставляет свой обработчик. Однако при построении сценария можно создавать собственный обработчик события и использовать его вместо обработчика, заданного по умолчанию.
Имя обработчика определяет, какое событие он должен обрабатывать. Так, для того чтобы сценарий нужным образом отреагировал на щелчок мышью, используется обработчик с именем onClick, для обработки события, заключающегося в получении фокуса ввода, - обработчик onFocus.
Для того чтобы указать интерпретатору JavaScript на то, что обработкой события должен заниматься обработчик, необходимо включить в HTML-дескриптор следующее выражение:
имя_обработчика="команды_обработчика"
Это выражение включается в тэг, описывающий объект, с которым связано событие.
Например, если необходимо обработать событие, заключающееся в получении фокуса полем ввода, дескриптор, описывающий этот интерактивный элемент, должен иметь примерно следующий вид:
<input type="text" name="Inform" onFocus="handleFocus();">
Имя обработчика является одним из атрибутов HTML-дескриптора, а команды, предназначенные для обработки события, выступают в роли значения этого атрибута. В данном случае обработка события производится в теле
функции handleFocus(). В принципе, обработчиком может быть не только функция, но и любая последовательность команд JavaScript в виде составного оператора.
Следующий пример демонстрирует обработку события, связанного с наведением курсора мыши на гиперссылку:
<a href = "http://www.myhp.edu"
onmouseover="alert('An onMouseOver event'); return false"> <img src="my.gif" width="50" height="50">
</a>
Ниже приводится полный текст HTML документа c JavaScript сценарием, в котором обрабатывается событие нажатия кнопки мыши, и определяется, какая именно из них была нажата:
<html>
<head>
<script language = "javascript"> function whichButton(event)
{
if (event.button == 2)
{
alert("Вы щелкнули правой кнопкой мыши!");
}
else
{
alert("Вы щелкнули левой кнопкой мыши!");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>Щелкните любой кнопкой мыши в любом месте документа</p>
</body>
</html>
Пример 7.1.
Таким образом, для того чтобы обработать какое-либо стандартное событие в браузере, необходимо добавить в подходящий HTML тэг атрибут, соответствующий этому событию, указав в качестве значения атрибута имя JavaScript функции. Список атрибутов, которые определены для HTML тэгов приводится ниже:
IE: Internet Explorer, F: Firefox, O: Opera, W3C: стандарт
Атрибут |
Описание |
Номер версии браузера W3C |
|||
|
|
IE |
F |
O |
|
onabort |
Прерванная загрузка изображения |
4 |
1 |
9 |
Да |
onblur |
утрата фокуса элементом |
3 |
1 |
9 |
Да |
onchange |
Изменение содержимого в поле ввода |
3 |
1 |
9 |
Да |
onclick |
Щелчок мыши на объекте |
3 |
1 |
9 |
Да |
ondblclick |
Двойной щелчок мыши на объекте |
4 |
1 |
9 |
Да |
onerror |
Ошибка при загрузке изображения или документа 4 |
1 |
9 |
Да |
|
onfocus |
Получение фокуса элементом |
3 |
1 |
9 |
Да |
onkeydown |
Нажатие клавиши |
3 |
1 |
Нет |
Да |
onkeypress |
Клавиша нажата |
3 |
1 |
9 |
Да |
onkeyup |
Отжатие клавиши |
3 |
1 |
9 |
Да |
onload |
Завершение загрузки страницы или изображения |
3 |
1 |
9 |
Да |
onmousedown Нажатие кнопки мыши |
4 |
1 |
9 |
Да |
|
onmousemove Перемещение курсора мыши |
3 |
1 |
9 |
Да |
|
onmouseout |
Смещение курсора мыши с объекта |
4 |
1 |
9 |
Да |
onmouseover |
Наведение курсора мыши на объект |
3 |
1 |
9 |
Да |
onmouseup |
Отжатие кнопки мыши |
4 |
1 |
9 |
Да |
onreset |
Кнопка "Reset" нажата |
4 |
1 |
9 |
Да |
onresize |
Изменение размера окна |
4 |
1 |
9 |
Да |
onselect |
Выделение текста |
3 |
1 |
9 |
Да |
onsubmit |
Кнопка "Submit" нажата |
3 |
1 |
9 |
Да |
onunload |
Уход с веб-страницы |
3 |
1 |
9 |
Да |
Использование языка сценариев JavaScript |
|
|
|
|
|
В сети Интернет размещено огромное количество сценариев обработки HTML-документов, как очень простых, так и достаточно сложных. Среди них значительную часть составляют программы, написанные на языке JavaScript. Цель данного параграфа -- рассмотреть некоторых из них и научить вас использовать их на своих HTML-страничках. Подробнее возможности языка подготовки сценариев JavaScript рассматриваются в разделе "Программирование для Интернет".
Программы на языке программирования JavaScript часто называют сценариями или скриптами. По сути они представляют собой набор инструкций по управлению браузером. Код программы размещается непосредственно в HTML-документе или в виде отдельного файла.
Скрипты могут находится в любом месте HTML-документа. Однако между строчками кода JavaScript-программы нельзя помещать теги языка HTML. Поэтому чаще всего скрипт размещают внутри раздела <HEAD> документа. Сама JavaScript-программа размещается между тегами <SCRIPT> ... </SCRIPT>. Встретив тег <SCRIPT>, браузер построчноанализирует содержимое документа до тех пор, пока не будет достигнут тег </SCRIPT>. После этого проводится проверка скрипта на наличие ошибок и компиляция программы в формат, пригодный для использования в данном браузере. Не все браузеры понимают код JavaScript, поэтому полезно заключать весь код сценария в комментарии (<!-- и //-->)
Для размещения текста программы внутри HTML-документа используют конструкцию
<SCRIPT LANGUAGE="JavaScript"> <!--
...
здесь располагается код программы
...
//--> </SCRIPT>
Программы на языке JavaScript можно размещать и в виде отдельных текстовых файлов, имеющих расширение .js. Для подключения такого сценария используется параметрSRC тега <SCRIPT>, содержащий абсолютный URL файла, из которого загружается сценарий. Адрес URL может быть и относительным, задавая, например, скрипт, расположенный в том же каталоге, что и текущий HTML-документ:
<SCRIPT SCR="myScript.js"> </SCRIPT>
Кроме этого, для работы программы в "теле" HTML-документа могут содержатся конструкции кода, позволяющие начать выполнение программы. Дело в том, что мало разместить в правильном месте код сценария, даже правильно написанный, необходимо еще дать команду браузеру для запуска программы.
Пример
Рассмотрим HTML-файл со сценарием на языке JavaScript, который отображает текущее время.
<HTML>
<HEAD>
<TITLE>Электронные часы</TITLE> <!--
<SCRIPT LANGUAGE="JavaScript">
function clock_form() { day=new Date() clock_f=day.getHours()+":"+
day.getMinutes()+":"+
day.getSeconds() document.form.f_clock.value=clock_f id=setTimeout("clock_form()",100)
}
//--> </SCRIPT> </HEAD>
<BODY onLoad="clock_form()"> <FORM NAME="form">
Московское время:
<INPUT NAME="f_clock" SIZE="8"> </FORM>
</BODY>
</HTML>
В этом примере для запуска сценария используется конструкция onLoad = "clock_form()", размещенная в качестве атрибута тега <BODY>. Для вывода показаний часов используется элемент <FORM>...</FORM>, размером в 8 символов.
Пример Следующий скрипт создает "бегущую строку" в окне браузера. Для изменения скорости вывода информации
используется переменная speed, текст строки задается в переменнойline. <HTML>
<HEAD>
<TITLE>Бегущая строка</TITLE> </HEAD>
<SCRIPT LANGUAGE="JavaScript"> <!--
var line="Центр Компьютерных Технологий"; var speed=200;
var i=0;
function m_line() { if(i++<line.length) {
document.form.ctc.value=line.substring(0,i);
}
else{ document.form.ctc.value=" "; i=0;
}
setTimeout('m_line()',speed);
}
//--> </SCRIPT>
<BODY onload="m_line()"> <CENTER>
<FORM NAME="form">
<INPUT TYPE="text" SIZE="30" NAME="ctc"> </FORM>
</CENTER>
</BODY>
</HTML>
Следующий файл содержит скрипт "Бегущая строка".
Что такое AJAX ? Пример реализации.
AJAX, или, более длинно, Asynchronous Javascript And Xml - технология для взаимодействия с сервером без перезагрузки страниц.
За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп. Например, при нажатии кнопки голосовать - из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.
Здесь будет ответ сервера
Технология AJAX, как указывает первая буква A в ее названии - асинхронна, т.е браузер, отослав запрос, может делать что угодно, например, показать сообщение об ожидании ответа, прокручивать страницу, и т.п.
Вот код кнопки в примере выше:
<input value="Голосовать!" onclick="vote()" type="button" />
При нажатии она вызывает функцию vote, которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в div'е под кнопкой:
<div id="vote_status">Здесь будет ответ сервера</div>
Далее мы разберем, как она работает, более подробно.
Для обмена данными с сервером используется специальный объект XmlHttpRequest, который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:
01 function getXmlHttp(){
02 var xmlhttp;
03 |
try { |
04 |
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); |
05 |
} catch (e) { |
06 |
try { |
07 |
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); |
08 |
} catch (E) { |
09xmlhttp = false;
10}
11}
12if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
13xmlhttp = new XMLHttpRequest();
14}
15return xmlhttp;
16}
Более подробно о деталях реализации AJAX с использованием XmlHttpRequest и других транспортов можно почитать в разделе про общение с сервером.
Здесь мы не будем на этом останавливаться и перейдем сразу к функции vote:
01 |
// javascript-код голосования из примера |
02 function vote() { |
|
03 |
// (1) создать объект для запроса к серверу |
04 |
var req = getXmlHttp() |
05 |
|
06 |
// (2) |
07 |
// span рядом с кнопкой |
08 |
// в нем будем отображать ход выполнения |
09 |
var statusElem = document.getElementById('vote_status') |
10 |
|
11req.onreadystatechange = function() {
12// onreadystatechange активируется при получении ответа сервера
13
14if (req.readyState == 4) {
15// если запрос закончил выполняться
17 |
statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..) |
18 |
|
19if(req.status == 200) {
20// если статус 200 (ОК) - выдать ответ пользователю
21alert("Ответ сервера: "+req.responseText);
22}
23// тут можно добавить else с обработкой ошибок запроса
24}
25
26 }
27
28// (3) задать адрес подключения
29req.open('GET', '/ajax_intro/vote.php', true);
31// объект запроса подготовлен: указан адрес и создана функция onreadystatechange
32// для обработки ответа сервера
33 |
|
34 |
// (4) |