Содержание


Использование Ajax с PHP и Sajax

Simple Ajax Toolkit может упростить интеграцию серверных PHP-приложений с JavaScript

Comments

Перед началом работы

Данное руководство предназначено для тех, кто интересуется разработкой мощных Web-приложений, динамически обновляющих свое содержимое, используя технологию Ajax (asynchronous JavaScript and XML) с PHP, и не обновляя всю Web-страницу при каждом действии пользователя. В этом руководстве предполагается, что вы знакомы с основными концепциями PHP, включая использование операторов if и switch, а также функций.

Об этом руководстве

Вы познакомитесь с Ajax, а также с проблемами его использования. Также вы создадите Ajax-приложение на PHP, которое будет отображать панели разделов предварительно написанного руководства. При выборе ссылки панели будет загружаться только содержимое раздела и замещаться содержимым выбранной панели, экономя пропускную способность и уменьшая время загрузки страницы. Затем вы интегрируете в Ajax-приложение программу Simple Ajax Toolkit (Sajax), которая будет синхронизировать использование Ajax, упрощая разработку.

Предварительные условия

Для работы с руководством необходимы следующие инструментальные средства:

Web-сервер

Выберите любой Web-сервер и операционную систему. Можете использовать Apache 2.X или HTTPServer фирмы IBM.

PHP

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

Sajax

Вам понадобиться Sajax. Это библиотека PHP-функций в одном файле, используемая в данном руководстве.

Web-браузер

Вам понадобиться Web-браузер, поддерживающий JavaScript. К таким браузерам относятся Mozilla, Firefox, Opera и Microsoft Internet Explorer.

Обзор

Перед погружением в детали познакомьтесь с Ajax, примером PHP-приложения и Sajax.

Ajax

Ajax позволяет Web-разработчикам создавать интерактивные Web-страницы, которые обновляют свое содержимое без необходимости полной повторной загрузки. Используя Ajax, вы можете создавать приложения, которые по нажатию кнопки будут изменять содержимое одного раздела Web-страницы. Нет необходимости ожидать загрузки всей страницы – загружается только содержимое этого одного раздела. Взгляните, например, на Google Maps: вы можете выбирать и перемещать карту без ожидания загрузок страницы.

Проблемы Ajax

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

Пример PHP-приложения

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

Sajax

Предположим, что вы хотите создать Ajax-приложение, не задумываясь о замысловатых деталях Ajax. Вам нужен Sajax. Sajax абстрагирует от Web-разработчика высокоуровневые детали Ajax при помощи использования библиотеки, разработанной группой из ModernMethod. По сути, Sajax работает аналогично Ajax. Однако, используя предоставленные в библиотеке Sajax высокоуровневые функции, технические детали Ajax могут игнорироваться.

Что такое Ajax?

В данном разделе будут рассмотрены (с примерами) концепции Ajax, включая то, что происходит при нажатии на ссылку, HTML-код и JavaScript-код, необходимые для работы Ajax с PHP-приложением. В следующем разделе «Создание PHP-приложения» мы приступим к созданию PHP-приложения, используя изученные здесь концепции Ajax.

За кулисами

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

При нажатии на ссылку начинает работать JavaScript-функция. Она создает объект, взаимодействующий с Web-браузером и указывающий браузеру загрузить конкретную страницу. Вы можете затем просмотреть на этой же странице другое содержимое как обычно, а когда новая страница полностью загрузится в браузер, он отобразит содержимое в место, указанное HTML-тегом div.

Для создания ссылок с тегами span используется CSS-код

CSS-код

CSS-код нужен в примере приложения для того, чтобы теги span отображались как реальные ссылки, созданные обычным тегом анкера (<a href=... >), и нажимались, как реальные ссылки.

Листинг 1. Указание отображаемой информации для тегов span
...
<style type="text/css">
  span:visited{ text-decoration:none; color:#293d6b; }
  span:hover{ text-decoration:underline; color:#293d6b; }
  span {color:#293d6b; cursor: pointer}
</style>

Эти теги span используются в примере приложения, и цвет согласуется с используемым для ссылок в любом руководстве IBM developerWorks. Первая строка в стиле тега указывает, что после нажатия на ссылку, ее цвет остается таким же. При движении курсора мыши над ссылкой, она подчеркивается, а курсор принимает вид указателя, используемого для обычных тегов анкера (<a href... >). Рассмотрим процесс создания ссылок, использующих этот CSS-код.

Создание ссылок с использованием тега span

Ссылки, которые вы создадите в разделе «Создание PHP-приложения», будут использоваться для взаимодействия с браузером через JavaScript и указания содержимого, которое надо извлечь. Это не обычные ссылки, использующие теги анкера. Они создаются при помощи теговspan. Внешний вид и поведение тега span определяются в CSS-коде (листинг 1 ). Например:

<span onclick="loadHTML('panels-ajax.php?panel_id=0',
  'content')">Managing content</span>

Обработчик onclick указывает сценарий, который надо выполнить при нажатии на этот тег span. Существуют и некоторые другие спецификаторы, аналогичные onclick, с которыми вы можете экспериментировать, например, onmouseover и ondblclick. Обратите внимание, что вместо обычной ссылки http:// или относительной ссылки panels-ajax.php?, в поле onclick используется вызов JavaScript-функции loadHTML. Вы рассмотрите функцию loadHTML ниже .

Объект XMLHttpRequest

Если вы используете браузеры Mozilla, Opera или другие браузеры данного семейства, содержимое страницы будет динамически извлекаться при помощи встроенного объекта XMLHttpRequest. Internet Explorer фирмы Microsoft использует другой объект, о котором мы расскажем далее. Эти объекты используются одинаково, и реализация поддержки обоих объектов занимает несколько дополнительных строк кода.

ОбъектXMLHttpRequest используется для извлечения содержимого страницы в JavaScript. Вы будете использовать этот код в примере приложения вместе с дополнениями к функцииloadHTML , относящимися к ActiveXObject. Пример использования приведен в листинге 2.

Листинг 2. Инициализация и использование объекта XMLHttpRequest
...
<style>
<script type="text/javascript">
var request;
var dest;

function loadHTML(URL, destination){
  dest = destination;
  if(window.XMLHttpRequest){
    request = new XMLHttpRequest();
    request.onreadystatechange = processStateChange;
    request.open("GET", URL, true);
    request.send(null);
  }
}
</script>
...

Переменная destination, переданная как параметр в листинге 2, указывает место, куда нужно поместить содержимое, загруженное объектом XMLHttpRequest и отмеченное тегом <div id="content"></div>. Затем код проверяет существование объекта XMLHttpRequest и при положительном результате создает новый. Затем обработчик события устанавливается в функцию processStateChange, являющуюся функцией, которую вызывает объект при каждом изменении состояния. Далее, объект request использует метод open, передавая тип запроса, GET, и URL, который объект будет загружать. И, в завершение, объект приводится в действие при помощи вызова его метода send.

ActiveXObject

ActiveXObject используется вместо объекта XMLHttpRequest в Internet Explorer. Он работает аналогично объекту XMLHttpRequest, и даже названия функций совпадают (листинг 3).

Листинг 3. Инициализация и использование ActiveXObject
...
function loadHTML(URL, destination){
  dest = destination;
  if(window.XMLHttpRequest){
...
  } else if (window.ActiveXObject) {
    request = new ActiveXObject("Microsoft.XMLHTTP");
    if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
    }
  }
}
</script>

В этом случае (если вы используете Internet Explorer) создается новый экземпляр ActiveXObject с типом Microsoft.XMLHTTP. После чего устанавливается обработчик событий и вызывается его функция open, затем функция send, и объект ActiveXObject начинает работать.

Функция processStateChange

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

Функция processStateChange вызывается объектами XMLHttpRequest или ActiveXObject при изменении состояния. Когда объект переходит в состояние 4, это означает, что содержимое страницы получено (см. листинг 4).

Листинг 4. Обработка изменений состояния
...
var dest;

function processStateChange(){
  if (request.readyState == 4){
    contentDiv = document.getElementById(dest);
    if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;http://httpd.apache.org/download.cgi
    }
  }
}

function loadHTML(URL, destination){
...

Когда объект XML HTTP переходит в состояние 4, содержимое готово для извлечения и отображения в нужном месте браузера. Таким местом являетсяcontentDiv , и оно находится в документе. Если запрос был нормальным и был получен в нормальном порядке, код статуса ответа будет равен 200. HTML-ответ хранится в request.responseText и отображается в браузере путем присваивания его переменной contentDiv.innerHTML.

Если ошибок при передаче не было, значит все прошло хорошо и новое содержимое появится в браузере; в противном случае значениеrequest.status не будет равно 200. В листинге 5 приведен код обработки ошибки.

Листинг 5. Обработка ошибки
...
    if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
    } else {
contentDiv.innerHTML = "Error: Status "+request.status;
    }
...

Листинг 5 будет передавать информацию об ошибке передачи в браузер. Вы будете использовать эту функцию в вашем примере приложения в качестве функции обратного вызова. Затем вы рассмотрите проблемы и отличия между GET и POST.

GET против POST

GET и POST – это два метода выполнения HTTP-запросов и передачи переменных с этими запросами. Разработчик не должен выбирать метод произвольно, поскольку оба используются в определенных ситуациях. GET-запросы включают переменные в URL, поэтому они могут быть занесены в закладки. Это приведет к плохим последствиям, если переменные предназначались для изменения базы данных, или для покупки чего-нибудь и т.д. Представьте себе ситуацию, когда вы случайно занесли в закладки страницу, предназначенную для покупки чего-нибудь, с вашим адресом, номером кредитной карты и товаром стоимостью в $100, указанными в URL. Повторный переход по этому URL означал бы покупку этого товара.

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

POST-запросы, с другой стороны, должны применяться в тех случаях, когда переменные влияют на такой ресурс, например, как база данных, или для защиты персональной информации. В гипотетической ситуации покупки товара стоимостью $100 вы должны использовать POST-запрос. Если вы занесете в закладки страницу подтверждения покупки, не содержащую в URL переменных, ничего не произойдет, т.е. вы не купите случайно что-нибудь ненужное, или не купите то, что у вас уже есть.

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

Методы кодирования

В HTTP существуют различные методы кодирования передаваемых данных, но XML воспринимает только несколько из них. Одним из них, максимально совместимым, является UTF-8, поскольку он обратно совместим с кодом ASCII (American Standard Code for Information Interchange). Кроме символов этого кода существует большое количество интернациональных символов, используемых в других странах и кодируемых либо не совместимым с ASCII способом, либо способом, не подходящим для размещения в XML-файлах без соответствующего кодирования.

Например, помещение строки Internationalization в ваш браузер преобразует ее в строку I%F1t%EBrn%E2ti%F4n%E0liz%E6ti%F8n, закодированную с использованием UTF-8. UTF-8-кодирование классических символов ASCII соответствует 7-битным ASCII-кодам этих же символов, что делает UTF-8 идеальным выбором метода кодирования.

Это важно знать, поскольку вы встречаетесь с кодированием постоянно при передаче и приеме документов по HTTP, в том числе и в Ajax. Передаваемые данные в Ajax тоже должны кодироваться в UTF-8 для улучшения совместимости.

Создание PHP-приложения

В этом разделе рассматривается создание PHP-приложения с использованием Ajax, которое будет отображать руководство с панелью ссылок. Мы будем дальше работать с приложением, которое вы начали в разделе «Что такое Ajax?».

Создание HTML-документа

Начнем с создания PHP-файла приложения. Создадим файл ajax-app.php и начнем с указания типа документа:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Тип документа устанавливается в HTML и стандарт XML, который мы будем использовать.

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

Укажем также метод кодирования и добавим CSS-код как показано в листинге 6.

Листинг 6. Отображение ссылок
...
<html><head><title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
  span:visited{ text-decoration:none; color:#293d6b; }
  span:hover{ text-decoration:underline; color:#293d6b; }
  span {color:#293d6b; cursor: pointer}
</style>
...

Заголовком страницы будет название раздела предварительно написанного руководства. Метод кодирования указывается при помощи метатега, и вы настроили HTML-документ на использование тегов span в качестве ссылок. Далее вы будете определять эти ссылки.

Создание ссылок на боковой панели

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

...
</style>
<?php require('content/header.html'); ?>

Этот файл header.html содержит CSS и другую информацию по JavaScript и форматированию, используемую в руководствах developerWorks. Он также настраивает страницу, для того, чтобы вы могли начать добавлять ссылки. Существует введение в разделы и девять панелей, поэтому вы должны создать 10 ссылок, как показано влистинге 7.

Листинг 7. Создание 10 ссылок
...
<?php require('content/header.html'); ?>

<span onclick="loadHTML('panels-ajax.php?panel_id=0',
  'content')">Managing content</span>
<?php require('content/between-link.html'); ?>

<span onclick="loadHTML('panels-ajax.php?panel_id=1',
  'content')">Adding content</span>
<?php require('content/between-link.html'); ?>

<span onclick="loadHTML('panels-ajax.php?panel_id=2',
  'content')">Saving new content</span>
<?php require('content/between-link.html'); ?>

<span onclick="loadHTML('panels-ajax.php?panel_id=3',
  'content')">Editing content</span>
<?php require('content/between-link.html'); ?>

<span onclick="loadHTML('panels-ajax.php?panel_id=4',
  'content')">Saving edited content</span>
<?php require('content/between-link.html'); ?>

<span onclick="loadHTML('panels-ajax.php?panel_id=5',
  'content')">Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>

<span onclick="loadHTML('panels-ajax.php?panel_id=6',
  'content')">Avoid editing a page
  that doesn't exist</span>
<?php require('content/between-link.html'); ?>

<span onclick="loadHTML('panels-ajax.php?panel_id=7',
  'content')">Deleting content</span>
<?php require('content/between-link.html'); ?>

<span onclick="loadHTML('panels-ajax.php?panel_id=8',
  'content')">Serving a page</span>
<?php require('content/between-link.html'); ?>

<span onclick="loadHTML('panels-ajax.php?panel_id=9',
  'content')">Pulling it together:
  The CMS control page</span>

Каждая ссылка вызывает loadHTML, передавая URL, содержащий идентификатор панели, используемый для определения загружаемой панели. Второй параметр указывает целевой тег div для размещения нового содержимого. Каждая ссылка имеет некоторый HTML-код в промежутках, и для того, чтобы абстрагироваться от него в этом руководстве, этот код был помещен в файл between-link.html, который тоже можно загрузить. Пример отображения в окне браузера приведен на рисунке 1.

Рисунок 1. Отображение боковой панели со ссылками
Рисунок 1. Отображение боковой панели со ссылками
Рисунок 1. Отображение боковой панели со ссылками

Ссылки, отображаемые слева, соответствуют одному разделу руководства на developerWorks.

Инициализация содержимого

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

...
The CMS control page</span>
<?php require('content/pre-content.html'); ?>

При этом добавится ссылка на заголовок раздела, а также ссылка вывода на принтер. Затем, инициализируйте раздел содержимого со всеми панелями, одну за другой, внутри содержимого тега div, как показано в листинге 8.

Листинг 8. Инициализация содержимого страницы
...
<?php require('content/pre-content.html'); ?>

<div id="content">
<?php
require('content/panel-0.html');
require('content/panel-1.html');
require('content/panel-2.html');
require('content/panel-3.html');
require('content/panel-4.html');
require('content/panel-5.html');
require('content/panel-6.html');
require('content/panel-7.html');
require('content/panel-8.html');
require('content/panel-9.html');
?>
</div>

Все 10 панелей теперь отображаются одна за другой в стандартном формате разделов IBM. Для завершения HTML-файла добавьте файл нижней панели страницы:

<?php require('content/footer.html'); ?>

HTML-страница закончена. На рисунке 2 приведен пример отображения страницы в браузере.

Рисунок 2. Отображение инициализированной, законченной страницы содержания
Рисунок 2. Отображение инициализированной, законченной страницы содержания
Рисунок 2. Отображение инициализированной, законченной страницы содержания

Содержимое страницы инициализировано и ссылки подготовлены для вызова JavaScript-команд.

JavaScript: Добавление функции loadHTML

Пора вставить асинхронный JavaScript и добавить функцию loadHTML в пример приложения, которая вызывается ссылками, созданными в разделе «Создание ссылок на боковой панели».

Листинг 9. Настройка объекта XML HTTP
...
span {color:#293d6b; cursor: pointer}
</style>
<script type="text/javascript">

var request;
var dest;
...
function loadHTML(URL, destination){
  dest = destination;
  if (window.XMLHttpRequest){
    request = new XMLHttpRequest();
    request.onreadystatechange = processStateChange;
    request.open("GET", URL, true);
    request.send(null);
  } else if (window.ActiveXObject) {
    request = new ActiveXObject("Microsoft.XMLHTTP");
    if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
    }
  }
}

</script>
<?php require('content/header.html'); ?>
...

Этот код загружает URL, указанный в ссылке: panels-ajax.php. Далее добавим функцию processStateChange.

JavaScript: Добавление функции processStateChange

Для завершения JavaScript-кода необходима функция processStateChange, помещающая HTML-содержимое в тег div, которое вы инициализировали в разделе «Инициализация содержимого».

Листинг 10. Обработка изменений состояния и размещение нового содержимого в div
...
var dest;

function processStateChange(){
  if (request.readyState == 4){
    contentDiv = document.getElementById(dest);
    if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
    } else {
contentDiv.innerHTML = "Error: Status "+request.status;
    }
  }
}

function loadHTML(URL, destination){
...

Вы завершили создания файла ajax-app.php. Теперь вы должны определить файл panels-ajax.php, на который указывают ссылки в панели.

Возврат содержимого

При нажатии одной из ссылок в вашем приложении Ajax-код попытается загрузить panels-ajax.php. Создайте этот файл и поместите его в тот же каталог, в котором находится ajax-app.php. Этот файл будет обрабатывать переменную panel_id, переданную в GET.

Листинг 11. Обработка переменной panel_id и возврат указанной панели
<?php

switch($_GET['panel_id']){
  case 0:
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
  case 6:
  case 7:
  case 8:
  case 9:
    require('content/panel-'.$_GET['panel_id'].'.html');
    break;
  default:
    print("No such category<br>");
}

?>

Если переменная panel_id существует, будет возвращаться указанная панель. HTML-файлы содержимого панелей находятся в загружаемом zip-файле (ajax.sajax.source.zip на странице загрузки), вместе с соответствующими рисунками. Пример отображения в браузере при выборе панели "Avoid editing a page that doesn't exist" приведен на рисунке 3.

Рисунок 3. Отображение одной панели
Рисунок 3. Отображение одной панели
Рисунок 3. Отображение одной панели

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

Добавление навигационных ссылок

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

Листинг 12. Обработка переменной panel_id и возврат указанной панели
  require('content/panel-'.$_GET['panel_id'].'.html');
  $panel_id_next = $_GET['panel_id'] + 1;
  $panel_id_prev = $_GET['panel_id'] - 1;

  if($panel_id_prev >= 0){
    print("
<span onclick=\"loadHTML('panels-ajax.php?panel_id=".$panel_id_prev."',
  'content')\">Previous Panel</span>
");
    if($panel_id_next <= 9)
print(" | ");
  }
  
  if($panel_id_next <= 9){
    print("
<span onclick=\"loadHTML('panels-ajax.php?panel_id=".$panel_id_next."',
  'content')\">Next Panel</span>
");
  }
  break;
default:

Ссылка next будет просто представлять собой ссылку на увеличенный на единицу идентификатор текущей панели, а ссылка previous – уменьшенный на единицу. Ссылка previous будет отображаться только в том случае, если она существует, то есть имеет значение большее или равное нулю, а ссылка next будет отображаться, если она имеет значение меньшее или равное девяти. Эти ссылки создаются так же, как и остальные уже созданные вами ссылки, за исключением того, что они будут меняться в зависимости от значения идентификатора текущей панели. Пример отображения страницы с навигационными ссылками приведен на рисунке 4.

Рисунок 4. Отображение навигационных ссылок
Рисунок 4. Отображение навигационных ссылок
Рисунок 4. Отображение навигационных ссылок

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

Создание приложения завершено. Перейдем к интеграции вашего приложения с Sajax.

Интеграция с Sajax

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

Что такое Sajax?

Simple Ajax Toolkit (Sajax) – это синхронный асинхронный JavaScript и XML. Что делает его синхронным – детали объекта XML HTTP, используемого в вашем текущем Ajax-приложении, абстрагируются посредством файла библиотеки Sajax.php. Это очень упрощает разработку Ajax-приложений, поскольку уменьшается шанс появления ошибок программирования. Ваши ссылки тоже будут выглядеть намного проще, поскольку будут содержать вызов только одной функции. По существу, Sajax представляет собой модульный метод создания Ajax-приложений посредством вызовов определенных и динамических функций, упрощая процесс разработки приложений.

Синхронизация асинхронного JavaScript

Существует несколько аспектов Sajax, которые вы будете использовать в данном разделе для синхронизации Ajax. Одним из них является sajax_init, инициализирующий библиотеку Sajax. Следующий – функция sajax_export, которую вы будете вызывать для уведомления Sajax о том, что у вас имеется раздел содержимого panels, для которого вы в дальнейшем создадите соответствующие JavaScript-функции. Вы можете вызывать sajax_export столько раз, сколько необходимо для каждого раздела динамического содержимого вашего приложения.

Следующей используемой вами функцией является sajax_handle_client_request. Эта функция инициализирует структуры данных Sajax, подготавливая приложение к обработке клиентских запросов. Также вы создадите $sajax_remote_uri. Это URL, куда ваше приложение будет направляться клиентские запросы, аналогично встроенному URL в ссылках вашего Ajax-приложения.

Наконец, вам нужно будет включить JavaScript-функции Sajax в ваш JavaScript при помощи функции sajax_show_javascript.

Что происходит за кулисами?

Что же сейчас происходит? За кулисами Sajax действует точно также как и Ajax. Однако Sajax настраивает объект XML HTTP за вас, упрощая вашу работу. Это позволяет вашему приложению работать модульным способом с несколькими разделами, используя JavaScript-функции. Пакет Sajax делает разработку Ajax-приложений более эффективной, используя ту же самую функциональность.

Инициализация Sajax

Начнем работу с Sajax-приложением. Скопируйте файл ajax-app.php и переименуйте копию в sajax-app.php. Сохраните этот файл в том же каталоге, в котором находится файл ajax-app.php. Добавьте следующий код в начало файла:

Листинг 13. Инициализация Sajax
<?
require("Sajax.php");

$sajax_remote_uri =
  "http://localhost.localdomain/ajax-sajax/panels-sajax.php";
sajax_init();
sajax_export("panels");
sajax_handle_client_request();
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
...

Сначала мы настраиваем удаленный URL. Затем необходимо инициализировать Sajax и экспортировать panels. Это инициализирует Sajax для последующего создания JavaScript-функций, обрабатывающих запросы, связанные с содержимым panels.

Модификация ссылок

Теперь ссылки должны содержать функции, передающие идентификатор панели соответствующей JavaScript-функции.

Листинг 14. Ссылки на панели в Sajax-приложении
<?php require('content/header.html'); ?>

<span onclick="getPanel(0)">Managing content</span>
<?php require('content/between-link.html'); ?>

<span onclick="getPanel(1)" >Adding content</span>
<?php require('content/between-link.html'); ?>

<span onclick="getPanel(2)" >Saving new content</span>
<?php require('content/between-link.html'); ?>

<span onclick="getPanel(3)" >Editing content</span>
<?php require('content/between-link.html'); ?>

<span onclick="getPanel(4)" >Saving edited content</span>
<?php require('content/between-link.html'); ?>

<span onclick="getPanel(5)" >Avoid adding duplicates</span>
<?php require('content/between-link.html'); ?>

<span onclick="getPanel(6)">Avoid editing a page
that doesn't exist</span>
<?php require('content/between-link.html'); ?>

<span onclick="getPanel(7)" >Deleting content</span>
<?php require('content/between-link.html'); ?>

<span onclick="getPanel(8)" >Serving a page</span>
<?php require('content/between-link.html'); ?>

<span onclick="getPanel(9)">Pulling it together:
The CMS control page</span>

<?php require('content/pre-content.html'); ?>
...

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

Замена JavaScript

Перед продолжением работы удалите JavaScript из Ajax-приложения. Вы должны добавить новые функции, и эти функции ничего не будут делать с объектом XML HTTP. Добавьте следующие строки вместо старых JavaScript-функций:

Листинг 15. Новые JavaScript-функции
...
<script type="text/javascript">
  <?php sajax_show_javascript(); ?>

  function getPanel_cb(content) {
    document.getElementById('content').innerHTML = content;
  }

  function getPanel(panel_id){
    x_panels(panel_id, getPanel_cb);
  }
</script>
...

Первая строка вызывает sajax_show_javascript, которая импортирует JavaScript-функции, требуемые Sajax, и еще одну функцию getPanel, которую вы добавите. Эти дополнительные JavaScript-функции добавят ядро Sajax-приложения в браузер, поскольку после первой загрузки страницы в браузер PHP-код больше не используется.

Снова возврат содержимого

Теперь вам необходимо изменить файл panels-ajax.php для согласования его с незначительными изменениями, сделанными для использования Sajax. Скопируйте и переименуйте файл panels-ajax.php в panels-sajax.php и поместите его в тот же каталог, в котором расположены остальные файлы. Измените его так, как показано в листинге 16 .

Листинг 16. Изменения в panels-sajax.php
<?php

if($_GET['rs'] == 'panels'){
  switch($_GET['rsargs'][0]){
  case 0:
...
  case 9:
    print("##");
    require('content/panel-'.$_GET['rsargs'][0].'.html');
    $panel_id_next = $_GET['rsargs'][0] + 1;
    $panel_id_prev = $_GET['rsargs'][0] - 1;

    if($panel_id_prev > = 0){
print("
<span onclick=\"getPanel(".$panel_id_prev.")\">Previous Panel</span>
");
...
print("
<span onclick=\"getPanel(".$panel_id_next.")\">Next Panel</span>
");
...

Этот файл будет проверять переменные, переданные в запросе GET. Обратите внимание на то, что вы послали panels в функцию sajax_import. Они должны быть значениями переменной rs в массиве GET. Если значением $_GET['rs'] является panels, значит переменная panel_id содержится в $_GET['rsargs'][0], которая является первым параметром, переданным вами в функцию x_panels, автоматически сгенерированную библиотекой Sajax.

Продолжая свою работу дальше (перед возвратом соответствующей панели), ваш код должен вывести любые два символа, поскольку, по-видимому, это дефект библиотеки Sajax. Эти символы не будут показываться в исходном HTML-коде отображаемой Web-страницы. Затем вы должны заменить оставшиеся ссылки $_GET['panel_id'] на $_GET['rsargs'][0]. И, наконец, вы должны изменить навигационные ссылки. Они должны выглядеть так, как уже измененные вами ссылки в файле sajax-app.php. Замените вызов loadHTML вызовом getPanel, как и раньше передавая идентификатор.

Рисунок 5. Пример отображения в браузере результатов работы PHP-приложения, интегрированного с Sajax
Рисунок 5. Пример отображения в браузере результатов работы PHP-приложения, интегрированного с Sajax
Рисунок 5. Пример отображения в браузере результатов работы PHP-приложения, интегрированного с Sajax

Поведение и отображаемая приложением информация, показанная на рисунке 5, такие же, как и при работе с Ajax.

Резюме

Примите наши поздравления! Вы успешно создали Ajax-приложение в PHP и интегрировали его с Sajax. Ваше приложение сэкономит для ваших пользователей (и в ваших будущих асинхронных JavaScript-приложениях) значительный объем трафика и сократит время загрузки, поскольку нет необходимости загружать Web-страницу полностью – загружается только необходимая информация. Это позволит вам создавать мощные интерактивные приложения, которые становятся все более привычными.


Ресурсы для скачивания


Похожие темы


Комментарии

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Open source, XML
ArticleID=132750
ArticleTitle=Использование Ajax с PHP и Sajax
publish-date=10182005