Ajax 传输 JSON
JSON 的语法
JSON(JavaScript Object Notation)：是 ECMAScript 的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。
语法规则：
数据在键值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
数据类型：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
{
"name":"fox",
"age":"18",
"sex":"true",
"car":null
}
[
{
"name":"小小胡",
"age":"1"
},
{
"name":"小二胡",
"age":"2"
}
]
|
JavaScript 中：json 字符串 <–> js 对象
基本上，所有的语言都有将 json 字符串转化为该语言对象的语法。
比如在 js 中：
- JSON.parse()：将 JSON 字符串转化为 js 对象。例如：
1
2
|
var jsObj = JSON.parse(ajax.responseText);
|
- JSON.stringify()：将 JS 对象转化为 JSON 字符串。例如：
1
2
3
4
5
6
7
8
9
10
| var Obj = {
name: 'fox',
age: 18,
skill: '撩妹',
};
console.log(Obj);
var jsonStr = JSON.stringify(Obj);
|
PHP 中：json 字符串 <–> js 对象
代码举例：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <?php
header("Content-Type:text/html;charset=utf-8");
$jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
print_r(json_decode($jsonStr));
echo "<br>";
$arrayName = array('name' =>'littleFox' ,'age' => 13 );
print_r(json_encode($arrayName));
?>
|
输出结果：
1
2
| stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
{"name":"littleFox","age":13}
|
ajax 请求解析 json（举例）
（1）Person.json:
1
2
3
4
5
| {
"name": "小强",
"skill": "砍树",
"friend": "老板"
}
|
（2）myJson.php：
1
2
3
4
5
6
| <?php
echo file_get_contents('info/Person.json');
?>
|
（3）getJson.html：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h1>获取 json 数据</h1>
<input type="button" value="获取json" id="btnJson" />
</body>
</html>
<script type="text/javascript">
document.querySelector('#btnJson').onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get', 'myJson.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText);
var jsObj = JSON.parse(ajax.responseText);
console.log(jsObj);
var str = '';
str += '<ul>';
str += '<li>' + jsObj.name + '</li>';
str += '<li>' + jsObj.skill + '</li>';
str += '<li>' + jsObj.friend + '</li>';
str += '</ul>';
document.body.innerHTML = str;
}
};
};
</script>
|
演示效果：
Ajax 传输 XML
XML 语法
XML（Extensible Markup Language）：可扩展标记语言。详细语法可以查看：#。
1、XML 声明：
1
| <?xml version="1.0" encoding="UTF-8"?>
|
第一行的声明，指定了 XML 版本(1.0)以及使用的编码。
2、自定义标签：
XML 中没有默认的标签，所有的标签都是我们自己已定义的。例如：
1
2
| <fox></fox>
<name></name>
|
XML 中没有单标签，都是双标签。
3、根节点：
XML 中必须要有一个根节点，所有的子节点都放置在根节点下。例如：
1
2
3
| <root1>
<name></name>
</root1>
|
XML 解析
因为 XML 就是标签，所以我们可以直接用解析 Dom 元素的方法解析 XML。
解析过程：
（1）html 部分：（包含 xml ）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<person id="personXML">
<name>fox</name>
<age>18</age>
<skill>小花花</skill>
</person>
</body>
</html>
|
（2）解析 xml：
1
2
3
4
5
6
| <script type="text/javascript">
var xmlObj = document.getElementById('personXML');
var name = xmlObj.getElementsByTagName('name')[0].innerHTML;
console.log(name);
</script>
|
ajax 请求解析 xml（举例）
（1）get_xml.php：（里面包含了 xml 文件）
1
2
3
4
5
6
7
8
| <?php
header('content-type:text/xml; charset= utf-8');
echo file_get_contents('info/star.xml');
?>
|
上方代码解释：
（2）get_xml.html：（Ajax 请求，获取并解析 xml）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input type="button" value="获取XMl数据" id="getXML" />
</body>
</html>
<script type="text/javascript">
document.querySelector('#getXML').onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get', 'get_XMl.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText);
console.log(ajax.responseXML);
console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
console.log(window.document);
}
};
};
</script>
|
