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：

//對 JSON字串進行“計算”
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：

//從伺服器獲得的 JSON對象執行個體：
{ "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);