JavaScript-03_javascript03-优快云博客

JSON(JavaScript Object Notation，JS 对象简谱) 起名不咋地，非常拗口，我们就记住它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）。

作用

JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

语法

JSON数据:

var a =' "firstName" : "John" '

JSON 对象:

var a = '{ "firstName":"John" , "lastName":"Doe" }'

JSON 数组:

var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';

转换工具

使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串和原生 JavaScript 对象互转.

给服务器发送数据: 将JS对象转成JSON字符串 	JSON.stringify(Js对象)
接受服务器的数据: JSON字符串转成JS对象		JSON.parse("json字符串")

测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>json</title>
		<script>
			//json用来在浏览器和服务器之间做数据传输,轻量级,格式简单明了.
			//JSON是js的内置对象,用来把json类型的字符串和js对象互转
			//json类型的字符串---{ "k1":"v1", "k2":"v2", "k3":"v3" }
			function jschuan(){
				var jsonchuan = '{ "k1":"v1", "k2":"v2", "k3":"v3" }';
				document.getElementById("h").innerHTML=jsonchuan;
			}
			function chuan2js(){
				var text='{ "k1":"v1", "k2":"v2", "k3":"v3" }';
				console.log(text);
		//从服务器收到的数据都是字符串,转成js对象,用js语法解析属性/方法
	var jsobj = JSON.parse(text);//串转js对象,就可以写js代码解析数据
				console.log(jsobj);
				document.getElementById("d").innerHTML=jsobj.k2;
			}
			function js2chuan(){
				var obj = {"k1":"v1", "k2":"v2", "k3":"v3"};
				console.log(obj);
				//把浏览器的数据发给服务器,服务器只要json串
				var text = JSON.stringify(obj);//js对象转成串
				document.getElementById("p1").innerHTML=text;
				console.log(text);
				console.log(text.length);
			}
		</script>
	</head>
	<body>
		<p id="p1" onclick="js2chuan();">我是p</p>
		<div id="d" onclick="chuan2js();">我是div</div>
		<h1 id="h" onclick="jschuan();">我是h1哦</h1>
	</body>
</html>

ajax

概述

AJAX = Asynchronous JavaScript And XML. AJAX 并非编程语言。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

原理

在这里插入图片描述

核心对象XMLHttpRequest

所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
在这里插入图片描述

测试

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax-js版</title>
		<script>
			function change(){
				// 1. 创建xhr对象,用于同幕后服务器交换数据
				var xhr = new XMLHttpRequest();
				// 2. 定义当 readyState 属性发生变化时被调用的函数
				xhr.onreadystatechange=function(){
					//3. status是200表示请求成功,readyState是4表示请求已完成且响应已就绪
					if(this.status==200 && this.readyState==4){
						// document.getElementById("d1").innerHTML="hi ajax";
						//5.以字符串返回响应数据,并展示
						document.getElementById("d1").innerHTML=this.responseText;
					}
				}
				//3.规定请求的类型(请求方式,文件位置,异步)
				xhr.open('get','1.json',true);
				//xhr.open('get','http://localhost:8080/car/get',true);
				//4.xhr将请求发送到服务器
				xhr.send();
			}
		</script>
	</head>
	<body>
		<!-- 点击时,使用ajax修改文字 -->
		<div id='d1' onclick="change()">你好</div>
	</body>
</html>