主页 > 知识库 > Ajax使用JSON数据格式案例

Ajax使用JSON数据格式案例

热门标签:服务器配置 阿里云 Linux服务器 团购网站 科大讯飞语音识别系统 银行业务 Mysql连接数设置 电子围栏

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"%> 
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
head> 
meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
title>People at Clearleft/title> 
style type="text/css"> 
@import url("clearleft.css"); 
/style> 
script type="text/javascript"> 
window.onload=function(){ 
var aNodes=document.getElementsByTagName("a"); 

for(var i = 0;i  aNodes.length; i++){ 

aNodes[i].onclick=function(){ 
var request=new XMLHttpRequest(); 
var url=this.href; 
var method="GET"; 
request.open(method,url); 
request.send(null); 
request.onreadystatechange=function(){ 
if(request.readyState==4){ 
if(request.status==200||request==304){ 
var result=request.responseText; //json被存储在responseText属性中 
var object=eval("("+result+")"); //读取responseText中的json数据 
var name= object.person.name; //读取json对象中存储的数据 
var website= object.person.website; 
var email= object.person.email; 
var aNode=document.createElement("a"); 
aNode.appendChild(document.createTextNode(name+":"+"email"+":"+website)); 
aNode.href="mailTo"+"email"+",website"; 
var h2Node=document.createElement("h2"); 
h2Node.appendChild(aNode); 
var dtails=document.getElementById("details"); 
details.innerHTML=""; //防止重复的添加字符串 
dtails.appendChild(h2Node); 
} 
} 
} 
return false; 
} 
} 
}; 
/script> 
/head> 
body> 
h1> 
People 
/h1> 
ul> 
li> 
a href="files/andy.js">Andy/a> 
/li> 
li> 
a href="files/richard.js">Richard/a> 
/li> 
li> 
a href="files/jeremy.js">Jeremy/a> 
/li> 
/ul> 
div id="details">/div> 
/body> 
/html>

标签:萍乡 江苏 衢州 广元 大理 衡水 枣庄 蚌埠

巨人网络通讯声明:本文标题《Ajax使用JSON数据格式案例》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266