一：

1.介绍

　　

2.嵌套

　　

3.json解析

　　

4.优缺点

　　

二：json功能程序测试

1.设计

　　

2.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript">

     var jsonObject={"name":"tom",

                     "age":18,

                     "address":{

                         "city":"BJ",

                         "school":"BD"

                     },

                     "teaching":function(){

                         alert("java ajax");

                     }

     };

     alert(jsonObject.name);

     //嵌套

     alert(jsonObject.address.city);

     //json里包含函数属性

     jsonObject.teaching();

     //将字符串转为json对象

     var jsonStr="alert('hello ajax2')";

     eval(jsonStr);

     //

     var json="{'name':'bob'}";

     var testjson=eval("("+json+")");

     alert(testjson.name);

 </script>

 </head>

 <body>

 </body>

 </html>

三：大纲

　　

四：程序

1.andy.js

 {"person": {

   "name":"Andy Budd",

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

   "email":"andy@clearleft.com"

   }

 }

2..css

　　程序和前面的相同。

3.index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</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 method="GET";

				var url=this.href;

				request.open(method,url);

				request.send(null);

				request.onreadystatechange=function(){

					if(request.readyState==4){

						if(request.status==200||request.status==304){

							//XML格式

							var result=request.responseText;      //需要修改成Text

							var jsonObject=eval("("+result+")");  //变成执行语句

							var name=jsonObject.person.name;

							var website=jsonObject.person.website;

							var email=jsonObject.person.email;

							//alert(name);

							//构建节点

							var aNode=document.createElement("a");

							aNode.appendChild(document.createTextNode(name));

							aNode.href="mailto:"+email;

							var h2Node=document.createElement("h2");

							h2Node.appendChild(aNode);

							var aNode2=document.createElement("a");

							aNode2.appendChild(document.createTextNode(website));

							aNode2.href=website;

							var detailsNode=document.getElementById("details");

							detailsNode.innerHTML="";                            // 在每次之前进行清空

							detailsNode.appendChild(h2Node);

							detailsNode.appendChild(aNode2);

						}

					}

				}

				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>

　　

五：效果

　　执行的效果与前面的执行效果相同。

　　

004 Ajax中传输格式为JSON的更多相关文章

  1. 003 Ajax中传输格式为XML

    一: 1.优缺点 二:大纲 1.结构设计 三:程序 1.xml <?xml version="1.0" encoding="utf-8"?> < ...

  2. 002 Ajax中传输格式为HTML

    一: 1.介绍 返回的数据可以直接插入到需要的地方. 2.优缺点 二:程序大纲 1.结构 三:程序 1.css body { background: #ffb url("logo.png&q ...

  3. java中集合格式及json格式的特点和转换

    作者原创:转载请注明出处 今天在写代码,遇到一个难点,由于要调用webservice接口,返回的为一个list集合内容,从webservice调用接口返回的为一个string的io流, 在调用接口的地 ...

  4. ajax中设置contentType: “application/json”的作用

    最近在做项目交互的时候,刚开始向后台传递数据返回415,后来百度添加了 contentType:"application/json"之后返回400,然后把传输的数据格式改为json ...

  5. ajax 提交form格式 和 json格式

    json 格式 内容在body中 ajax设置   Content-Type: application/json 浏览器查看为 Request Payload The Request Payload ...

  6. ajax中后台string转json

    首先导入alibaba的fastJson包 后台: String thirdPage1=prop.getProperty("thirdPage1"); String thirdPa ...

  7. Ajax之处理不同格式的JSON数据

    JSON是一种网络中的数据格式,主要用于网络间的数据传输,它比XML格式的数据传输速度快,使用更广. 1.Ajax处理对象格式的JSON数据: <script src="../JS/j ...

  8. Ajax中的JSON格式与php传输过程的浅析

    在Ajax中的JSON格式与php传输过程中有哪些要注意的小地方呢? 先来看一下简单通用的JSON与php传输数据的代码 HTML文件: <input type="button&quo ...

  9. Ajax中XML和JSON格式的优劣比较

    刚做完一个小的使用Ajax的项目.整个小项目使用JavaScript做客户端,使用PHP做服务器端.利用xmlHttpRequest组件作为交互工具,利用XML作为数据传输的格式.做完后基本做一个简单 ...

随机推荐

  1. 使用 Collections 实现排序 sort方法 对List 实体类实现Comparable类 示例

    package com.test.jj; import java.util.ArrayList; import java.util.Collections; public class Test { A ...

  2. SCOI2012喵星球上的点名

    http://codevs.cn/problem/2403/ 2012年省队选拔赛四川  时间限制: 2 s  空间限制: 128000 KB   题目描述 Description a180285幸运 ...

  3. Linux系统自动备份的Shell

    公司现在需要对现有的服务器进行定期备份,并将备份文件放置到正在使用的NAS中去: 为了备份的效率,还需要对备份的文件进行筛选,排除一些后缀名的文件: 实现方法如下: 1. 编写备份的shell文件 在 ...

  4. zzd 的割草机(Lawnmower)

    评测传送门 [题目描述] 已知花坛为一个 n * m 的矩形,草只会长在某些个格子上,zzd 有一个割草机,一开始,zzd 站在(1,1)处,面向(1,m)(面向右).每次 zzd 有两个选择(耗费一 ...

  5. 【CTF WEB】GCTF-2017读文件

    读文件 只给了个1.txt可以读,试了一下加*不行,感觉不是命令执行,"../"返回上级目录也不行,猜测可能过滤了什么,在1.txt中间加上"./"发现仍能读取 ...

  6. flask插件系列之flask_uploads上传文件

    前言 flask可以实现上传文件和下载文件的基本功能,但如果想要健壮的功能,使用flask_uploads插件是十分方便的. 安装 pip install flask_uploads 基本使用 # e ...

  7. wifi两种工作模式

    AP:即无线接入点,是一个无线网络的中心节点.通常使用的无线路由器就是一个AP,其它无线终端 可以通过AP相互连接. STA:即无线站点,是一个无线网络的终端.如笔记本电脑.PDA等. 1>工作 ...

  8. pl/sql developer 设置oracle的date类型默认显示样式

    oracle里默认的date显示样式: 我的是汉化过的: 进入后,点击工具->首选项->日期/时间设置即可: 设置后在pl/sql developer中查看: 英文版的操作步骤: Tool ...

  9. React-Native 之 常用组件Image使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  10. RabbitMQ--Hello world！（一）

    Introduction RabbitMQ is a message broker. The principal idea is pretty simple: it accepts and forwa ...