Javascript学习指南（第2版）笔记(六) DOM、Ajax及其数据
1、DOM
2、节点属性和方法
3、Ajax安全和工作区
4、Ajax数据：XML或 JSON（JavaScript对象符号）
1、DOM
在 W3C关于 DOM的规范中，将 document元素描述为一个节点(node)集合，他们之间是以有层次的树形结构连接的。你不仅可以从树上读取节点，还可以删除或创建新的节点。
#document
html
head
title
body
h1
div
p
#text
p
#text
2、节点属性和方法
对于文档树上的每个节点都拥有 DOM(Core)的 Node对象中定义的基本属性和基本方法集。Node对象的属性主要包括：
nodeName，对象名称，如 head元素的名称就是 HEAD；
nodeValue，如果不是一个元素，则返回对象值；
nodeType，用数字表示的节点类型；
parentNode，当前节点的父节点；
childNodes，由其子节点组成的 NodeList，前提是存在子节点；
firstChild，由子节点组成的 NodeList中的第一个节点；
lastChild，由子节点组成的 NodeList中的最后一个节点；
previousSibling，如果当前节点是位于 NodeList中的子节点，那么它表示的就是该列表中的前一个节点；
nextSibling，如果当前节点是位于 NodeList中的子节点，那么它表示的就是该列表的下一个节点；
attributes，一个 NamedNodeMap，它是以键/值对形式表示的，是该元素的属性列表；
ownerDocument，拥有的 document对象，当你拥有多个 document对象时它比较有用；
namespaceURI，命名空间的 URI，如果有的话，他是针对节点的；
Prefix，命名空间的前缀，如果有的话，它是针对节点的；
localName，如果指定了 namespaceURI的话，它表示的是节点的本地名。
3、Ajax安全和工作区
在 Ajax遵循 JavaScript中相同源、相同域的规则：在 Web页面中只能调用相同服务器（相同域）的 Web服务；也就是说：服务器端页面与服务器发送请求的页面处于相同的服务器、相同的域中。
但是对于 Ajax程序而言，向本地服务器端请求一个 Web服务，然后接收本地服务器的返回信息即可。它并不关心本地 Web服务实际上是否通过访问远程 Web服务实现的。
4、Ajax数据：XML或 JSON（JavaScript对象符号）
XML格式的 Ajax应答
好处是比简单的字符串或 HTML片段更多元。另外，你还可以向对待 Web页面元素那样，直接通过 DOM方法来操作 Ajax调用返回的 XML格式应答。
确保在服务器端应用程序在返回数据时设置了正确的数据 MINE类型 text/xml，然后通过 XMLHttpRequest对象的 responseXML容器来获取应答信息。
JSON
JSON是一种“轻量级的数据交换格式”。和一组由逗号分开的字符串，以及处理复杂（成本高昂）的 XML相比，JSON是一种很容易将服务器端数据结构转成 JavaScript对象的数据格式。
JSON实际上就是使用 JavaScript语法定义的对象，一个对象的语法包括一对大括号以及其中的成员：
object{ } or object { string : value ...}
对于数组而言，他是由一组元素加上一对方括号组成的：
array[] or array[ value, value, value, ..., value ]
注：在 JavaScript可以用单引号或双引号来引用字符串，而 JSON只支持双引号。
示例，在 PHP脚本中使用简单的 JSON
$result = '[ { "value" : "stlou", "title" : "St. Louis" }, ' .
' { "value" : "kc" , "title" : "Kansas City" } ]';
JSON对象
在 http://www.json.org/js.html上可以找到一个 JSON JavaScript程序库，它提供了一些基于该程序库的 JSON对象。包含了直接访问 JSON对象的静态方法：
JSON.parse，基于指定的 JSON格式字符串创建一个 JavaScript对象；
JSON.stringify，将一个 JavaScript对象序列化成一个 JSON格式的字符串。
JSON 示例1：
var response = JSON.parse(xmlHttpObj.responseText);
var citySelection = document.getElementById("citySelection");
var name = value = null;
//处理从 JSON对象返回的数据
for (var i=0; i<response.length; i++) {
name = response[i].title;
value = response[i].value;
citySelection.options[i] = new Option(name, value);
}
JSON示例2：
{ "title" : "Appletini",
"ingredients" : [ { "ingredient" : "1 ounce vodka"},
{ "ingredient" : "1/2 ounce Sour Apple Pucker or apple schnapps "} ],
"instruction" : "Mix vodka and schnapps in a glass filled with ice." }
//============================================================
//处理 JSON数据
//创建对象
var recipeObj = JSON.parse(xmlhttp.responseText);
var recipe = document.createElement('div');
recipe.id = 'recipe';
recipe.className = 'recipe';
//添加标题
var title = recipeObj['title'];
var titleNode = document.creteElement('h3');
titleNode.appendChild(document.createTextNode(title));
recipe.appendChild(titleNode);
//添加配方成分
var ingredients = recipeObj.ingredients;
for (var i=0; i<ingredients.length; i++){
var item = ingredients[i].ingredient;
}
.body[0].appendChild(recipe);
