превращение Ajax ResponseXML в HTML - PullRequest
Новая
       63

превращение Ajax ResponseXML в HTML

0 голосов
/ 16 апреля 2011

Я делаю Ajax-запрос, в котором у меня есть сервер, возвращающий правильно сформированный HTML, в частности элементы строки таблицы ("tr").Я надеялся использовать DOM для вставки этих строк в таблицу, читая из элемента responseXML объекта запроса (XMLHttpRequest).По сути, у меня есть 

var myTable = document.getElementById("myTable");
var tableRows = responseXML.getElementsByTagName("tr");
for (var i = 0; i < tableRows.length; i++) {
  myTable.appendChild(tableRows[i]);
}

Здесь много чего происходит.«ResponseXML» содержит правильные данные, и вызов «getElementsByTagName» также работает правильно.К сожалению, это ломается, когда я пытаюсь добавить строку, вызывая appendChild (я получаю неопределенную ошибку JavaScript).Я думаю, это потому, что хотя каждый элемент в массиве «tableRows» является правильным XML-элементом, браузер не может автоматически интерпретировать его как HTML-элемент.Я заметил, что если я создаю новый файл используя document.createElement ("tr") и проверяю его во время выполнения, он выглядит в памяти иначе, чем элементы в массиве "tableRows".Кроме того, я могу вставить это новое (созданное с помощью «createElement») в таблицу без ошибки.

Есть ли хороший способ сделать то, что я пытаюсь сделать здесь?Я надеялся, что смогу заставить браузер правильно интерпретировать элементы, возвращая содержимое в виде XML и используя responseXML / getElementsByTagName.Таким образом, я мог бы избежать использования responseText для того, что действительно является HTML, и я также мог бы избежать использования «innerHTML», потому что это не стандарт.Однако в большинстве примеров в Интернете используется innerHTML.Это действительно лучший способ?

Ответы [ 2 ]

2 голосов
/ 16 апреля 2011

Если это правильно сформированный HTML, вы можете попробовать использовать document.importNode() примерно так: 

//myXHTML is your HTML/XHTML (if it is well-formed, you should be ok).
//myObject is the parent node. This is the node you want to insert your HTML into
function insertXHTML(myXHTML, myObject) {
   var parser = new DOMParser();

   //Doing this to make sure that there is just one root node.
   //You can change the namespace, or not use it at all.
   var xmlToParse = "<div xmlns = \"http://www.w3.org/1999/xhtml\">" + myXHTML + "</div>";
   var XMLdoc = parser.parseFromString(xmlToParse, "application/xhtml+xml");

   var root = XMLdoc.documentElement;

   for(i = 0; i < root.childNodes.length; i++) {
       myObject.appendChild(document.importNode(root.childNodes[i], true));
   }
}

Это код, который я написал некоторое время назад (чтобы обойти использование innerHTML); это все еще должно работать. Единственное, что меня беспокоит - это DOMParser(); не уверен, насколько это кросс-браузер.

EDIT

Проблема с вашим подходом (работа только с чистым JS) заключается в том, что вы столкнетесь с кросс-браузерными проблемами :(. Для importNode, посмотрите на эту кросс-браузерную реализацию Другой вариант - использовать что-то вроде jQuery. Это нормализует многие различия между браузерами.

0 голосов
/ 16 апреля 2011

Если единственным содержимым в XMLHTTPResponse является содержимое элемента таблицы на странице, то да, используйте document.getElementById ('myTable'). InnerHTML = responseXML;

Я бы сказал, что этостандарт для асинхронного обновления HTML.

...