Урок 1 – немного теории.

Урок 1 – немного теории.

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

HTML

Все веб-страницы, которые вы видите на экране, браузер получает от сервера в виде обычного текста, который можно посмотреть в блокноте. Посмотреть этот текст в Firefox можно нажав ctrl+U, а лучше всего с помощью Firebug на закладке HTML. Этот текст составлен в специальном формате, который называется HTML. Устроен он следующим образом:

<div>
    <a href="/index.php">Index</a>
    <div class="myClass">
        <img src="/images/logo.png" alt="Logo image" />
    </div>
</div>
  

Он состоит из тегов (то что между треугольными скобками)
div, img, a — это имена тегов
href="/index.php", class="myClass" — это атрибуты,
href, class — имена атрибутов, "/index.php" и "myClass" — их значения.
Теги бывают открывающими <div>, закрывающими </div>, все что между ними называется контентом (содержимым) тега. В качестве контента так же могут быть другие теги. Таким образом теги образуют древовидную структуру, похожую на файлы и папки. Если у тега нет контента, то он может быть сразу открывающим и закрывающим, как тег img в примере. Все это вместе называется формат XML.

HTML отличается тем, что придает смысл всем этим надписям. Вот что означают самые распространенные теги:
<a href="http://example.com/index.php">Текст ссылки</a> — ссылка
<img src="http://example.com/images/logo.png" /> — изображение
<table>, <tbody>, <tr>, <td> — таблицы; tr — строка таблицы, td — столбец
<div>, <span>, <p> — эти элементы служат для отделения частей страницы друг от друга и сами по себе ничего не делают.
<head> — заголовок страницы, внутри него подключаются скрипты и стили
<body> — тело страницы, здесь находятся все видимые элементы

HTTP

Давайте теперь посмотрим как устроены запросы в браузере. Когда вы набираете в адресной строке браузера адрес сайта, например http://vkontakte.ru, происходит вот что:

  • Браузер отправляет запрос на сервер, чтобы он прислал страницу. Запрос это тоже обычный текст. Выглядит он вот так.
GET http://vkontakte.ru/ HTTP/1.1
Host: vkontakte.ru
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive

Первая строка-строка запроса содержит команду «GET», которая означает что мы хотим скачать страницу, затем идет адрес страницы и версия протокола. Дальше идут заголовки. У заголовков есть имя и значение, отделенные двоеточием.

  • В ответ контакт присылает главную страницу
HTTP/1.1 200 OK
Server: nginx/0.7.59
Date: Tue, 11 Jan 2011 15:10:42 GMT
Content-Type: text/html; charset=windows-1251
Connection: keep-alive
X-Powered-By: PHP/5.2.6-1+lenny3
Set-Cookie: remixchk=5; expires=Sun, 01-Jan-2012 20:36:31 GMT; path=/; domain=.vkontakte.ru
Pragma: no-cache
Cache-control: no-store
Vary: Accept-Encoding
Content-Length: 13110

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<script type="text/javascript" src="/al_loader.php?act=nav&v=1094"></script>
<link rel="shortcut icon" href="/images/favicon.ico" />
<meta name="description" content="<b>ВКонтакте</b> – универсальное средство поиска знакомых. Мы хотим, чтобы друзья, однокурсники, одноклассники, соседи и коллеги всегда оставались в контакте." />
<title>В Контакте | Добро пожаловать</title>
<link rel="stylesheet" type="text/css" href="/css/al/common.css?83" />
<script type="text/javascript" src="/js/al/common.js?187"></script>
<script type="text/javascript" src="/js/lang0_0.js?1990"></script>
<script type="text/javascript" src="/js/al/index.js?9"></script>
<link type="text/css" rel="stylesheet" href="/css/al/reg.css?15"></link>
</head>

<body onresize="onBodyResize()">
<div id="system_msg"></div>
<div id="utils"></div>

Бла-бла-бла

</body>
</html>

Ответ сервера похож на запрос и отличается первой строкой, в которой содержится результат выполнения команды. Затем идут заголовки, а потом после пустой строки текст страницы которую браузер должен отобразить. Браузер читает код страницы и видит там теги <script>, <link> и <img>, которые указывают на файлы, необходимые для отображения страницы и запрашивает их все с помощью таких же GET-запросов.

  • Существуют также POST-запросы, которые используются чтобы отправить данные на сервер, например когда пользователь хочет залогиниться:
POST http://login.vk.com/?act=login HTTP/1.1
Host: login.vk.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: http://vkontakte.ru/
Content-Type: application/x-www-form-urlencoded
Content-Length: 111

act=login&from_host=vkontakte.ru&email=mail%40mail.ru&pass=123&q=1&al_frame=1&expire=&captcha_sid=&captcha_key=

Данные которые передаются на сервер находятся после заголовков, и обычно в формате «переменная1=значение1&переменная2=значение2«. Например в нашем случае пользователь ввел почту email=mail%40mail.ru и пароль pass=123

  • Вместо того чтобы прислать веб-страницу сервер иногда может перенаправить нас на другой адрес, например в ответ на предыдущий запрос:
HTTP/1.1 302 Found
Server: nginx/0.7.59
Date: Tue, 11 Jan 2011 15:24:18 GMT
Content-Type: text/html; charset=windows-1251
Connection: keep-alive
X-Powered-By: PHP/5.2.6-1+lenny8
Pragma: no-cache
Cache-control: no-store
Set-Cookie: remixchk=5; expires=Sun, 22-Jan-2012 04:37:25 GMT; path=/; domain=.vkontakte.ru
P3P: CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"
Location: http://vkontakte.ru/login.php?act=slogin&al_frame=1&m=4&email=mail%40mail.ru
Vary: Accept-Encoding
Content-Length: 0

Сервер вернул код «302 Found» и передал адрес целевой страницы  заголовке «Location: http://vkontakte.ru/login.php?act=slogin&al_frame=1&m=4&email=mail%40mail.ru»

Более подробно изучить запросы можно с помощью Fiddler, если хотите увидеть запросы в том виде, как их отсылает браузер, включите вкладку «Raw» <br />

Куки

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

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

remixsid=e7e94a5a03d852aca0ea22cdaaf5ca9399e2e470a0be610d3d87c314b461; expires=Thu, 24-May-2012 04:58:49 GMT; path=/; domain=.vkontakte.ru

Имя – remixsid

Значение — e7e94a5a03d852aca0ea22cdaaf5ca9399e2e470a0be610d3d87c314b461

Годен до 2012 года

Действителен для домена vkontakte.ru и всх поддоменов (потому что перед именем домена стоит точка)

Чтобы установить куки вебсайт должен в ответе прислать заголовок:

Set-Cookie: remixsid=e7e94a5a03d852aca0ea22cdaaf5ca9399e2e470a0be610d3d87c314b461; expires=Thu, 24-May-2012 04:58:49 GMT; path=/; domain=.vkontakte.ru

Таких заголовков в ответе может быть несколько. Когда браузер отправляет запросы, он указывает вот такой заголовок:

Cookie: remixchk=5; remixsid=e7e94a5a03d852aca0ea22cdaaf5ca9399e2e470a0be610d3d87c314b461

Здесь браузер отправил 2 переменных: remixsid и remixchk. Как видете при отправке браузером все куки указываются в одном заголовке, причем там содержится только имя и значение кука. Теперь перед тем как послать страницу сервер может проверить куки и убедиться что юзер залогинен.

Заключение

С устройством браузера пока что закончим. По большей части мы буде заниматься тем, что будем качать страницы с помощью GET-запроса, выцеплять оттуда нужные данные, а потом отправлять нужный POST-запрос обратно на сервер. Для того чтобы было проще выцеплять данные нам очень пригодятся 2 вещи. Regex и XPath. XPath нужен для поиска нужных HTML тегов, как файлов на компе. А Regex может вытаскивать нужные данные из произвольного текста. О них я расскажу чуть позже.

Comments are closed.