多值响应

服务器如何发回多值响应？

比如希望一次发回

1、所选商品的一个串描述

2、商品的数字价格

3、一组指示商品相关信息的URL

你可能会用

1、XML

2、CSV（逗号分隔值），有可能Javascript不会正确的解释数据。

3、格式化为XHTML，再使用innerHTML属性。

实际上，innerHTML只是对web应用的客户端来说简单，服务器必须做大量额外工作。这种格式之特定于网站上某个单独的页面。

CSV 和XML速度都很快，但是当新的需求出现，比如服务器改变数据格式，或者请求不同的信息，你并不能总提前知道从服务器得到的数据有怎么样的结构，即使知道，这种格式也可能会改变。而XML是自描述的。

<?xml version=\"1.0\"?>
<item id=\"itemGuitar\">
	<category>
		<name>Manufacturer</name>
		<value>Gibson</value>
	</category>
	<category>
		<name>Model</name>
		<value>Les Paul Standard</value>
	</category>
	<category>
		<name>Description</name>
		<value>Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.</value>
	</category>
	<category>
		<name>Price</name>
		<value>5695.99</value>
	</category>
  <category type=\"list\">
    <name>URLs</name>
    <value>http://www.thewho.com/</value>
    <value>http://en.wikipedia.org/wiki/Pete_Townshend</value>
  </category>
</item>",
        'itemShades'    =>      
"<?xml version=\"1.0\"?>
<item id=\"itemGuitar\">
        <category>
                <name>Description</name>
                <value>Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans this pair is rumored to have been licked by John Lennon.</value>
        </category>
        <category>
                <name>Color</name>
                <value>Black</value>
        </category>
        <category>
                <name>Price</name>
                <value>258.99</value>
        </category>
  <category type=\"list\">
    <name>Worn By</name>
    <value>John Lennon</value>
    <value>Ringo Starr</value>
    <value>Yoko Ono</value>
  </category>
  <category type=\"list\">
    <name>URLs</name>
    <value>http://www.beatles.com/</value>
    <value>http://johnlennon.com/</value>
    <value>http://www.yoko-ono.com/</value>
  </category>
</item>

function displayDetails() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      var detailDiv = document.getElementById("description");

      // Remove existing item details (if any)
      for (var i=detailDiv.childNodes.length; i>0; i--) {
        detailDiv.removeChild(detailDiv.childNodes[i-1]);
      }

      // Add new item details
      var responseDoc = request.responseXML;
      var categories = responseDoc.getElementsByTagName("category");
      for (var i=0; i<categories.length; i++) {
        var category = categories[i];
        var nameElement = category.getElementsByTagName("name")[0];
        var categoryName = nameElement.firstChild.nodeValue;
        var categoryType = category.getAttribute("type");
        if ((categoryType == null) || (categoryType != "list")) {
          var valueElement = category.getElementsByTagName("value")[0];
          var categoryValue = valueElement.firstChild.nodeValue;
          var p = document.createElement("p");
          var text = document.createTextNode(
            categoryName + ": " + categoryValue);
          p.appendChild(text);
          detailDiv.appendChild(p);
        } else {
          var p = document.createElement("p");
          p.appendChild(document.createTextNode(categoryName));
          var list = document.createElement("ul");
          var values = category.getElementsByTagName("value");
          for (var j=0; j<values.length; j++) {
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(
                                  values[j].firstChild.nodeValue));
            list.appendChild(li);
          }
          detailDiv.appendChild(p);
          detailDiv.appendChild(list);
        }
      }
    }  
  }
}

---------------------------------

在处理childNodes数组时，（）可以从后向前迭代。比如调用removeChild()时，提供给这个方法的节点会立即从相应父节点删除。这也说明，所删除节点的所有引用，比如说在一个包含元素子节点的数组中，都必须更新。由于所指向的子节点不复存在，被删除的这个节点之后的所有子节点就必须在数组中上移。

---------------------------------

但是XML太复杂。

还好有JSON。Javascript对象已经是动态的，因为他们不是编译对象。

function isArray(arg) {
  if (typeof arg == 'object') {
    var criteria = arg.constructor.toString().match(/array/i);
    return (criteria != null);
  }
  return false;
}

function displayDetails() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      var detailDiv = document.getElementById("description");

      var itemDetails = eval('(' + request.responseText + ')');
      // Remove existing item details (if any)
      for (var i=detailDiv.childNodes.length; i>0; i--) {
        detailDiv.removeChild(detailDiv.childNodes[i-1]);
      }

      // Add new item details
      for (var property in itemDetails) {
        var propertyValue = itemDetails[property];
        if (!isArray(propertyValue)) {
          var p = document.createElement("p");
          p.appendChild(
               document.createTextNode(property + ": " + propertyValue));
          detailDiv.appendChild(p);
        } else {
          var p = document.createElement("p");
          p.appendChild(document.createTextNode(property + ":"));
          var list = document.createElement("ul");
          for (var i=0; i<propertyValue.length; i++) {
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(propertyValue[i]));
            list.appendChild(li);
          }
          detailDiv.appendChild(p);
          detailDiv.appendChild(list);
        }
      }
    }  
  }
}

------------------------------

eval()函数告诉Javascript具体计算文本。

alert（eval（“2”+“2”））；   返回4

但是eval()函数会计算任何代码，完全不考虑导致什么后果。所以需要解析服务器的响应，而不只是直接计算。

可以从json.org下载一个json2.js的脚本，然后使用以下命令来解析JSON的数据。

var itemDetails=JSON.parse(request.responseText);

更新以上的js来使用JSON.parse()而不是eval()

-------------------------------

完成web编程时，安全总是一个重要问题。