目录
1.JSON的简介
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言
JSON 易于理解。
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。 文本可以被任何编程语言读取及作为数据格式传递。
2.使用自定义对象封装数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//姓名：张三 年龄：23 性别：男 吃饭 睡觉的功能
// class Student
//ES5 没有类 这个概念，有对象的概念 ES6 有类的概念了
//通过构造函数，来创建对象 然后封装数据
//我们把它当成构造函数来用
function Student(name,age,sex){
//给对象的属性设置值，this,代表我new的那个对象
this.name=name;
this.age=age;
this.sex=sex;
//提供功能
this.eat=function(){
alert("吃饭");
}
this.sleep=function(){
alert("睡觉")
}
}
var student=new Student("张三",23,"男");
var name=student.name;
var age=student.age;
var sex=student.sex;
alert(name);
alert(age);
alert(sex);
student.eat();
student.sleep();
//创建第二个对象
var student2=new Student("李四",24,"女");
//使用 Object来封装数据
var obj=new Object();
obj.name="王五";
obj.age=23;
obj.show=function(){
alert("呵呵");
}
</script>
</head>
<body>
</body>
</html>
3.JSON对象封装数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//JSON：
/*
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
*/
//姓名：张三 年龄：23 性别：男 吃饭 睡觉的功能
//定义JSON对象：格式 {"键":值,"键":值}
//键是字符串类型，只是任意类型
var student = {
"name": "张三",
"age": 23,
"sex": "男",
"eat": function() {
alert("吃饭")
},
"sleep": function() {
alert("睡觉")
}
}
//通过键找值
var name = student.name;
var age = student.age;
alert(name);
alert(age);
student.eat();
student.sleep();
//键找值，还有一种写法
var value = student['sex'];
alert(value);
//删除键值
delete student.name;
delete student.age;
delete student.sleep;
//写法2
delete student["newObj"];
console.log(student);
//增加属性
student.color = "白色";
//修改属性
student.color = "黑色";
//也可以如下修改属性的值
student['color']="红色";
console.log(student);
</script>
</head>
<body>
</body>
</html>
4.JSON的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var person={
"name":"老王",
"age":23,
"car":{
"carName":"宝马",
"carPrice":200000
},
"children":["老大","老二","老三"],
"falg":false
}
//获取车的名字
var carName=person.car.carName;
alert(carName);
var value=person.children[2];
alert(value);
</script>
</head>
<body>
</body>
</html>
5.解析JSON
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var jsonData = {
"data": {
"yesterday": {
"date": "13日星期四",
"high": "高温 7℃",
"fx": "东北风",
"low": "低温 -3℃",
"fl": "<![CDATA[2级]]>",
"type": "阴"
},
"city": "西安",
"forecast": [{
"date": "14日星期五",
"high": "高温 7℃",
"fengli": "<![CDATA[1级]]>",
"low": "低温 -1℃",
"fengxiang": "西风",
"type": "晴"
},
{
"date": "15日星期六",
"high": "高温 10℃",
"fengli": "<![CDATA[1级]]>",
"low": "低温 0℃",
"fengxiang": "西南风",
"type": "阴"
},
{
"date": "16日星期天",
"high": "高温 8℃",
"fengli": "<![CDATA[1级]]>",
"low": "低温 -1℃",
"fengxiang": "东北风",
"type": "多云"
},
{
"date": "17日星期一",
"high": "高温 11℃",
"fengli": "<![CDATA[2级]]>",
"low": "低温 0℃",
"fengxiang": "东北风",
"type": "霾"
},
{
"date": "18日星期二",
"high": "高温 12℃",
"fengli": "<![CDATA[1级]]>",
"low": "低温 1℃",
"fengxiang": "东北风",
"type": "霾"
}
],
"ganmao": "感冒多发期，适当减少外出频率，适量补充水分，适当增减衣物。",
"wendu": "0"
},
"status": 1000,
"desc": "OK"
}
var value=jsonData.data.forecast[0].date;
alert(value);
</script>
</head>
<body>
</body>
</html>
6.JSON数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//数组元素是JSON对象
var jsonArr = [{
"name": "张三",
"age": 23,
"sex": "男"
},
{
"name": "李四",
"age": 24,
"sex": "男"
},
{
"name": "王五",
"age": 25,
"sex": "男"
}
]
var name = jsonArr[2].name;
alert(name);
</script>
</head>
<body>
</body>
</html>
7.JSON对象的遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var person={
"name": "张三",
"age": 23,
"sex": "男"
}
//json对象的遍历 for in
for(key in person){
var value=person[key];
alert(key+"="+value);
}
//for in 可以遍历普通的数组
var arr=[10,20,30,40,50,60];
for(index in arr){
var ele=arr[index];
alert(ele);
}
</script>
</head>
<body>
</body>
</html>
8.JSON对象和JSON字符串的互转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//JSON对象 他是JS的对象
var jsonObj = {
"name": "张三",
"age": 23,
"sex": "男"
};
var name=jsonObj.name;
//JSON字符串,符合json格式的字符串
var jsonStr = '{"name": "张三","age": 23,"sex": "男"}';
//var name=jsonStr.name //错误的
//其他语言 例如Java 语言，他只能把JSON对象 当成字符串来看待，只是个字符串的格式符合JSON格式
//前台和后台进行数据传输，采用JSON格式，只是后台返回给前台的数据以JSON字符串返回的。
//前台，可以把JSON字符串转换成JSON对象，把数据解析出来
var jsonStrData='{"data":{"yesterday":{"date":"13日星期四","high":"高温 7℃","fx":"东北风","low":"低温 -3℃","fl":"<![CDATA[2级]]>","type":"阴"},"city":"西安","forecast":[{"date":"14日星期五","high":"高温 7℃","fengli":"<![CDATA[1级]]>","low":"低温 -1℃","fengxiang":"西风","type":"晴"},{"date":"15日星期六","high":"高温 10℃","fengli":"<![CDATA[1级]]>","low":"低温 0℃","fengxiang":"西南风","type":"阴"},{"date":"16日星期天","high":"高温 8℃","fengli":"<![CDATA[1级]]>","low":"低温 -1℃","fengxiang":"东北风","type":"多云"},{"date":"17日星期一","high":"高温 11℃","fengli":"<![CDATA[2级]]>","low":"低温 0℃","fengxiang":"东北风","type":"霾"},{"date":"18日星期二","high":"高温 12℃","fengli":"<![CDATA[1级]]>","low":"低温 1℃","fengxiang":"东北风","type":"霾"}],"ganmao":"感冒多发期，适当减少外出频率，适量补充水分，适当增减衣物。","wendu":"0"},"status":1000,"desc":"OK"}';
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//JSON对象 他是JS的对象
var jsonObj = {
"name": "张三",
"age": 23,
"sex": "男"
};
var name = jsonObj.name;
//JSON对象转换成JSON字符串
var str = JSON.stringify(jsonObj); //'{"name": "张三","age": 23,"sex": "男"}';
console.log(str)
//JSON字符串,符合json格式的字符串
//JSON格式的字符串，注意：键使用双引号引起来，要用紧凑格式，不能美化，都在一行上。
var jsonStr = '{"name": "张三","age": 23,"sex": "男"}';
//JSON字符串，转换成JSON对象
var obj = JSON.parse(jsonStr);
alert(obj.name);
var jsonStrData =
'{"data":{"yesterday":{"date":"13日星期四","high":"高温 7℃","fx":"东北风","low":"低温 -3℃","fl":"<![CDATA[2级]]>","type":"阴"},"city":"西安","forecast":[{"date":"14日星期五","high":"高温 7℃","fengli":"<![CDATA[1级]]>","low":"低温 -1℃","fengxiang":"西风","type":"晴"},{"date":"15日星期六","high":"高温 10℃","fengli":"<![CDATA[1级]]>","low":"低温 0℃","fengxiang":"西南风","type":"阴"},{"date":"16日星期天","high":"高温 8℃","fengli":"<![CDATA[1级]]>","low":"低温 -1℃","fengxiang":"东北风","type":"多云"},{"date":"17日星期一","high":"高温 11℃","fengli":"<![CDATA[2级]]>","low":"低温 0℃","fengxiang":"东北风","type":"霾"},{"date":"18日星期二","high":"高温 12℃","fengli":"<![CDATA[1级]]>","low":"低温 1℃","fengxiang":"东北风","type":"霾"}],"ganmao":"感冒多发期，适当减少外出频率，适量补充水分，适当增减衣物。","wendu":"0"},"status":1000,"desc":"OK"}';
var myObj=JSON.parse(jsonStrData);
var num=myObj.status;
alert(num);
</script>
</head>
<body>
</body>
</html>
9.遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//数组元素是JSON对象
var jsonArr = [{
"name": "张三",
"age": 23,
"sex": "男"
},
{
"name": "李四",
"age": 24,
"sex": "男"
},
{
"name": "王五",
"age": 25,
"sex": "男"
}
]
for (index in jsonArr) {
var jsonObj = jsonArr[index];
for (key in jsonObj) {
var value = jsonObj[key];
alert(key + "=" + value);
}
}
</script>
</head>
<body>
</body>
</html>
10.JSON的介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//JSON：封装数据的一种格式，这种格式现在被用作网络传输的首选格式
//JSON对象和JSON字符串的互转
//JSON对象 他是JS的对象
var jsonObj = {
"name": "张三",
"age": 23,
"sex": "男"
};
//把json对象转换成JSON字符串
var jsonStr = JSON.stringify(jsonObj);
//注意JSON字符串的格式：键要用双引号引起来，不要美化，全部在一行的紧凑格式
var jsonStr = '{"name": "张三","age": 23,"sex": "男"}';
var obj=JSON.parse(jsonStr);
var v=obj.age;
alert(v);
</script>
</head>
<body>
</body>
</html>
11.Ajax的简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="cityName"></h1>
<script type="text/javascript">
//AJAX
/* AJAX = Asynchronous JavaScript and XML（ 异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言， 而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术， 在不重新加载整个页面的情况下。
*/
/*
什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
*/
//使用步骤1. 创建异步请求对象
// 创建 XMLHttpRequest 对象
// 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
var xmlhttp;
xmlhttp = new XMLHttpRequest();
//2.向服务器发送请求如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
// method：请求的类型；GET 或 POST
// url：文件在服务器上的位置
// async：true（异步）或 false（同步）
var url = 'http://wthrcdn.etouch.cn/weather_mini?city=商洛';
xmlhttp.open("GET", url, true);
xmlhttp.send();
//服务器响应如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText属性。
/* onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。 */
//当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取后台响应的JSON字符串
var jsonStr=xmlhttp.responseText;
console.log(jsonStr);
var jsonObj=JSON.parse(jsonStr);
var cityName=jsonObj.data.city;
document.getElementById("cityName").innerText=cityName;
}
}
</script>
</body>
</html>