AJAX数据格式之JSON（ajax json格式）

25-03-29 5

在这篇文章中，我们将为您详细介绍AJAX数据格式之JSON的内容，并且讨论关于ajaxjson格式的相关问题。此外，我们还会涉及一些关于AJAX-封装的传参改为传入对象XMLJSON数据格式、AJAX

在这篇文章中，我们将为您详细介绍AJAX数据格式之JSON的内容，并且讨论关于ajax json格式的相关问题。此外，我们还会涉及一些关于AJAX - 封装的传参改为传入对象 XML JSON 数据格式、AJAX -- 通过JSON完成多形态的数据格式传送、Ajax(三) — json 数据格式、Ajax_数据格式_JSON的知识，以帮助您更全面地了解这个主题。

本文目录一览：

AJAX数据格式之JSON（ajax json格式）
AJAX - 封装的传参改为传入对象 XML JSON 数据格式
AJAX -- 通过JSON完成多形态的数据格式传送
Ajax(三) — json 数据格式
Ajax_数据格式_JSON

AJAX数据格式之JSON（ajax json格式）

1、在Eclipse中创建项目目录视图如下：

2、代码及注解如下

andy.xml文件代码如下所示：

{"person":{
		"name":"Hello Andy","website":"http://www.test001.com/","email":"andy@qq.com"
	}
}

index.html文件代码及注解如下所示：

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>AJAX--数据格式--JSON</title>
<script type="text/javascript">
	
	window.onload = function() {
		
		var aNodes = document.getElementsByTagName('a');
		
		for (var i = 0; i < aNodes.length; i++) {
			
			aNodes[i].onclick = function() {
				
				// 创建XMLHttpRequest对象
				var request = new XMLHttpRequest();
				var method = "GET";
				var url = this.href;
				
				// 调用Open方法
				request.open(method,url);
				// 调用send方法
				request.send(null);
				
				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						if (request.status == 200 || request.status == 304) {
							// 1、结果是JSON格式，使用responseText来获取
							var result = request.responseText;
							// 使用eval()函数将一个字符串转为本地的JSON来执行
							var object = eval("(" + result + ")");
							
							var Tname = object.person.name;
							var Twebsite = object.person.website;
							var Temail = object.person.email;
							
							// 创建第一个<a>节点
							var aNode = document.createElement('a');
							aNode.appendChild(document.createTextNode(Tname));
							aNode.href = "mailto:" + Temail;
							
							// 创建<h2>标签
							var h2Node = document.createElement('h2');
							h2Node.appendChild(aNode);
							
							// 创建第2个<a>标签
							var aNode2 = document.createElement('a');
							aNode2.appendChild(document.createTextNode(Twebsite));
							aNode2.href = Twebsite;
							
							// 4、将拼写得到的JSON数据信息添加到"id = 'detail'"中
							var detailNode = document.getElementById('detail');
							// 清空detailNode中的数据
							detailNode.innerHTML = "";
							detailNode.appendChild(h2Node);
							detailNode.appendChild(aNode2);
							
						}
					}
				}
				return false;
				
			}  // aNodes[i].onClick = function()
		}  // for (var i = 0; i < aNodes.length; i++)
	}  // window.onload = function()
	
	
	
</script>

</head>
<body>
	
	<h2>Person</h2>
	<ul>
		<li><a href="files/andy.js">First andy</a></li>
		<li><a href="files/jeremy.js">Second jeremy</a></li>
		<li><a href="files/richard.js">Third richard</a></li>
		
	</ul>
	
	<div id="detail"></div>
	
</body>
</html>

3、运行结果如下所示：

--------------------------------------------------------------------------------------------------------------------------------------------

JSON代码小练习--testjson.html

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>JSON小练习</title>
<script type="text/javascript">
	
	var jsonObject = {
			"name":"Bob","age":"12","address":{"city":"BeiJing","school":"大中华"},"teaching" : function() {
				alert("JavaEE,Android...");
			}
	};
	
	/* 
	alert(jsonObject.name);
	alert(jsonObject.address.city);
	jsonObject.teaching();
	 */
	
	var jsonStr =  "{'name':'Tom'}";
	
	// 把一个字符串转换为JSON对象!
	//alert(jsonStr.name);  // 返回结果为: undefined
	
	// 使用eval()方法
	var testStr = "alert('hello eval')";
	// alert(testStr);
	
	// eval()可以把一个字符串转为本地的JS代码来执行
	eval(testStr);  // 返回结果：hello eval
	
	// eval()函数把jsonStr字符串转换为JSON对象
	var testObject = eval("(" + jsonStr + ")");
	alert(testObject.name);
	
</script>

</head>
<body>
	
	
</body>
</html>

AJAX - 封装的传参改为传入对象 XML JSON 数据格式

Ajax封装函数，上次是直接传参，这次在原来的基础上改进，模仿jQuery 直接传入对象，把之前的参数都变为这个对象的属性。

这样可以随意调换传入数据的次序。

其他优点？　需要再复习一下。

Ajax处理后台传的数据主要有下面几种：

1. 直接用PHP写的数据，缺点是比如数据中有字符，而切割字符时用的是同样的符号，就会导致出错。

2. XML

开头必须写 <?xml version="1.0" encoding="UTF-8" ?>

所有内容必须包裹在一对根标签当中，标签的名字可以自定义。

XML这种格式的数据避免了数据中有符号分隔带来的潜在问题。

<?xml version="1.0" encoding="UTF-8" ?>
<person>
<name>李南江</name>
<age></age>
</person>

3. JSON

JSON 是 JS 对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。

从对象转换为JSON字符串 JSON.stringify();

传入对象，转出对象的JSON字符串格式。

把JSON字符串解析为对象， JSON.parse();

传入的是JSON格式的数据，得到JS 对象。

AJAX -- 通过JSON完成多形态的数据格式传送

在使用AJAX完成前后台的异步交互（页面无刷新更新数据）时，我们经常会遇到需要传递多个值或者一个数组的数据到前台，此时网上有好多人，使用将多个数据通过逗号等标识符进行区分，然后前台使用split完成转换数组的形式，此种方案会存在BUG，一旦数据中包含标识符将会引起程序的错误。

这里我们使用JSON进行传输，也就是将要传输的数据转换成JSON的格式，然后前台JS对JSON进行解析，

JSON的API有很多，我常用的org.json、最近使用了一个叫jackson的工具包也很好用http://www.cnblogs.com/hoojo/archive/2011/04/22/2024628.html。

后台组装JSON

下面我摘取了下程序中的核心代码，

Map<String,String> jsonMap = new HashMap<String,String>();
        jsonMap.put("runTeamtablehtml",runTeamtablehtml);
        jsonMap.put("runTeamPagetablehtml",runTeamPagetablehtml);
        String json = JsonUtils.ObjtoJson(jsonMap);
        // 输出数据
        write(response,json);

这里我使用的项目中已经有的JSON工具包，JACKSON

public static String ObjtoJson(Object object) {  

        // Jackson方式转换为Json 
        MappingJsonFactory f = new MappingJsonFactory();   
        StringWriter sw = new StringWriter();  

        try {  
            JsonGenerator generator = f.createJsonGenerator(sw);  
            generator.writeObject(object);  
            generator.close();  

        } catch (Exception e) {  
            log.error(e.getMessage(),e);
            return "";  
        }  
        return sw.toString();  

    }

此时JSON工具包，将我们的MAP转换成了JSON格式的字符串。

前台解析JSON

function createData() {
        if (req.readyState == 4) {
            if (req.status == 200) {
                var result = eval("("+req.responseText+")");
                document.getElementById("data").innerHTML = result.runTeamtablehtml;
                document.getElementById("data1").innerHTML = result.runTeamPagetablehtml;
                EvenFunc();
            } else {
                alert("不能得到描述信息:" + req.statusText);
            }
        }
    }

核心代码：var result = eval(“(“+req.responseText+”)”);，注意要使用eval，否则在获取属性的时候会出现undefined的错误，参考：http://liupeng-10408.iteye.com/blog/1113396。

Ajax(三) — json 数据格式

为什么，学习json？

现在异构系统之间消息传递大多数的使用的都是json格式

比如 WebService 基于XML，因为要遵循多种约束，所以传递数据比较麻烦，而且在高并发的情况下,传递数据很慢。而阿里的 dubbo 分布式服务框架(仅限于Java平台使用)的效率就非常非常高

JSON（JavaScriptObject Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。

规则如下:

1）映射用冒号（“：”）表示。名称:值

2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2

3）映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}

4）并列数据的集合（数组）用方括号(“[]”)表示。

[ {名称1:值,名称2:值2},{名称1:值,名称2:值2}]

5）元素值可具有的类型：string,number,object,array,true,false,null

/**
 * json中的value可以是：
 *    数字类型,字符串类型,json,[],function
 */
var json1 = {};

var json2 = { //key:value
	name:'aaa',id:1,aaa:function(){
		alert("adsf");
	}
};


var json3 = {//key:value(value又是一个json)
	person:{
		id:1,name:'aa'
	}
};
//json数组
var json4 = [
	{
		id:1,name:'aaa'
	},{
		id:2,name:'bbb'
	}
];

var json5 = {
	setPerson:function(){ //key:value(一个函数)
		
	}
};

var json6 = {//key:json引用
	aaa:json4
};

/**
 * 遍历json
 */
for(var i in json2){
	/**
	 * i代表key值
	 */
	alert(i);
	/**
	 * json2[i]代表value值
	 */
	if(typeof json2[i] == "function"){//如果 value是一个function
		json2[i]();//调用该方法
	}else{
		alert(json2[i]);
	}
}

//查找json中的key,value的一种形式
alert("-------------"+json2["name"]);

//利用该方式可以给一个json动态的加入  key:value
json2['asdf'] = 1;
alert(json2['asdf']);

/**
 * 所以说json的写法非常灵活,只要能解析,就能传递
 */

解析JSON

JSON 只是一种文本字符串。它被存储在 responseText属性中

为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句。函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript代码构成的，所以它本身是可执行的

json优点：

作为一种数据传输格式，JSON 与XML 很相似，但是它更加灵巧。

JSON 不需要从服务器端发送含有特定内容类型的首部信息。

缺点：

语法过于严谨

代码不易读

Json对象与Java对象之间的相互转换（两种方式）

一、Jackson

Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json、xml转换

public class JackJsonTest {

	/**
	 * bean 转化 json 字符串
	 * @throws Exception
	 */
	@Test
	public void testBean2Json() throws Exception {
		
		User user = new User();
		user.setDescription("desc1");
		user.setId(1L);
		user.setName("name1");
		
		ObjectMapper mapper = new ObjectMapper();
		String jsonStr = mapper.writeValueAsstring(user);
		System.out.println(jsonStr);
		//writeValue和writeObject有相同的功能
		mapper.writeValue(System.out,user);
		
	}

}

要导入所需

jackson-annotations-2.4.0.jar
jackson-core-2.4.5.jar
jackson-databind-2.4.5.jar

二、如果要将数组、对象、Map、List转换成JSON数据,那我们需要一些jar包：

json-lib-2.4-jdk15.jar
ezmorph-1.0.6.jar
commons-logging.jar
commons-lang.jar
commons-collections.jar
commons-beanutils.jar

@Test
	public void test2(){
		//将数组转换为JSON:
		String[] arr = {"asd","dfgd","asd","234"};
		JSONArray jsonarray = JSONArray.fromObject(arr);
		System.out.println(jsonarray);
		
		//对象转换成JSON：
		User user = new User(1001,"张三");
		JSONArray jsonArray = JSONArray.fromObject(user);  
		System.out.println( jsonArray );  
		
		//把Map转换成json， 要使用jsonObject对象：
		Map<String,Object> map = new HashMap<String,Object>();
		map.put("id",1001);
		map.put("userName","张三");
	
		JSONObject jsonObject = JSONObject.fromObject(map);
		System.out.println(jsonObject);
		
		//把List转换成JSON数据：
		List<User> list = new ArrayList<User>();
		User user = new User(1001,"张三");
		list.add(user);
		list.add(user);
		list.add(user);
		JSONArray jsonArray = JSONArray.fromObject(list);
		System.out.println(jsonArray);
	}

Ajax_数据格式_JSON

【JSON】

1.JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

2.JSON的规则很简单：对象是一个无序的“ ‘ 名称/值’ 对 ”集合。一个对象以“{”（左括号）开始，“}”(右括号)结束。每个“名称”后跟一个“：”（冒号） ;“ ‘名称/值’ 对 ” 之间用 “ ， ” (逗号) 分隔。

【解析JSON】

1.JSON只是一种文本字符串。它被存储在responseText属性中。

2.为了读取存储在responseText属性中的JSON数据，需要根据JavaScript的eval语句。函数eval会把一个字符串当做它的参数。然后这个字符串会被当作JavaScript代码来执行。因为JSON的字符串就是由JavaScript代码构成的，所以它本身是可执行的。

3.JSON提供了json.js包，下载http://www.json.org/json.js后，使用parseJSON（）方法将字符串解析成JS对象。

【JSON小结】

优点：

--作为一种数据传输格式，JSON与XML很相似，但是它更灵巧。

--JSON不需要从服务器端发送含有特定内容类型的首部信息。

缺点：

--语法过于严谨。

--代码不易读。

--eval函数存在风险。

【对比小结】

1.若应用程序不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据时最简单。

2.如果数据需要重用，JSON文件是个不错的选择，其在性能和文件大小方面有优势。

3.当远程应用程序未知时，XML文档是首选，因为XML是web服务领域的“世界语”。

今天关于AJAX数据格式之JSON和ajax json格式的讲解已经结束，谢谢您的阅读，如果想了解更多关于AJAX - 封装的传参改为传入对象 XML JSON 数据格式、AJAX -- 通过JSON完成多形态的数据格式传送、Ajax(三) — json 数据格式、Ajax_数据格式_JSON的相关知识，请在本站搜索。

本文标签：