Повторное заполнение таблицы HTML на лету

Question

У меня есть несколько простых XML, таких как:

<Tag>
<Keyphrases>
<Keyphrase Phrase = "This is phrase one"/>
<Keyphrase Phrase = "This is phrase two"/>
<Keyphrase Phrase = "This is phrase three"/>
</Keyphrases>
</Tag>

И у меня есть XSLT, который содержит:

[...]

<table id="realtimetable">
<xsl:apply-templates select="Tag/Keyphrases"/>
</table>

[...]

<!-- Build KeyPhrase Rows -->
<xsl:template match="Tag/Keyphrases">
<xsl:for-each select="Keyphrase">
<tr><td>
<xsl:value-of select="@Phrase" />
</td></tr>
</xsl:for-each>
</xsl:template>

Но теперь я хочу обновить содержимое этой таблицы на лету. Я понимаю, что могу использовать XMLHttpRequest () для получения новых данных.

Однако я не знаю, какой формат использовать для этих обновлений или как вставить новые данные в таблицу.

Я могу предоставить обновления в формате XML. Но могу ли я повторно использовать свой существующий шаблон XSLT для его анализа и повторного заполнения отображаемой таблицы? Это выглядит элегантно и аккуратно, но возможно ли это, и если да, то как бы я это сделал?

Если это невозможно, я полагаю, что мог бы написать Javascript для синтаксического анализа XML и обновления таблицы самостоятельно. Это звучит как большая тяжелая работа: - (

Так что я также рассматривал возможность ответа на запрос XMLHTTPRequest в формате JSON. Я думаю, что обработать JSON может быть проще, чем анализировать XML.

Но как должен выглядеть мой документ JSON и как мне написать JavaScript для обработки JSON и повторного заполнения таблицы?

Как бы то ни было, у меня есть чистый (проверенный на наличие ошибок) ответ от XMLHttpRequest (), что мне здесь делать?

function ProcessUpdate() 
{
}

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

Обновление:

Спасибо за все ответы. Некоторые комментарии и уточнения:

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

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

3. Dimitre: ваш XSL выглядит увлекательно, и я определенно потрачу некоторое время на его усвоение. Тем не менее, я не понимаю (вообще), как вызвать это обновление. то есть как бы я инициировал это преобразование из JavaScript?

Answer 1

Я бы настоятельно рекомендовал использовать JSON вместо XML для этой задачи - как вы уже поняли, вы, вероятно, не хотите заниматься анализом XML на стороне клиента.

Получив ответ XHR в виде данных JSON, вы можете использовать шаблоны на стороне клиента, чтобы превратить ответ в разметку, а затем разместить разметку на своей странице. Если вы передумаете о jQuery, то в jQuery есть шаблонный плагин ( jQuery.tmpl ), который вы можете использовать для этого; есть также автономный mustache.js и чрезвычайно легкий underscore.js . Конечно, вы также можете написать свой собственный шаблонный код. Все инструменты шаблонов на стороне клиента следуют одному и тому же общему принципу (хотя и с разным синтаксисом, поэтому обязательно прочитайте документы), используя такой шаблон, как:

<p>Hello, my name is ${firstName} ${lastName}</p>

... и затем взять некоторые данные, такие как:

{ "firstName" : "Rebecca", "lastName" : "Murphey" }

... и затем объединяя их, чтобы создать желаемый вывод, который затем можно добавить в DOM.

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

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

Answer 2

Вот XSLT-преобразование с обновлениями, принятыми в качестве внешнего параметра.Он работает с текущей таблицей в качестве исходного XML-документа :

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:ext="http://exslt.org/common"
 exclude-result-prefixes="ext">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <xsl:param name="pReps">
  <updates>
   <replace line="2">This is new phrase two</replace>
   <delete line="3"/>
   <insert-before line="1">This is phrase zero (new)</insert-before>
   <insert-after line="4">This is phrase five (new)</insert-after>
  </updates>
 </xsl:param>

 <xsl:variable name="vReps"
      select="ext:node-set($pReps)/*/*"/>

 <xsl:template match="node()|@*" name="identity">
  <xsl:copy>
   <xsl:apply-templates select="@*"/>
   <xsl:apply-templates select="node()"/>
  </xsl:copy>
 </xsl:template>

 <xsl:template match="tr">
  <xsl:choose>
   <xsl:when test="not(position()=$vReps/@line)">
    <xsl:call-template name="identity"/>
   </xsl:when>
   <xsl:otherwise>
     <xsl:variable name="vPos" select="position()"/>
     <xsl:variable name="vupdCommand"
          select="$vReps[@line=$vPos]"/>
     <xsl:choose>
       <xsl:when test="$vupdCommand[self::replace]">
        <tr><td><xsl:value-of select="$vupdCommand"/></td></tr>
       </xsl:when>
       <xsl:when test="$vupdCommand[self::insert-before]">
        <tr><td><xsl:value-of select="$vupdCommand"/></td></tr>
        <xsl:call-template name="identity"/>
       </xsl:when>
       <xsl:when test="$vupdCommand[self::insert-after]">
        <xsl:call-template name="identity"/>
        <tr><td><xsl:value-of select="$vupdCommand"/></td></tr>
       </xsl:when>
     </xsl:choose>
   </xsl:otherwise>
  </xsl:choose>
 </xsl:template>
</xsl:stylesheet>

, когда это преобразование применяется к текущей таблице :

<tabe id="realtimetable">
 <tr><td>This is phrase one</td></tr>
 <tr><td>This is phrase two</td></tr>
 <tr><td>This is phrase three</td></tr>
 <tr><td>This is phrase four</td></tr>
</tabe>

желаемый, правильный результат выдается :

<tabe id="realtimetable">
   <tr>
      <td>This is phrase zero (new)</td>
   </tr>
   <tr>
      <td>This is phrase one</td>
   </tr>
   <tr>
      <td>This is new phrase two</td>
   </tr>
   <tr>
      <td>This is phrase four</td>
   </tr>
   <tr>
      <td>This is phrase five (new)</td>
   </tr>
</tabe>

Answer 3

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

Если вы используете PHP, вы можете кодировать данные в виде JSON и передавать их обратно в JS следующим образом:

echo json_encode($myData);

Я не думаю, что это запутало ваши вопросы, но я думаю, что это помогло вам приблизиться.