Серверные сценарии. ASP, PHP, JSP, ... (на выбор)



Сценарии, предназначенные для выполнения на стороне сервера, обычно располагаются в специальном каталоге внутри папки сайта. Принимая запрос пользователя, в котором указана программа, сервер запускает эту программу на выполнение. В результате выполнения программы выходные данные передаются web-серверу, а затем клиенту. Для написания сценариев, работающих на стороне сервера, обычно используются такие технологии, как Perl, ASP, ColdFusion, PHP, JSP и SSI.

В разделе «Пассивные и активные Web-серверы» четвертой главы этой книги, а также в своей книге [1], посвященной разработке Web-приложений для Microsoft Windows, мы подробно описали взаимодействие между браузером посетителя и Web-сервером в процессе просмотра страниц HTML. Напомним вкратце, как осуществляется такое взаимодействие для обычных статических страниц HTML.

Когда посетитель направляет свой браузер по тому или иному адресу URL, этот запрос передается Web-серверу с использованием протокола передачи гипертекстовых данных HTTP. Получив запрос, Web-сервер находит в своих каталогах файл нужной страницы HTML и отправляет его браузеру посетителя (рис. 4-1). В результате посетитель видит содержимое запрошенной страницы в окне браузера.

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

Программы CGI позволяют формировать страницы HTML динамически, создавая их посредством прямого вывода кода HTML в браузер посетителя непосредственно из программы (рис. 4-2). Как мы говорили в 5 главе нашей книги, технология шаблонов позволяет отделить дизайн динамической страницы от исходного текста программы CGI, формирующего эту страницу.

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

Перед отправкой страницы HTML посетителю этот код может вставлять в нее произвольные символы или фрагменты или полностью формировать динамические страницы «с нуля» (в том числе с применением шаблонов), а также выполнять переадресацию браузера посетителя на другой адрес URL.

В дальнейшем мы будем называть Web-приложения, созданные с использованием сценариев PHP, приложениями PHP или PHP-приложениями.

Заметим, что по принципу своего действия сценарии PHP аналогичны сценариям активных серверных страниц Active ServerPages (ASP), разработанных компанией Microsoft для своего Web-сервера Microsoft Internet Information Server (IIS). Подробно мы рассказывали об использовании сценариев ASP в [1].

Помимо отличий в языках программирования, применяемых в PHP и ASP, между этими технологиями имеется и более существенное отличие. В частности, используя модель компонентного объекта Component Object Model (COM), сценарии ASP могут обращаться к серверным элементам управления ActiveX. В составе Web-сервера Microsoft IIS имеется готовый набор таких элементов, о чем мы подробно говорили в [1]. При необходимости Вы можете создавать собственные элементы управления ActiveX, расширяя этот набор.

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

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

Ajax. Объект XMLHttp

AJAX означает " Asynchronous JavaScript and XML ", т.е. Асинхронный JavaScript и XML. В действительности AJAX состоит из JavaScript, как и любое другое приложение, и соединения XMLHTTP с Web-сервером. Вот и все! Общая идея заключается в том, что можно извлекать с сервера данные просто по мере необходимости, не обновляя всю страницу.

Прежде всего AJAX почти всегда опирается на серверный язык, такой, как PHP или ASP. Когда пользователю необходимо получить новые данные, JavaScript запрашивает их, а сервер, вероятно, запросит базу данных и затем вернет данные. Эти данные можно вернуть в различной форме. Если они структурированы, то это будут обычно данные XML или JSON. Если это очень простые данные (такие, как получение описания какого-то объекта), то можно часто увидеть людей, которые просто записывают эти данные непосредственно в ответ AJAX.

Объект XMLHttpRequest (или, сокращенно, XHR) дает возможность браузеру делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на слово XML в названии, XMLHttpRequest может работать с данными в любом текстовом формате, и даже бинарными данными. Использовать его очень просто.

Свойства XMLHttpRequest

Объект XMLHttpRequest имеет ряд свойств, которые позволяют проконтролировать выполнение запроса:

status: содержит статусный код ответа HTTP, который пришел от сервера. С помощью статусного кода можно судить об успешности запроса или об ошибках, которые могли бы возникнуть при его выполнении. Например, статусный код 200 указывает на то, что запрос прошел успешно. Код 403 говорит о необходимости авторизации для выполнения запроса, а код 404 сообщает, что ресурс не найден и так далее.

statusText: возвращает текст статуса ответа, например, "200 OK"

responseType: возвращает тип ответа. Есть следующие типы:

""

"arraybuffer"

"blob"

"document"

"json"

"text"

response: возвращает ответ сервера

responseText: возвращает текст ответа сервера

responseXML: возвращает xml, если ответ от сервера в формате xml

Например, выполним запрос к текстовому файлу, который находится на лока

Асинхронные запросы

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

Работа с асинхронными запросами чуть более сложна, чем с синхронными, поскольку нам надо еще обработать событие readystatechange объекта XMLHttpRequest.

При асинхронном запросе объект XMLHttpRequest использует свойство readyState для хранения состояния запроса. Состояние запроса представляет собой число:

0: объект XMLHttpRequest создан, но метод open() еще не был вызван для инициализации объекта

1: метод open() был вызван, но запрос еще не был отправлен методом send()

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

3: ответ получен от сервера

4: выполнение запроса полностью завершено (даже если получен код ошибки, например, 404)

Ajax. GET запросы

Метод get осуществляет GET-запрос к серверу, то есть все данные запроса передаются в строке запроса. Он принимает следующие параметры:

url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос

data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом

success(data, textStatus, jqXHR): необязательный параметр - функция обратного вызова, которая будет выполняться при успешном выполнении запроса. Она может принимать три параметра: data - данные, полученные с сервера, textStatus - - статус запроса и jqXHR - специальный объект jQuery, который представляет расширенный вариант объекта XMLHttpRequest.

dataType: необязательный параметр, содержащий тип данных в виде строки, например, "xml" или "json"

На выходе метод get возвращает объект jqXHR, который будет инкапсулировать данные запроса. Позднее мы подробнее разберем этот объект.

Итак, перепишем пример из предыдущего параграфа с использованием метода get:

$(function(){

$('button').click(function(){

$.get('ajax.php', function(data) {

           $('#news').html(data);

alert('Данныезаружены');

   });

});

});

Здесь использованы два первых параметра: адрес ресурса и функция обратного вызова. В этой функции в качестве параметра data мы получаем принятые от сервера данные и загружаем их в качестве разметки в элемент выборки ($('#news').html(data);). По сути то же самой мы могли бы сделать с помощью метода load.

Отправка данных

Используя параметр data, мы можем отправить дополнительные данные. Например, можно отправить запрос на получение элемента из базы данных по id:

$.get('ajax.php', { id: "1"});

А поскольку в GET-запросе все данные передаются в строке запроса, то данный код будет аналогичен следующему:

$.get('ajax.php?id=1');

Соответственно на стороне сервера мы сможем получить этот параметр и произвести с ним какие-либо действия, например, получить элемент из бд по данному id:

<?php

$id=$_GET['id'];

?>

Использование типа данных

Нередко возникает такая ситуация, когда сервер отправляет данные в определенном формате, например, json или xml. Так, php-файл на стороне сервера мог бы выглядеть следующим образом:

<?php

echo json_encode(array("event"=>"Начало чемпионата России","date"=>"13.07.2013"));

?>

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

$.get('ajax.php',

function(data) {

       $('#news').empty().append("<h3>"+data.event+"</h3><h5>"+data.date+"</h5>");

},

'json');

Ajax. POST запросы.

В отличие от GET-запросов данные POST-запросов передаются не в строке запроса, а в его теле. Распространенным примеров подобных запросов является отправка данных формы на сервер.

Для отправки POST-запросов предназначен метод post. Его объявление и использование в целом аналогично методу get. Он принимает следующие параметры:

url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос

data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом

success(data, textStatus, jqXHR): необязательный параметр - функция обратного вызова, которая будет выполняться при успешном выполнении запроса. Она может принимать три параметра: data - данные, полученные с сервера, textStatus - - статус запроса и jqXHR - специальный объект jQuery, который представляет расширенный вариант объекта XMLHttpRequest.

dataType: необязательный параметр, содержащий тип данных в виде строки, например, "xml" или "json"

На выходе метод post возвращает объект jqXHR.

Пример использования:

1 2 3 4 $.post('ajax.php', {'login':'1111', 'password' : '2222'}, function(data) { $('#news').html(data); });

В данном случае мы передаем в качестве данных пароль и логин. На сервере мы можем получить данные и отправить ответ пользователю:

1 2 3 4 5 6 7 8 9 10 <?php $login=$_POST['login']; $pass=$_POST['password']; if($login=="1111" && $pass=="2222"){ echo "Авторизация прошла успешно"; } else{ echo "Неверно введен логин или пароль"; } ?>

Итак, серверная часть, к которой будет обращаться форма - файл ajax.php - у нас остается той же. Только в данном случае теперь для параметра data в методе post мы данные берем из полей на этой форме.

Обратите внимание, что мы блокируем обычную отправку формы (event.preventDefault();), иначе у нас бы шла переадресация.

Сериализация формы

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

Итак, применим сеиализацию формы:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <form action="ajax.php" id="loginForm"> <input type="text" name="login" placeholder="Логин" /><br><br> <input type="text" name="password" placeholder="Пароль" /><br><br> <input type="submit" value="Войти" /> </form> <div id="result"></div> <script type="text/javascript"> $("#loginForm").submit(function(event) { // Предотвращаем обычную отправку формы event.preventDefault(); $.post('ajax.php', $("#loginForm").serialize(), function(data) { $('#result').html(data); }); }); </script>

В отличие от предыдущего примера у нас здесь два отличия. Во-первых, обратите внимание, что поля для ввода имеют атрибут name. При указании параметра data мы производим сериализацию данных формы через метод serialize: $("#loginForm").serialize(). В данном методе в тело запроса передаются параметры. Причем имена параметров - это значения атрибутов name полей ввода. А значения параметров - соответственно введенные значения в текстовые поля.

И поэтому с помощью php мы можем извлечь эти значения: $login=$_POST['login'].

JSON

JSON (англ. JavaScriptObjectNotation, обычно произносится как /ˈdʒeɪsən/ JAY-sən [1]) — текстовый форматобмена данными, основанный на JavaScript. Как и многие другие текстовые форматы, JSON легко читается людьми. Формат JSON был разработан Дугласом Крокфордом[2].

Несмотря на происхождение от JavaScript (точнее, от подмножества языка стандарта ECMA-262 1999 года), формат считается независимым от языка и может использоваться практически с любым языком программирования. Для многих языков существует готовый код для создания и обработки данных в формате JSON.

JSON-текст представляет собой (в закодированном виде) одну из двух структур:

Набор пар ключ: значение. В различных языках это реализовано как объект, запись, структура, словарь, хэш-таблица, список с ключом или ассоциативный массив. Ключом может быть только строка (регистрозависимая: имена с буквами в разных регистрах считаются разными[3]), значением — любая форма.

Упорядоченный набор значений. Во многих языках это реализовано как массив, вектор, список или последовательность.

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

В качестве значений в JSON могут быть использованы:

Объект — это неупорядоченное множество пар ключ:значение, заключённое в фигурные скобки «{ }». Ключ описывается строкой, между ним и значением стоит символ «:». Пары ключ-значение отделяются друг от друга запятыми.

Массив (одномерный) — это упорядоченное множество значений. Массив заключается в квадратные скобки «[ ]». Значения разделяются запятыми.

Число.

Литералы true, false и null.

Строка — это упорядоченное множество из нуля или более символов юникода, заключённое в двойные кавычки. Символы могут быть указаны с использованием escape-последовательностей, начинающихся с обратной косой черты «\» (поддерживаются варианты \", \\, \/, \t, \n, \r, \f и \b), или записаны шестнадцатеричным кодом в кодировке Unicode в виде \uFFFF.

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

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

{

"firstName":"Иван",

"lastName":"Иванов",

"address":{

"streetAddress":"Московскоеш., 101, кв.101",

"city":"Ленинград",

"postalCode":101101

},

"phoneNumbers":[

"812 123-1234",

"916 123-4567"

]

}

На языке XML подобная структура выглядела бы примерно так:

<person>

<firstName>Иван</firstName>

<lastName>Иванов</lastName>

<address>

<streetAddress>Московскоеш., 101, кв.101</streetAddress>

<city>Ленинград</city>

<postalCode>101101</postalCode>

</address>

<phoneNumbers>

<phoneNumber>812 123-1234</phoneNumber>

<phoneNumber>916 123-4567</phoneNumber>

</phoneNumbers>

</person>


Дата добавления: 2018-02-28; просмотров: 848; Мы поможем в написании вашей работы!

Поделиться с друзьями:






Мы поможем в написании ваших работ!