Объект XMLDocument

Свойство responseXML объекта XMLHttpRequest предполагает возвращение результата обращения к удаленному серверу в виде объекта XML-Document. Для этого необходимо, чтобы программный код на стороне сервера возвращал данные в формате XML; в этом случае сценарий на стороне клиента сможет выполнить разбор этих данных. Получить доступ к данным в формате XML несложно, т. к. вы обладаете полной под держкой DOM.

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








Клиентский сценарий на JavaScript в этом примере извлекает из XML-документа и выводит такие данные, как атрибуты корневого узла и сведения о различных главах объекта book.

Для вывода информации специально не использовался метод document.write(), потому что это привело бы к очистке содержимого текущей страницы, кроме того, такой способ более?менее работает в броузерах Mozilla, но, похоже, не поддерживается в Internet Explorer.

Вместо этого сценарий создает новые HTML?элементы.


Вообще существует два универсальных подхода: помещать данные в существующие элементы или создавать новые.

Чтобы поместить данные в существующий элемент, следует записать их в свойство innerHTML элемента. Рассмотрим HTML?документ, в котором имеется следующий элемент

:

Wait and see ...



Заменить содержимое этого элемента можно с помощью следующего фрагмента на JavaScript:
document.getElementById("output").innerHTML = "Now you see!";

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


    Следующий фрагмент программного кода JavaScript добавит два элемента в этот список:
    var list = document.getElementById("list");
    var listItem1 = document.createElement("li");
    var listItemText1 = document.createTextNode("Item 1");
    listItem1.appendChild(listItemText1);
    list.appendChild(listItem1);
    var listItem2 = document.createElement("li");
    var listItemText2 = document.createTextNode("Item 2");
    listItem2.appendChild(listItemText2);
    list.appendChild(listItem2);

    Вернемся к задаче чтения данных из XML?документа.


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

    var xml = XMLHTTP.responseXML;
    var root = xml.documentElement;
    document.getElementById("output").innerHTML =
    root.getAttribute("title") +
    " by " +
    root.getAttribute("author");
    var list = document.getElementById("list");
    var chapters = xml.getElementsByTagName("chapter");
    for (var i=0; i var listItem = document.createElement("li");
    var listItemText = document.createTextNode(
    chapters[i].getAttribute("number") +
    ": " +
    chapters[i].getAttribute("title"));
    listItem.appendChild(listItemText);
    list.appendChild(listItem);
    }

    Альтернативный вариант заключается в том, чтобы выполнить обход дерева XML?документа с учетом его структуры. Следующий фрагмент сначала выбирает элемент , с помощью getElementsByTag-Name(), а затем, двигаясь по дереву документа, отыскивает все вложенные элементы первого элемента .


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

    var xml = XMLHTTP.responseXML;
    var root = xml.documentElement;
    document.getElementById("output").innerHTML =
    root.getAttribute("title") +
    " by " +
    root.getAttribute("author");
    var list = document.getElementById("list");
    var chapters = xml.getElementsByTagName("chapters")[0];
    for (var i=0; i if (chapters.childNodes[i].nodeName == "chapter") {
    var listItem = document.createElement("li");
    var listItemText = document.createTextNode(
    chapters.childNodes[i].getAttribute("number") +
    ": " +
    chapters.childNodes[i].getAttribute("title"));
    listItem.appendChild(listItemText);
    list.appendChild(listItem);
    }
    }

    Но и это еще не все. Дело в том, что Internet Explorer ведет себя по-разному в некоторых системах (в зависимости от загруженности или быстродействия), особенно при втором подходе. Причина: обращение к объекту XMLHttpRequest может происходить «слишком рано» (c точки зрения нашего примера), то есть когда к моменту запуска программного кода разбор HTML?документа еще не завершился.


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

    var XMLHTTP;
    window.onload = function( ) {
    XMLHTTP = getXMLHTTP( );
    if (XMLHTTP != null) {
    XMLHTTP.open("GET", "xmldocument2.aspx?sendData=ok");
    XMLHTTP.onreadystatechange = stateChanged;
    XMLHTTP.send(null);
    }
    }

    Предыдущий фрагмент обратится к объекту XMLHttpRequest только после того, как HTML?страница будет полностью загружена.

    Теперь подведем итоги. В примере 3.2 приводятся полные исходные тексты реализации первого подхода, этот пример также можно загрузить в виде файла xmldocument.aspx из репозитария этой книги (http://www.oreilly.com/catalog/9780596514242). Реализация второго подхода(здесь не приводится) находится в файле xmldocument2.aspx.

    Пример 3.2. Чтение и запись данных с использованием JavaScript, Ajax и DOM xmldocument.aspx
    <%@ Page Language="C#" %>
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd">
    Ajax with ASP.NET


    (body)

    Wait and see ...



      (/body)
      .



      Оцените статью: (0 голосов)
      0 5 0

      Статьи из раздела ASP.NET AJAX на эту тему:
      JSON
      Объект XMLHttpRequest
      Программирование объекта XMLHttpRequest

      Вернуться в раздел: ASP.NET AJAX / Ajax