Добавить материал

и получить 10 документов
и свидетельство СМИ

Изображение пользователя Шибеко Марина Николаевна Шибеко Марина Николаевна

Использование Ajax и JS библиотек

  • doc
  • 11.05.2020
Публикация в СМИ для учителей

Публикация в СМИ для учителей

Бесплатное участие. Свидетельство СМИ сразу.
Мгновенные 10 документов в портфолио.

Добавить материал
Иконка файла материала 175. Использование Ajax и JS библиотек.doc

Лабораторная работа №7

 

Использование Ajax и JS библиотек

 

Цель работы: получить практические разработки приложений с использованием технологии Ajax  и JS библиотек

 

Теоретические сведения

 

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

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

Приложения AJAX могут выполняться только в Web-браузерах с поддержкой XML.

 

Поддержка AJAX браузерами

Приложения AJAX могут выполняться только в Web-браузерах с полной поддержкой XML, т.е. всеми основными современными браузерами.

Предыдущий пример вызывает функцию с именем GetXmlHttpObject.

Эта функция предназначена для решения проблемы создания различных объектов XMLHTTP для различных браузеров.

Функция имеет следующий код:

function GetXmlHttpObject(handler)
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

.

Страница HTML для примера AJAX

Эта страница HTML содержит простую форму HTML и ссылку на файл JavaScript.

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Имя:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Советуем: <span id="txtHint"></span></p> 
</body>
</html>

 

 

Код JavaScript приложения AJAX

Это код JavaScript, который находится в файле "clienthint.js":

var xmlHttp
 
function showHint(str)
{
if (str.length==0)
{ 
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Браузер не поддерживает запросы HTTP")
return
} 
var url="gethint.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
} 
 
function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

Далее речь пойдет о серверной странице AJAX.

 

Серверные страницы AJAX для ASP и PHP

Сервера AJAX не существует. Страницы AJAX может обрабатывать любой сервер Интернет.

Пример AJAX на PHP
<?php
// Заполняем массив именами 
 
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
 
//извлечение параметра q из URL
$q=$_GET["q"];
//поиск всех рекомендаций в массиве, если длина q>0
if (strlen($q) > 0)
{
  $hint="";
  for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}
 
// Вывод "нет предложений", если рекомендаций не найдено 
// или вывод подходящих значений 
if ($hint == "")
{
$response="нет предложений";
}
else
{
$response=$hint;
}
//вывод ответа 
echo $response;
?>

 

Создание объекта XMLHttp

При создании запроса AJAX прежде всего необходимо создать объект XMLHTTP. Netscape/Firefox, Opera и другие браузеры имеют этот объект встроенным. Internet Explorer использует ActiveXObject. Поэтому мы создадим одну функцию для работы со всеми этими браузерами:

if(typeof(XMLHttpRequest)!='undefined'){
  var getXMLHttpObj = function(){ return new XMLHttpRequest(); }
} else {
  var getXMLHttpObj = function(){
    var activeXObjects = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0',
    'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'];
    for(var i=0; i<activeXObjects.length; i++){
      try{
        return new ActiveXObject(activeXObjects[i]);
      }catch(err){}
    }
  }
}

Любой браузер, который поддерживает объект XMLHttpRequest, будет использовать этот встроенный объект. Internet Explorer 6 и более ранние версии будут использовать объект ActiveX XMLHttp компании Microsoft. Существует много различных версий этого объекта, поэтому мы попробуем их все, начиная с самого нового.

Теперь, когда мы имеем объект XMLHttp, можно разместить запрос на сервере:

var oXml = getXMLHttpObj();
oXml.open('GET', 'getData.php', true);
oXml.onreadystatechange = processingFunction;
oXml.send();
 
function processingFunction(){
  if(oXml.readyState!=4) return; // запрос не выполнен 
 
  // Результаты обрабатываются здесь.  Подробнее дальше!
}

После создания объекта XMLHttp остается еще 4 дополнительных шага. Сначала определяются параметры соединения с помощью функции .open. Функция .open получает 3 аргумента: тип запроса, URL и флаг, который сообщает объекту, выполняться или нет асинхронно.

Первый аргумент, тип запроса, почти всегда будет GET или POST. Если извлекаются данные, то это будет обычно GET, а если отправляется форма с AJAX, то это часто будет POST.

Флаг асинхронности немного отличается почти от всего остального в JavaScript. Если этот флаг задан как false, то код продолжает выполняться, как и любой другой фрагмент кода, то есть он ожидает, пока объект XMLHttp завершит свою работу, прежде чем двигаться дальше. Однако, если этот флаг задан как true, то код продолжает делать то, что следует в коде после запроса. Когда состояние запроса изменяется, вызывается функция, которая определена в onreadystatechange.

В чем различие? Если флаг асинхронности задан как false, то браузер будет полностью заблокирован, пока обрабатывается запрос. Если запрошенные данные нужны в обязательном порядке для продолжения работы, то используйте это значение флага. Если флаг задан как true, то пользователь может продолжать использовать Web-страницу, но ничего не известно о том, когда вернется ответ на запрос. Может потребоваться 1/2 секунды или 1 минута. Все зависит от нагрузки на сервер и соединения конечного пользователя.

Когда все готово, посылается запрос. Затем мы ожидаем. Если запрос выполняется синхронно с функцией обработки, определенной с помощью onreadystatechange, то она будет вызываться несколько раз. На самом деле она вызывается всякий раз при изменении состояния запроса. Существуют различные состояния, такие, как отправка и загрузка данных, но нас интересует только завершение загрузки данных. Если readyState == 4, то запрос выполнен, поэтому в любом другом случае мы просто выходим из функции.

 

XML, JSON или текст

Существует три возможных варианта получения данных: XML, JSON или обычный текст. При извлечении данных из базы данных, скорее всего, будет использоваться XML или JSON. Ни один из этих вариантов не имеет явных преимуществ. XML - широко распространенный стандарт, и поэтому существует много приложений, которые работают с файлами XML. JSON является более новой идеей, но быстро становится популярным. Его обычно легче прочитать (для человека), и он требует немного меньшую полосу пропускания для пересылки.

Предположим, что создается приложение для управления контактами. Cервер может возвращать информацию о людях. Одни и те же данные можно выразить в форме XML или JSON:

XML:

<xml>
  <contacts>
    <person firstname="Joe" lastname="Smith" phone="555-1212" />
    <person firstname="Sam" lastname="Stevens" phone="123-4567" />
  </contacts>
</xml>

JSON:

{contacts:[
  {"firstname":"Joe", "lastname":"Smith",   "phone":"555-1212"},
  {"firstname":"Sam", "lastname":"Stevens", "phone":"123-4567"}
]}

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

Нотация JSON выглядит очень похоже на простой JavaScript. JSON означает JavaScript Object Notation и поэтому действительно является обычным JavaScript.

Данные в любой нотации можно посылать с Web-сервера просто как обычный текст. Никакие пробелы, имеющиеся в этих примерах, не нужны, за исключением одиночных пробелов между именами атрибутов в тегах person (в версии XML).

Формат XML является совокупностью тегов, очень похожих на HTML. Можно иметь любое количество тегов, вложенных друг в друга, и каждый тег может иметь любое количество атрибутов: например, firstname, lastname и phone в примере выше. Однако имеется несколько вещей, за которыми необходимо следить.

·         Каждый тег должен иметь закрывающий тег. Например, <contacts> закрывается с помощью расположенного ниже </contacts>. Теги person являются замкнутыми. /> в конце действует по сути как дополнительный закрывающий тег. Можно было так же легко написать один из них как <person ... ></person>.

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

&

-->

&amp;

< 

-->

&lt;

> 

-->

&gt;

"

-->

&quot;

'

-->

&#39;

·         Например, узел <group name="Bill & Paul" /> является недопустимым и должен быть заменен на <group name="Bill &amp; Paul" />.

·         Приходящие с сервера данные должны посылаться с content-type, заданным как text/xml. Если извлекается файл с расширением .xml, то это должно происходить автоматически. Если данные извлекаются из сценария, необходимо задавать это вручную.

Для PHP добавьте следующее:

<?php header('Content-type: text/xml'); ?>

Для ASP добавьте:

<% response.contentType = "text/xml" %>

·         Для всех других языков добавьте эквивалентный заголовок content-type.

Если этот заголовок не задан, свойство responseXML объекта XMLHttp будет пустым (это свойство будет описано далее).

JSON имеет аналогичный набор правил, и всю документацию по способам записи можно увидеть на json.org. Однако упрощенно можно сказать, что:

·         объекты начинаются и заканчиваются с помощью символов { и } соответственно;

·         массивы начинаются и заканчиваются с помощью символов [ и ] соответственно;

·         все строки заключаются в двойные кавычки ";

·         символы " в строке должны экранироваться: \".

Проще говоря, строка JSON должна представлять допустимый объект JavaScript.

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

function processingFunction(){
  if(oXml.readyState!=4) return; // запрос не выполнен 
 
  // Результаты обрабатываются здесь.  Подробнее дальше!
}

Когда скрипт попадает в тело функции, запрос XMLHttp будет выполнен. Объект XMLHttp имеет два метода для возврата данных: responseXML и responseText. Так как в данный момент мы работаем с файлом XML, то будем использовать responseXML:

function processingFunction(){
  if(oXml.readyState!=4) return;
 
  var xmlDoc   = oXml.responseXML;
  var contacts = xmlDoc.selectNodes('/xml/contacts/person');
 
  alert('There are '+contacts.length+' contacts!');
 
  for(var i=0; i<contacts.length; i++){
    alert('Contact #'+(i+1)+':\n\n'+
        'First Name: '+contacts[i].getAttribute('firstname')+'\n'+
        'Last Name:  '+contacts[i].getAttribute('lastname') +'\n'+
        'Phone #:    '+contacts[i].getAttribute('phone')    +'\n');
  } }

Здесь имеется 3 функции вывода (alert). Одна сообщает, что имеется два контакта, а еще две выводят контактную информацию для каждого человека.

Посмотрим на тот же сценарий, использующий текст JSON:

function processingFunction(){
  if(oXml.readyState!=4) return;
 
  var json = eval('('+oXml.responseText+')');
 
  alert('There are '+json.contacts.length+' contacts!');
 
  for(var i=0; i<json.contacts.length; i++){
    alert('Contact #'+(i+1)+':\n\n'+
      'First Name: '+json.contacts[i].firstname+'\n'+
      'Last Name:  '+json.contacts[i].lastname +'\n'+
      'Phone #:    '+json.contacts[i].phone    +'\n');
  }
}

Как можно видеть, строки JSON можно преобразовать в JavaScript, используя просто встроенную в JavaScript команду eval(). Однако это можно делать, только если вы полностью доверяете источнику данных. Если это не так (если данные поступают из не вполне известного источника данных), то необходимо пропустить их в целях безопасности через JSON Parser (Анализатор JSON).

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

Что использовать: XML или JSON? Здесь нет больших различий. XML имеет более широко распространенный формат и переносим почти на любую систему. Если создаваемый проект будет работать с внешними источниками, то, вероятно, лучше использовать XML. Однако JSON немного легче для понимания и в общем он быстрее для разработки кода, чем XML. Если эта технология применяется для персонального проекта или в начале нового проекта, которому не нужно взаимодействовать с другими приложениям, то JSON определенно заслуживает рассмотрения.

 

Пример со списком контактов

В действительности уже есть все, что нужно для создания приложений AJAX, но мы рассмотрим достаточно простой пример. Мы собираемся написать небольшую таблицу данных (data grid), которая извлекает данные из трех различных файлов JSON. Для простоты эти файлы уже были сгенерированы. На практике эти файлы будут скорее всего генерироваться оперативно с помощью серверного сценария.

Файл 1

{contacts:[
  {"firstname":"Steve"   ,"lastname":"Smith",   "phone":"555-1212"}, 
  {"firstname":"Joe"     ,"lastname":"Stevens", "phone":"555-0193"}, 
  {"firstname":"Sam"     ,"lastname":"Smith",   "phone":"555-5120"}, 
  {"firstname":"Dave"    ,"lastname":"Stevens", "phone":"555-0521"}, 
  {"firstname":"Suzy"    ,"lastname":"Smith",   "phone":"555-9410"}, 
  {"firstname":"Jessica" ,"lastname":"Stevens", "phone":"555-8521"}, 
  {"firstname":"James"   ,"lastname":"Smith",   "phone":"555-4781"}, 
  {"firstname":"Jacob"   ,"lastname":"Stevens", "phone":"555-9281"}, 
  {"firstname":"Alex"    ,"lastname":"Smith",   "phone":"555-7261"}, 
  {"firstname":"Tam"     ,"lastname":"Stevens", "phone":"555-1820"}
]}

Файл 2

{contacts:[
  {"firstname":"Nancy"   ,"lastname":"Smith",   "phone":"555-9583"}, 
  {"firstname":"Elane"   ,"lastname":"Stevens", "phone":"555-7281"}, 
  {"firstname":"Shawn"   ,"lastname":"Smith",   "phone":"555-5782"}, 
  {"firstname":"Jessie"  ,"lastname":"Stevens", "phone":"555-7312"}, 
  {"firstname":"Matt"    ,"lastname":"Smith",   "phone":"555-4928"}, 
  {"firstname":"Jason"   ,"lastname":"Stevens", "phone":"555-3917"}, 
  {"firstname":"Daniel"  ,"lastname":"Smith",   "phone":"555-8711"}, 
  {"firstname":"Shannon" ,"lastname":"Stevens", "phone":"555-0912"}, 
  {"firstname":"Diana"   ,"lastname":"Smith",   "phone":"555-6172"},
  {"firstname":"Mark"    ,"lastname":"Stevens", "phone":"555-8831"}
]}

Файл 3

{contacts:[
  {"firstname":"Laura"     ,"lastname":"Stevens", "phone":"555-3915"}, 
  {"firstname":"Jeff"      ,"lastname":"Smith",   "phone":"555-8614"}, 
  {"firstname":"Frank"     ,"lastname":"Stevens", "phone":"555-0213"}, 
  {"firstname":"Elizabeth" ,"lastname":"Smith",   "phone":"555-7531"}, 
  {"firstname":"Jim"       ,"lastname":"Stevens", "phone":"555-3951"}
]}

Эти файлы будут обеспечивать все данные для нашего списка контактов на AJAX. Построение списка контактов является в действительности вполне простым: создается таблица TABLE для хранения всех контактов и функция для очищения и повторного заполнения этой таблицы. 

<table cellspacing="1" cellpadding="3" bgcolor="#000000" style="font-family:tahoma;font-size:10px;">
  <tbody id="contactListTable">
    <tr style="background-color:#CCF;">
      <th>First Name</th>
      <th>Last Name</th>
      <th>Phone #</th>
    </tr>
  </tbody>
</table>
 
function loadContactListPage(n){
  var oXML = getXMLHttpObj();
  oXML.open('GET', '/img/10_json_file'+n+'.txt', true);
  oXML.onreadystatechange = function(){ doneLoading(oXML); }
  oXML.send('');
}
 
function doneLoading(oXML){
  if(oXML.readyState!=4) return;
 
  var json  = eval('('+oXML.responseText+')');
  var table = document.getElementById('contactListTable');
 
  for(var i=table.childNodes.length-1; i>0; i--){
    table.removeChild(table.childNodes[i]);
  }
 
  for(var i=0; i<json.contacts.length; i++){
    var tr  = document.createElement('TR');
    var td1 = document.createElement('TD');
    var td2 = document.createElement('TD');
    var td3 = document.createElement('TD');
 
    tr.style.backgroundColor = i%2?'#FFF':'#E6E6E6';
 
    table.appendChild(tr);
 
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
 
    td1.appendChild(document.createTextNode(json.contacts[i].firstname));
    td2.appendChild(document.createTextNode(json.contacts[i].lastname));
    td3.appendChild(document.createTextNode(json.contacts[i].phone));
  }
}

Демонстрационный пример

First Name  Last Name  Phone #
 
Steve    Smith    555-1212
Joe    Stevens  555-0193
Sam    Smith    555-5120
Dave    Stevens  555-0521
Suzy    Smith    555-9410
Jessica    Stevens  555-8521
James    Smith    555-4781
Jacob    Stevens  555-9281
Alex    Smith    555-7261
Tam    Stevens  555-1820
 
Page 1 | Page 2 | Page 3

 

Как можно видеть из примера выше, это все достаточно просто. Большая часть кода нужна в действительности просто для создания новых строк в таблице.

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

 

DOM (Document Object Model).

Обычно DOM добавляется как слой между XML-парсером и приложением, которому требуется информация из документа. То есть парсер берет данные из документа и передает их в DOM. Затем DOM используется приложениями более высокого уровня.

Хотя DOM расшифровывается как «объектная модель документа», работает DOM преимущественно с интерфейсами, а не с объектами. Интерфейс – это соглашение, по которому поддерживаются определенные свойства и методы, применяемые к некоему объекту. На рис. 1 показано, как приведенный выше XML-документ представляется в DOM:

Пример DOM (Document Object Model)


Рис. 1  Пример DOM (Document Object Model)

 

Каждый прямоугольник представляет собой объект, имена в прямоугольниках соответствуют интерфейсам, которые будут реализованы каждым объектом. Каждый объект может реализовывать несколько подходящих интерфейсов. Например, объект представляющий символьные данные «Hello,World!», реализует интерфейсы Text, CharacterData, Node.

Преимущество модели DOM состоит в том, что она универсальна, т.е. может применяться для документов любого типа. Ее использование может существенно упростить обработку XML-документов.

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

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

Для работы с XML-документами в PHP существует два модуля, реализующие два разных стандарта обработки XML-данных: SAX (Simple API for XML) и DOM (Document Object Model).

Стандарт SAX (http://www.saxproject.org) не является стандартом W3C и описывает метод обработки XML-документов для получения из них данных. То есть этот метод обработки XML-документов позволит только прочитать данные из XML-документа, и не более того. Создавать и изменять XML-документы с его помощью невозможно.

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

Другим стандартом для обработки XML-данных является DOM – стандарт W3C, спецификацию которого можно найти на сайте консорциума (http://www.w3c.org/DOM). В отличие от SAX, этот метод позволяет производить любые операции с XML-данными в достаточно удобной форме – представляя XML-документ как дерево объектов.

Модуль, реализующий этот стандарт, называется DOM XML. Он не входит в основной набор модулей PHP, но может быть установлен как расширение.

 

Взаимодействие PHP и XML посредством DOM XML

Что происходит, если взаимодействие PHP и XML осуществляется с помощью объектной модели стандарта DOM? Модуль DOM XML определяет в PHP несколько классов, таких как DomNode, DomDocument, DomElement, DomText и DomAttribute, большинство из которых идут из ядра стандарта DOM. Почти для всех классов (в частности, для перечисленных выше) класс DomNode является родительским, поэтому его свойства и методы наследуются всеми остальными классами.

Если рассмотреть произвольный XML-документ, то классу DomDocument будет соответствовать сам этот документ, классу DomElement – каждый XML-тег, классу DomAttribute – атрибуты тегов, а классу DomText – содержание XML-элементов. В то же время классу DomNode будет соответствовать каждый из перечисленных элементов XML-документа.

Рассмотрим коллекцию, содержащую описания персон. Если каждую из них мы описываем с помощью таких характеристик, как фамилия, имя, дата рождения и электронный адрес, то структура коллекции «Пользователь», где хранится информация обо всех известных нам персонах, может быть представлена следующим образом.

 

<?xml version="1.0"?>
<collection>
    <person id="10">
        <name>
            <first>Nick</first>
            <last>Petrov</last>
        </name>
        <birth>
            <day>23</day>
            <month>12</month>
            <year>89</year>
        </birth>
        <email> nick@ngs.ru 
        </email>
    </person>
    <person id="20">
        <name>
            <first>Bob</first>
            <last>Ivanov</last>
        </name>
        <birth>
            <day>03</day>
            <month>05</month>
            <year>90</year>
        </birth>
        <email> bob@ngs.ru 
        </email>
    </person>
</collection>

Пример 2. Коллекция «Пользователь» в виде XML-файла (persons.xml) 

Перевод данных XML-файла в объекты и классы PHP

 

Первое, что нужно сделать, если мы хотим работать с XML-данными в PHP при помощи расширения DOM XML, это перевести имеющиеся данные в объекты и классы DOM. Это можно сделать несколькими способами.

1.     С помощью функции domxml_open_mem.

Синтаксис: 

object domxml_open_mem (string str)

В качестве параметра эта функция принимает строку str, содержащую XML-документ. Результатом ее работы является объект класса, называемого DOMDocument.

2.     С помощью функции domxml_open_file.

Синтаксис: 

object domxml_open_file (string filename)

 

Эта функция обрабатывает XML-файл, имя которого задается параметром filename, и переводит его в объект класса DOMDocument. Доступ к файлу производится только на чтение.

Такие функции, как domxml_open_mem() и domxml_open_file(), как правило, нужно вызывать перед вызовом любых других функций, связанных с расширением DOM.

Эти функции преобразуют XML-файл в дерево объектов. К таким объектам можно обращаться с помощью различных методов. В частности, для выделения корневого элемента используется метод DomDocument ->document_element().

Еще существует функция domxml_new_doc(string version), которая создает новый пустой XML-документ. Ее параметром является номер версии создаваемого документа. Но ее мы касаться не будем, а будем считать, что XML-файл уже создан.

 
<?
//считываем файл "persons.xml" в строку
$xmlstr = join('',file('persons.xml'));
// переводим строку с xml-файлом в дерево объектов. Если операция
// прошла неудачно, то выводим ошибку и прекращаем работу.
if(!$dom = domxml_open_mem($xmlstr)) {
  echo "Ошибка при разборе документа\n";
  exit;
}
// можно посмотреть, как выглядит этот объект
print_r($dom);
echo "<hr>";
// выделяем корневой элемент дерева объектов. В нашем случае это будет
// элемент <collection>
$root = $dom->document_element();
print_r($root);
echo "<hr>";
?>

Пример 3. Перевод XML-файла в дерево объектов PHP и выделение корневого элемента

Каждому элементу XML-файла соответствует какой-то объект. Теперь нужно научиться перемещаться по дереву объектов и обращаться с этими объектами: получать и изменять их значения, находить их потомков и предков, удалять объекты.

 

Задание на работу:

 

1.     Выполнить работу с DOM. Реализовать поиск и манипулирование DOM-деревом

2.     Реализовать эффекты с использованием jQuery UI (Draggable, Sorttable, According, Dialog, …)

3.     Выполнить клиентскую валидацию при регистрации

4.     Использовать элементы GUI-JS (окна, tab, tool-ip, rating, progress-bar, деревья, календарь, …)

5.     Реализовать многоязычность приложения

6. Скачано с www.znanio.ru

Лабораторная работа №7 Использование Страница HTML для примера ElementById("txtHint").innerHTML=xmlHttp Sunniva"; $a[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]=""; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //извлечение параметра q из Создание объекта XMLHttp При создании запроса Однако, если этот флаг задан как true , то код продолжает делать то, что следует в коде после запроса Нотация JSON выглядит очень похоже на простой Проще говоря, строка JSON должна представлять допустимый объект Как можно видеть, строки JSON можно преобразовать в Jason" ,"lastname":"Stevens", "phone":"555-3917"}, {"firstname":"Daniel" ,"lastname":"Smith", "phone":"555-8711"}, {"firstname":"" ,"lastname":"Stevens", "phone":"555-0912"}, {"firstname":"Diana" ,"lastname":"Smith", "phone":"555-6172"}, {"firstname":"Mark" ,"lastname":"Stevens", "phone":"555-8831"} ]} Element('TR'); var td1 = document DOM . Затем DOM используется приложениями более высокого уровня Например, главная компания и ее филиал в другом городе имеют два разных сайта поддержки, написанных на Nick</first> <last>Petrov</last> </name> <birth> <day>23</day> <month>12</month> <year>89</year> </birth> <email> nick@ngs Эта функция обрабатывает XML -файл, имя которого задается параметром filename, и переводит его в объект класса

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

Посмотрите также