隨筆-7  評(píng)論-24  文章-102  trackbacks-0

          1、DOM
          2、節(jié)點(diǎn)屬性和方法
          3、Ajax安全和工作區(qū)
          4、Ajax數(shù)據(jù):XML或 JSON(JavaScript對(duì)象符號(hào))





          1、DOM

               在 W3C關(guān)于 DOM的規(guī)范中,將 document元素描述為一個(gè)節(jié)點(diǎn)(node)集合,他們之間是以有層次的樹形結(jié)構(gòu)連接的。你不僅可以從樹上讀取節(jié)點(diǎn),還可以刪除或創(chuàng)建新的節(jié)點(diǎn)。

          #document
          html
            head
              title
            body
              h1
              div
                p
                  #text
                p
                  #text


          2、節(jié)點(diǎn)屬性和方法

               對(duì)于文檔樹上的每個(gè)節(jié)點(diǎn)都擁有 DOM(Core)的 Node對(duì)象中定義的基本屬性和基本方法集。Node對(duì)象的屬性主要包括:

          nodeName,對(duì)象名稱,如 head元素的名稱就是 HEAD;
          nodeValue,如果不是一個(gè)元素,則返回對(duì)象值;
          nodeType,用數(shù)字表示的節(jié)點(diǎn)類型;
          parentNode,當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn);
          childNodes,由其子節(jié)點(diǎn)組成的 NodeList,前提是存在子節(jié)點(diǎn);
          firstChild,由子節(jié)點(diǎn)組成的 NodeList中的第一個(gè)節(jié)點(diǎn);
          lastChild,由子節(jié)點(diǎn)組成的 NodeList中的最后一個(gè)節(jié)點(diǎn);
          previousSibling,如果當(dāng)前節(jié)點(diǎn)是位于 NodeList中的子節(jié)點(diǎn),那么它表示的就是該列表中的前一個(gè)節(jié)點(diǎn);
          nextSibling,如果當(dāng)前節(jié)點(diǎn)是位于 NodeList中的子節(jié)點(diǎn),那么它表示的就是該列表的下一個(gè)節(jié)點(diǎn);
          attributes,一個(gè) NamedNodeMap,它是以鍵/值對(duì)形式表示的,是該元素的屬性列表;
          ownerDocument,擁有的 document對(duì)象,當(dāng)你擁有多個(gè) document對(duì)象時(shí)它比較有用;
          namespaceURI,命名空間的 URI,如果有的話,他是針對(duì)節(jié)點(diǎn)的;
          Prefix,命名空間的前綴,如果有的話,它是針對(duì)節(jié)點(diǎn)的;
          localName,如果指定了 namespaceURI的話,它表示的是節(jié)點(diǎn)的本地名。


          3、Ajax安全和工作區(qū)

               在 Ajax遵循 JavaScript中相同源、相同域的規(guī)則:在 Web頁面中只能調(diào)用相同服務(wù)器(相同域)的 Web服務(wù);也就是說:服務(wù)器端頁面與服務(wù)器發(fā)送請(qǐng)求的頁面處于相同的服務(wù)器、相同的域中。

               但是對(duì)于 Ajax程序而言,向本地服務(wù)器端請(qǐng)求一個(gè) Web服務(wù),然后接收本地服務(wù)器的返回信息即可。它并不關(guān)心本地 Web服務(wù)實(shí)際上是否通過訪問遠(yuǎn)程 Web服務(wù)實(shí)現(xiàn)的。


          4、Ajax數(shù)據(jù):XML或 JSON(JavaScript對(duì)象符號(hào))


          XML格式的 Ajax應(yīng)答

               好處是比簡單的字符串或 HTML片段更多元。另外,你還可以向?qū)Υ?Web頁面元素那樣,直接通過 DOM方法來操作 Ajax調(diào)用返回的 XML格式應(yīng)答。

               確保在服務(wù)器端應(yīng)用程序在返回?cái)?shù)據(jù)時(shí)設(shè)置了正確的數(shù)據(jù) MINE類型 text/xml,然后通過 XMLHttpRequest對(duì)象的 responseXML容器來獲取應(yīng)答信息。


          JSON

               JSON是一種“輕量級(jí)的數(shù)據(jù)交換格式”。和一組由逗號(hào)分開的字符串,以及處理復(fù)雜(成本高昂)的 XML相比,JSON是一種很容易將服務(wù)器端數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)成 JavaScript對(duì)象的數(shù)據(jù)格式。

               JSON實(shí)際上就是使用 JavaScript語法定義的對(duì)象,一個(gè)對(duì)象的語法包括一對(duì)大括號(hào)以及其中的成員:
               object{ } or object { string : value ...}

               對(duì)于數(shù)組而言,他是由一組元素加上一對(duì)方括號(hào)組成的:
               array[] or array[ value, value, value, ..., value ]

          注:在 JavaScript可以用單引號(hào)或雙引號(hào)來引用字符串,而 JSON只支持雙引號(hào)。

          示例,在 PHP腳本中使用簡單的 JSON
          $result = '[ { "value" : "stlou", "title" : "St. Louis" }, ' .
                    '  { "value" : "kc" , "title" : "Kansas City" } ]';


          JSON對(duì)象

               在 http://www.json.org/js.html上可以找到一個(gè) JSON JavaScript程序庫,它提供了一些基于該程序庫的 JSON對(duì)象。包含了直接訪問 JSON對(duì)象的靜態(tài)方法:
          JSON.parse,基于指定的 JSON格式字符串創(chuàng)建一個(gè) JavaScript對(duì)象;
          JSON.stringify,將一個(gè) JavaScript對(duì)象序列化成一個(gè) JSON格式的字符串。


          JSON 示例1:
          //對(duì) JSON字符串進(jìn)行“計(jì)算”
          var response = JSON.parse(xmlHttpObj.responseText);

          var citySelection = document.getElementById("citySelection");
          var name = value = null;

          //處理從 JSON對(duì)象返回的數(shù)據(jù)
          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:
          //從服務(wù)器獲得的 JSON對(duì)象實(shí)例:
          "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數(shù)據(jù)

          //創(chuàng)建對(duì)象
          var recipeObj = JSON.parse(xmlhttp.responseText);

          var recipe = document.createElement('div');
          recipe.id 
          = 'recipe';
          recipe.className 
          = 'recipe';

          //添加標(biāo)題
          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);
          posted on 2010-05-30 11:17 黃小二 閱讀(399) 評(píng)論(0)  編輯  收藏 所屬分類: Ajax
          主站蜘蛛池模板: 辰溪县| 青铜峡市| 佳木斯市| 阿克苏市| 吉水县| 远安县| 杨浦区| 满城县| 龙川县| 高台县| 德化县| 沅江市| 木里| 红桥区| 平邑县| 合江县| 长兴县| 海盐县| 石狮市| 冷水江市| 万安县| 修水县| 正镶白旗| 开化县| 永济市| 清镇市| 凤庆县| 祁阳县| 辉南县| 平塘县| 克山县| 威信县| 天台县| 乌恰县| 阿尔山市| 益阳市| 三原县| 南通市| 琼海市| 台东县| 张北县|