Web基础——JSON的使用和Ajax的介绍

目录

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>
上一篇:Ajax-XMLHttpRequest


下一篇:三吴风景,姑苏台榭,牢落暮霭初收--权限管理-用户组管理