一：

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. Linux基础实验

    过滤,管道与重定向 过滤 管道 重定向 运维常用 给某目录设置权限 sudo chmod -R /var/www/html/

  2. 详解tomcat连接数和线程数

    前言 在使用tomcat时,经常会遇到连接数.线程数之类的配置问题,要真正理解这些概念,必须先了解Tomcat的连接器(Connector). 在前面的文章 详解Tomcat配置文件server.xm ...

  3. TPS低，CPU高--记一次storm压测问题排查过程

    一.业务背景+系统架构 本次场景为kafka+storm+redis+hbase,通过kafka的数据,进入storm的spout组件接收,转由storm的Bolt节点进行业务逻辑处理,最后再推送进k ...

  4. Webpack的安装、配置与执行

    先用npm安装 npm install webpack -g 然后在项目路径下进行项目安装 npm init # 会自动生成一个package.json文件 npm install webpack - ...

  5. Netty接收HTTP文件上传及文件下载

    文件上传 这个处理器的原理是接收HttpObject对象,按照HttpRequest,HttpContent来做处理,文件内容是在HttpContent消息带来的. 然后在HttpContent中一个 ...

  6. Document对象中的一些重要的属性和方法(笔记)

    Document对象:每一个web浏览器窗口.标签页和框架由一个window对象所表示.每个window对象都有一个document属性引用的是Document对象,它是一个巨大的API中的核心对象, ...

  7. Codeforces刷题计划

    Codeforces刷题计划 已完成:-- / -- [Codeforces370E]370E - Summer Reading:构造:(给定某些数,在空白处填数,要求不下降,并且相邻差值<=1 ...

  8. jquery $.post() 向php传值 实现简单的二级联动

    更多内容推荐微信公众号,欢迎关注: 1 其中selectid是一个下拉菜单的id $().ready(function () { $("#selectid").change(fun ...

  9. 十大opengl教程

    正文: 1． http://nehe.gamedev.net/ 这个是我觉得全世界最着名的OpenGL教程,并且有网友将其中48个教程翻译成了中文http://www.owlei.com/Dancin ...

  10. windows 10 部署flask web

    起因 本来想这用django 写一个web 应用程序,便于管理mongodb的数据.结果django 不直接支持mongodb……又没时间研究NoSQL.于是想着随便整个api吧…… 于是先用flas ...