一：

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. CSS3 渐变，rgba与hsla

    radial-gradient:径向渐变 ellipse:椭圆形渐变默认,circle:圆形渐变 定义渐变大小,指定终点位置: farthest-corner:默认,指定径向渐变的半径长度为:从圆心到 ...

  2. Shell记录-Shell脚本基础（四）

    while循环,使您能够重复执行一组命令,直到某些条件发生.它通常用于当你需要反复操纵的变量值. 语法 while command do Statement(s) to be executed if ...

  3. JS中的异步与回调

    问题的引出:在js中使用异步调用时,有可能会出现在异步的回调函数中设置调用之外的变量值,但在异步调用完成后去使用变量,却发现这些变量值并没有被成功设置的情况.如: google map中的地理编码,地 ...

  4. js-验证码插件gVerify.js

    插件 gVerify.js 源码 !(function(window, document) { function GVerify(options) { //创建一个图形验证码对象,接收options对 ...

  5. Windows下配置Nginx+php7

    第一部分:准备工作 第二部分:安装nginx 第三部分:安装php(这里主要讲nginx配置启动php,以cgi运行php)nginx配置文件是conf文件夹里的nginx.conf 在这里,我简单说 ...

  6. java 根据二叉树前序 ，中序求后续

    在一棵二叉树总,前序遍历结果为:ABDGCEFH,中序遍历结果为:DGBAECHF,求后序遍历结果. 我们知道: 前序遍历方式为:根节点->左子树->右子树 中序遍历方式为:左子树-> ...

  7. Oracle嵌套表

    一.介绍  1.定义 嵌套表是表中之表.一个嵌套表是某些行的集合,它在主表中表示为其中的一列.对主表中的每一条记录,嵌套表可以包含多个行.在某种意义上,它是在一个表中存储一对多关系的一种方法.    ...

  8. JVM性能调优监控工具详解

    现实企业级Java开发中,有时候我们会碰到下面这些问题: OutOfMemoryError,内存不足 内存泄露 线程死锁 锁争用(Lock Contention) Java进程消耗CPU过高 .... ...

  9. ES6简单总结

    1.变量声明let和const 我们都是知道在ES6以前,var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: functi ...

  10. 利用正则表达式去除所有html标签，只保留文字

    后台将富文本编辑器中的内容返回到前端时如果带上了标签,这时就可以利用这种方法只保留文字. 标签的格式有以下几种 1.<div class="test"></div ...