JSON的两个方法：
1.将字符串转换为JSON格式：parse().
2.将原生JavaScript值转换为JSON字符串：stringify();
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>json数据</title>
</head>
<body>
</body>
<scripttype="text/javascript">
// json数据里面可以包含json数据
var json ={
"id":8,
"name":"小明",
"age":18,
"scroce":[99,35,12,45],
"message":{
marry:"no",
son:"yes",
}
}
// 字符串的json格式
var string ="{'id':8,'name':'小明'}";
// 如果使用JSON.parse(string);//会报错
var str ='{"id":8,"name":"小明"}';// json转换数据的字符串必须是（单引套双引）
// 注意：键值key要用双引号引起来（单引套双引）
// 例如：
var person='{"name" : "aaa","age" : 11}';
// 1.parse()方法把字符串转成JSON格式
var json = JSON.parse(str);
var json =eval(str);//这种方法既不安全，可能会执行一些恶意代码。
// 2.stringify()方法第一个参数是一个数组，第二个参数是一个函数，第三个参数则表示是否在JSON字符串中保留缩进。
var str= JSON.stringify(json,function,num);//转换成JSON字符串
// PHP中的转化方法：
// json_encode()就是将PHP数组转换成Json。
// json_decode()就是将Json转换成PHP数组。
// json格式
var person='{"name":"小明","age":11,"sex":"男"}';
// 字符串
var string1 ="{'name':'小明','age':11,'sex':'男'}"
var string2 ='{"name":"小明","age":11,"sex":"男"}';
// 1.实现将字符串转化成JSON格式
JSON.parse(string1);//报错
JSON.parse(string2);//Object {name: "小明", age: 11, sex: "男"};
// 2.实现将JSON格式数据转化成字符串
console.log(JSON.stringify(person));//"{\"name\":\"小明\",\"age\":11,\"sex\":\"男\"}";
// 3.三个参数
// 第一个参数：json格式数据
// 第二个数据：对这个json数据进行处理的函数
// 第三个参数：缩进
var string3 = JSON.parse(person,function(k,v){
// console.log(k,v);//{"name":"小明","age":11,"sex":"男"}
// k,v对应的是person里面的键值对值
// 匹配处理
switch(k){
case"name":
return"姓名"+v;
break;
case"age":
return"年龄"+v;
break;
case"sex":
return"性别"+v;
break;
default:
return v;
}
},2);
console.log(string3);// Object {name: "姓名小明", age: "年龄11", sex: "性别男"};
</script>
</html>
XML的数据格式：
1.XML 被设计用来传输和存储数据。
2.HTML 被设计用来显示数据。
3.XML和JSON都使用结构化方法来标记数据.
4.什么是 XML？
XML 指可扩展标记语言（EXtensible Markup Language）
XML 是一种标记语言，很类似 HTML
XML 的设计宗旨是传输数据，而非显示数据
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
XML 是 W3C 的推荐标准
下面会举个例子：
获取xml文件里的数据
// 城市
// (省级)广东省->(市级)广州、..........
关于AJAX：
1.AJAX是什么？
AJAX ： 异步 JavaScript and XML
通俗的讲，AJAX就是JS通过一个网址去加载数据，这个过程通常是用户不可见的。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
AJAX加载过来的数据，哪些是JS能直接处理的？（
HTML CSS JS TEXT PNG）
2.
AJAX的优势：
1.异步加载数据，无需切换页面
2.更佳的用户体验：局部刷新、及时验证、操作步骤简化等
3.节省流量
4.JS控制数据的加载，更加灵活多用
3. 那么AJAX如何使用？
XMLHttpRequest()可扩展超文本传输请求
3.1 创建一个对象
所有现代浏览器均支持 XMLHttpRequest 对象
（IE5 和 IE6 使用 ActiveXObject("Microsoft.XMLHTTP");
3.2 open(method,url,bol)
method 参数是用于请求的 HTTP 方法。GET、POST
POST：用"POST"方式发送数据,可以大到4MB
用POST需要设置编码格式
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
GET：用"GET"方式发送数据,只能256KB
url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个
URL 与包含脚本的文本具有相同的主机名和端口。
bol 如果这个参数是 false，请求是同步的
如果这个参数是 true 或省略，请求是异步的
3.3 send(data)发送请求
3.4 onreadystatechange事件 服务器响应
readyState与status:
readyState有五种状态：
0 (未初始化)：
(XMLHttpRequest)对象已经创建，但还没有调用open()方法；
1 (载入)：
已经调用open() 方法，但尚未发送请求；
2 (载入完成)：
请求已经发送完成；
3 (交互)：
可以接收到部分响应数据；
4 (完成)
：已经接收到了全部数据，并且连接已经关闭。
如此一来，你应该就能明白readyState的功能，而status实际是一种辅状态判断，只是status更多是服务器方的状态判断。关于status，由于它的状态有几十种，我只列出平时常用的几种：
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误
3.5 获取数据
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。
案例：
在页面布局
<h1>省份</h1>
<ul>
<li>城市1</li>
<li>城市2</li>
<li>城市3</li>
<li>城市4</li>
</ul>
添加一个button按钮：<button>加载XML数据</button>
当点击按钮的时候，把？？.xml里面的数据加载到页面中
html：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>ajax_get</title>
</head>
<body>
<h1>省份</h1>
<ul>
<li>城市1</li>
<li>城市2</li>
<li>城市3</li>
<li>城市4</li>
</ul>
<button>加载XML数据</button>
</body>
<scripttype="text/javascript">
// 获取按钮
var btn = document.querySelector("button");
var h1 = document.querySelector("h1");
var lis = document.querySelectorAll("li");
// 1.创建对象
var xmlhttp ;//自定义对象
// 考虑兼容性写法IE5/6
// 判断浏览器是否支持XMLHttpRequest();
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
// js中添加绑定事件addEventListener();
// 添加点击事件
btn.onclick =function(){
// 使用open(data)设置请求参数
// open(method,url,bol);
xmlhttp.open("GET","2-city.xml",true);
// 使用send发送请求
xmlhttp.send();
}
// 响应服务器
// 给xmlhttp对象添加onreadystatechange事件
xmlhttp.onreadystatechange =function(){
// 两类，1.readyState与status
// 要判断服务器有没有异常
/*console.log("readyState",xmlhttp.readyState);
console.log("status",xmlhttp.status);*/
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
// 接受服务器端的数据
// xml,返回XML数据格式
// responseText 获得字符串形式的响应数据。
// responseXML 获得 XML 形式的响应数据。
var dataXML = xmlhttp.responseXML;
console.log(dataXML);
/*-------------处理数据怎么处理--------------*/
// 获取XML文档里面name标签的内容
var name = dataXML.getElementsByTagName("name")[0].innerHTML;
console.log(name);
h1.innerText = name;
// 替换城市内容
var citys = dataXML.getElementsByTagName("city");
document.querySelector("ul").innerHTML ="";
for(var i=0;i<citys.length;i++){
var li = document.createElement("li");
li.innerText = citys[i].innerHTML;
document.querySelector("ul").appendChild(li);
}
}
}
</script>
</html>
xml：
<?xml version="1.0" encoding="UTF-8"?>
<province>
<name>广东省</name>
<citys>
<city>广州</city>
<city>深圳</city>
<city>东莞</city>
<city>惠州</city>
<city>湛江</city>
<city>佛山</city>
</citys>
</province>
效果：
AJAX获取txt文件数据：
html:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
<label>
姓名：<span>XXX</span>
</label>
<label>
年龄：<span>XXX</span>
</label>
<button>获取数据</button>
</body>
<scripttype="text/javascript">
var btn = document.querySelector("button");
var span = document.querySelectorAll("span");
var xmlhttp ;
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
btn.onclick =function(){
// 使用open(data)设置请求参数
// open(method,url,bol);
xmlhttp.open("GET","get.txt",true);
// 使用send发送请求
xmlhttp.send();
}
xmlhttp.onreadystatechange =function(){
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
// 获取字符串
var data = xmlhttp.responseText;
// 把字符串转换成json格式object对象
var str1 = JSON.parse(data);
// console.log(str1);
// console.log(dataXML);
var name = str1.name;
var age = str1.age;
// console.log(name);
span[0].innerText = name;
span[1].innerText = age;
}
}
</script>
</html>
txt:
{"name":"小明","age":18}
效果：
AJAX获取PHP文件数据：
$_GET获取方式：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
<!-- <form action="" method=""> -->
<!-- <label> -->
姓名：<inputtype="text"name="user">
<!-- </label> -->
<!-- <label> -->
年龄：<inputtype="text"name="age">
<!-- </label> -->
<inputtype="button"value="输入">
<!-- </form> -->
<divstyle="border:1px solid red;padding:30px">
<h2>你的信息：</h2>
<p>XXX</p>
<p>XXX</p>
</div>
</body>
<scripttype="text/javascript">
var btn = document.querySelector("input[type=button]");
var input = document.querySelectorAll("input[type=text]");
var p = document.querySelectorAll("p");
var xmlhttp ;
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
btn.onclick =function(){
var value1 = input[0].value;
var value2 = input[1].value;
// 使用open(data)设置请求参数
// open(method,url,bol);
// get获取类型：获取字符在url后面加上"xxx.php?name" +value1+ "&age=" +value2
xmlhttp.open("GET","5-ajax-get-php.php?name="+value1+"&age="+value2,true);
// 使用send发送请求
xmlhttp.send();
}
// 接收服务器响应的数据
xmlhttp.onreadystatechange =function(){
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
var data = xmlhttp.responseText;// 获取的是字符串
console.log(data);
var str = JSON.parse(data);
p[0].innerText = str.name;
p[1].innerText = str.age;
}
}
</script>
</html>
PHP：
<?php
// 接受前端数据
$name = $_GET['name'];
$age = $_GET['age'];
/*
-------------------连接数据库，sql语句，执行----------------------
*/
// 可以用echo输出
echo '{"name":"姓名:'.$name.'","age":"年龄:'.$age.'"}';
// 需要特别注意单引号套双引号在套单引号，.$name.和.$age.用单引号套，因为PHP用点（.）连接字符；
/*'{"name":"姓名:' .$name. '","age":"年龄:' .$age. '"}'*/
?>
效果：
AJAX获取PHP文件数据：
$_POST获取方式：
跟$GET获取方式基本一致
只是post需要设置编码格式：
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
是
用s
end发送请求：
xmlhttp.send("name=" +value1+ "&age=" +value2);
HTML:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
<!-- <form action="" method=""> -->
<!-- <label> -->
姓名：<inputtype="text"name="user">
<!-- </label> -->
<!-- <label> -->
年龄：<inputtype="text"name="age">
<!-- </label> -->
<inputtype="button"value="输入">
<!-- </form> -->
<divstyle="border:10px solid red;padding:30px">
<h2>你的信息：</h2>
<p>XXX</p>
<p>XXX</p>
</div>
</body>
<scripttype="text/javascript">
var btn = document.querySelector("input[type=button]");
var input = document.querySelectorAll("input[type=text]");
var p = document.querySelectorAll("p");
var xmlhttp ;
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
btn.onclick =function(){
var value1 = input[0].value;
var value2 = input[1].value;
// 使用open(data)设置请求参数
// open(method,url,bol);
xmlhttp.open("POST","6-ajax-get-php.php",true);
// 设置编码格式
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 使用send发送请求
xmlhttp.send("name="+value1+"&age="+value2);
}
xmlhttp.onreadystatechange =function(){
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
var data = xmlhttp.responseText;
console.log(data);
var str = JSON.parse(data);
p[0].innerText = str.name;
p[1].innerText = str.age;
}
}
</script>
</html>
PHP：
<?php
// 接受前端数据
$name = $_POST['name'];
$age = $_POST['age'];
/*
-----连接数据库，sql语句，执行-----
*/
// 可以用echo输出
echo '{"name":"姓名:'.$name.'","age":"年龄:'.$age.'"}';
/*'{"name":"姓名:' .$name. '","age":"年龄:' .$age. '"}'*/
?>
效果：
