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