随笔-7  评论-24  文章-102  trackbacks-0

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);
posted on 2010-05-30 11:17 黄小二 阅读(382) 评论(0)  编辑  收藏 所属分类: Ajax

只有注册用户登录后才能发表评论。


网站导航: