一：

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. ASP.NET根据IP获取省市地址

    1.在网站的跟路径下面添加 QQWry.dat 文件,这个文件是IP数据库文件 2.添加以下一个类 IPScanner     C# 代码   复制 public class IPScanner { ...

  2. ASP.NET项目与IE10、IE11不兼容的解决办法

    1.解决办法 机器级别修复, 服务器所有ASP.NET程序受益 需要去微软下载对应asp.NET版本的修补程序 .NET 4 -http://support.microsoft.com/kb/2600 ...

  3. （转）Oracle 字符集的查看和修改

    一.什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系.ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储,处理,检索数据.它使数据库 ...

  4. java_环境安装（window10）

    参考地址 下载JDK 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 本地环境变 ...

  5. prim算法记录路径

    题目链接:https://vjudge.net/contest/66965#problem/H 代码: #include<iostream> #include<string> ...

  6. Dream------spark--spark集群的环境搭建

    1.下载安装scala http://www.scala-lang.org/download/2.11.6.html   2.解压下载后的文件,配置环境变量:编辑/etc/profile文件,添加如下 ...

  7. raw数据类型

    Oracle中用于保存位串的数据类型是RAW,LONG RAW(推荐使用BLOB). RAW,类似于CHAR,声明方式RAW(L),L为长度,以字节为单位,作为数据库列最大2000,作为变量最大327 ...

  8. asp.net 伪静态实现（UrlRewritingNet）

    UrlRewritingNet.UrlRewriter源码地址 https://github.com/aspnetde/UrlRewritingNet部署步骤: 步骤一: <!--只允许存在一个 ...

  9. MyEclipse中Source not found的问题

    1.问题描述 在MyEclipse中想查看源码,结果显示:Source not found ......(大概的意思就是找不到源码包) 2.解决方案 下载相应版本的apache-tomcat-8.5. ...

  10. 十五、springboot集成定时任务(Scheduling Tasks)（二）之（线程配置）

    配置类: /** * 定时任务线程配置 * */ @Configuration public class SchedulerConfig implements SchedulingConfigurer ...