1. JSON
1. 概念：JavaScript Object Notation：JavaScript对象表示法
2. JSON的特点
（1）JSON是一种轻量级的数据交换格式
（2）JSON是一种独立的语言
（3）JSON易于理解
（4）同时也作为网络数据传输的首选格式。其他语言例如Java也是支持解析生成JSON格式的数据
3. JSON的语法
（1）基本规则
1. json数据是由键值对构成的
1. 键均为字符串类型，使用引号（单双都可以）引起来
2. 值可以是任意类型
1. 数字（整数或者浮点数）
2. 字符串（在双引号中）
3. boolean值
4. 数组（在方括号中）{"persons" : [{},{}]}
5. 对象 {"address" : {"province" : "陕西" , "city" : "西安"}}
6. 函数：{"eat" : function(){alert("吃饭")}}
2. 键值对之间使用冒号隔开
3. 数据由逗号分割：多个键值对使用逗号分割
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<script>
var lolData = {
"name": "卡牌大师",
"age": 23,
"phone": 123123123,
"R": function () {
alert("全图乱飞");
}
}
var name = lolData.name;
alert(name);
var age = lolData.age;
alert(age);
var phone = lolData.phone;
alert(phone);
lolData.R();
</script>
（2）JSON的嵌套（疯狂的 . 就完事了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<script>
var dsm = {
"name": "韩金龙",
"age": 33,
"sex": "man",
"car": {"carName": "BMW", "carPrice": 50, "carColor": ["white", "black", "red"]}
}
//我现在要取到 black 的值
var color = dsm.car.carColor[1];
alert(color);
</script>
（3）JSON数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
var lol1 = {
"name": "noc",
"age": 23,
"price": 4800
};
var lol2 = {
"name": "tf",
"age": 24,
"price": 4800
};
var lol3 = {
"name": "mf",
"age": 25,
"price": 3150
};
var lol4 = {
"name": "ez",
"age": 26,
"price": 6300
};
var loler1 = [lol1, lol2, lol3, lol4];
//json数组
var loler2 = [{
"name": "noc",
"age": 23,
"price": 4800
}, {
"name": "tf",
"age": 24,
"price": 4800
}, {
"name": "mf",
"age": 25,
"price": 3150
}, {
"name": "ez",
"age": 26,
"price": 6300
}];
//要取出ez的年龄
var age = loler2[3].age;
alert(age);
</script>
（4）JSON的遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//json的遍历 for - in
var lol1 = {
"name": "noc",
"age": 23,
"price": 4800
};
for(key in lol1){
var v = lol1[key];
alert(key + "--" + v);
}
//json数组的遍历
var loler = [{
"name": "noc",
"age": 23,
"price": 4800
}, {
"name": "tf",
"age": 24,
"price": 4800
}, {
"name": "mf",
"age": 25,
"price": 3150
}, {
"name": "ez",
"age": 26,
"price": 6300
}];
for(index in loler){
var lolObj = loler[index];
for(key in lolObj){
var value = lolObj[key];
alert(key + "--" + value);
}
}
</script>
（5）复杂的JSON（疯狂的 . 就完事了！）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//json这个格式是网络传输数据的首选格式
//请求一个后台，那么后台返回的数据就是json格式的
var json = {
"data": {
"yesterday": {
"date": "16日星期五",
"high": "高温 20℃",
"fx": "西南风",
"low": "低温 7℃",
"fl": "<![CDATA[2级]]>",
"type": "多云"
},
"city": "西安",
"forecast": [{
"date": "17日星期六",
"high": "高温 20℃",
"fengli": "<![CDATA[2级]]>",
"low": "低温 8℃",
"fengxiang": "东北风",
"type": "晴"
}, {
"date": "18日星期天",
"high": "高温 17℃",
"fengli": "<![CDATA[1级]]>",
"low": "低温 7℃",
"fengxiang": "西南风",
"type": "阴"
}, {
"date": "19日星期一",
"high": "高温 19℃",
"fengli": "<![CDATA[1级]]>",
"low": "低温 8℃",
"fengxiang": "东北风",
"type": "阴"
}, {
"date": "20日星期二",
"high": "高温 14℃",
"fengli": "<![CDATA[2级]]>",
"low": "低温 7℃",
"fengxiang": "西南风",
"type": "阴"
}, {
"date": "21日星期三",
"high": "高温 16℃",
"fengli": "<![CDATA[2级]]>",
"low": "低温 5℃",
"fengxiang": "东风",
"type": "晴"
}],
"ganmao": "感冒易发期，外出请适当调整衣物，注意补充水分。",
"wendu": "8"
},
"status": 1000,
"desc": "OK"
}
//我要取到20号的风向
var wind = json.data.forecast[3].fengxiang;
alert(wind);
</script>
4. JSON对象与JSON字符串的相互转换
（1）转换的原因：因为其他语言，只能把JSON当成字符串来看待，那他返回给前台，是一个JSON字符串，前台要解析JSON字符串中的数据，就必须先把JSON字符串转换成JSON对象
（2）相关方法
1. JSON.parse()：将一个json字符串解析成JavaScript对象
2. JSON.stringify()：将JavaScript对象转换成json字符串
【注意】
1. JSON字符串不要美化（所谓的美化，就带有换行空格）那么你JSON.parse(jsonStr);就转换不了
2. var jsonStr2="{'name':'李四','age':23}"; 这种格式的JSON字符串是不符合规范的，那么你JSON.parse(jsonStr2)转换不了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//json对象
var jsonObj = {
"name": "wzr",
"age": 23,
"sex": "man"
};
//json字符串
var jsonStr = '{"name":"wzr","age":23,"sex":"man"}';
//json字符串转化为json对象
var obj = JSON.parse(jsonStr);
alert(obj.name); //wzr
//json对象转化为json字符串
var str = JSON.stringify(jsonObj);
alert(str); //{"name":"wzr","age":23,"sex":"man"}
</script>
2. AJAX
1. 概念：ASynchronous JavaScript And XML：异步的JavaScript 和 XML
2. Ajax有关的内容
1. 同步和异步必须建立在客户端与服务端相互通信的基础上
1. 同步：客户端必须等待服务端的响应，在等待的期间客户端不能做其他的操作
2. 异步：客户端不需要等待服务端的响应，在服务器处理请求的过程中，客户端可以进行其他操作
2. Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。
3. 通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新，意味着可以再不用加载整个网页的情况下，对网页的某部分进行更新
3. 原生的Ajax实现方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="sendRequest()">点击发送</button>
</body>
</html>
<script type="text/javascript">
//1. 创建ajax对象
/*
XMLHttpRequest对象
1. 现代浏览器均支持XMLHttpRequest对象
2. XMLHttpRequest用于在后台与服务器交换数据
*/
var xmlhttp = new XMLHttpRequest();
function sendRequest(){
//2. 请求后台
/*
向服务器发送请求，使用XMLHttpRequest对象的open()和send()方法
*/
//open()：打开链接
/*
参数：
1. 请求方式：GET,POST
1. GET：请求参数在url后面拼接，send方法为空参
2. POST：请求参数在url后面定义
2. 请求的url
3. 同步或异步请求：true(异步)，false(同步)
*/
xmlhttp.open("GET","http://wthrcdn.etouch.cn/weather_mini?city=西安",true);
//send()：发送请求
xmlhttp.send();
//3. 接收后台返回的json数据
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange
xmlhttp.onreadystatechange = function(){
//当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
//xmlhttp.responseText：接收后台响应的json数据
var jsonStr = xmlhttp.responseText;
//document.write(jsonStr); 返回的是json字符串形式
var jsonObj = JSON.parse(jsonStr); //转换为json对象
alert(jsonObj.desc);
}
}
}
</script>
扫一扫
2287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
