Ajax使用JSON数据格式案例
2014-08-05来源:

JSON是一种简单的数据格式,比xml更轻巧。其规则很简单,对象是一个无序的名称/值对集合,下面有个案例,大家可以感受下

1:

JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧。JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

JSON的规则很简单:对象是一个无序的“‘名称/值'对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值'对”之间使用“,”(逗号)分隔。

JSON用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。

对象描述中存储的数据可以是字符串,数字或者布尔值。对象描述也可存储函数,那就是对象的方法。

<span style="font-size:18px;">{"person": {

"name":"Andy Budd",

"website":"http://andybudd.com/",

"email":"andy@clearleft.com"

}

}</span>

JSON 只是一种文本字符串。它被存储在responseText 属性中

为了读取存储在 responseText 属性中的JSON 数据,需要根据JavaScript 的eval语句。函数 eval会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的,所以它本身是可执行的

2:案例

<%@ page language=

"java"

pageEncoding=

"UTF-8"

%> 

<%@ page language=

"java"

pageEncoding=

"UTF-8"

%> 

02

<html xmlns=

"http://www.w3.org/1999/xhtml"

xml:lang=

"en"

lang=

"en"

03

<head> 

04

<meta http-equiv=

"content-type"

content=

"text/html; charset=utf-8"

/> 

05

<title>People at Clearleft</title> 

06

<style type=

"text/css"

07

@import

url(

"clearleft.css"

); 

08

</style> 

09

<script type=

"text/javascript"

10

window.onload=function(){ 

11

var aNodes=document.getElementsByTagName(

"a"

); 

12

 

 

13

for

(var i =

0

;i < aNodes.length; i++){ 

14

 

 

15

aNodes[i].onclick=function(){ 

16

var request=

new

XMLHttpRequest(); 

17

var url=

this

.href; 

18

var method=

"GET"

19

request.open(method,url); 

20

request.send(

null

); 

21

request.onreadystatechange=function(){ 

22

if

(request.readyState==

4

){ 

23

if

(request.status==

200

||request==

304

){ 

24

var result=request.responseText;

//json被存储在responseText属性中 

25

var object=eval(

"("

+result+

")"

);

//读取responseText中的json数据 

26

var name= object.person.name;

//读取json对象中存储的数据 

27

var website= object.person.website; 

28

var email= object.person.email; 

29

var aNode=document.createElement(

"a"

); 

30

aNode.appendChild(document.createTextNode(name+

":"

+

"email"

+

":"

+website)); 

31

aNode.href=

"mailTo"

+

"email"

+

",website"

32

var h2Node=document.createElement(

"h2"

); 

33

h2Node.appendChild(aNode); 

34

var dtails=document.getElementById(

"details"

); 

35

details.innerHTML=

""

;

//防止重复的添加字符串 

36

dtails.appendChild(h2Node); 

37

38

39

40

return

false

41

42

43

}; 

44

</script> 

45

</head> 

46

<body> 

47

<h1> 

48

People 

49

</h1> 

50

<ul> 

51

<li> 

52

<a href=

"files/andy.js"

>Andy</a> 

53

</li> 

54

<li> 

55

<a href=

"files/richard.js"

>Richard</a> 

56

</li> 

57

<li> 

58

<a href=

"files/jeremy.js"

>Jeremy</a> 

59

</li> 

60

</ul> 

61

<div id=

"details"

></div> 

62

</body> 

63

</html>

更多信息请查看IT技术专栏

推荐信息
Baidu
map