一.json基础知识点
1.什么是 JSON ？
(1).JSON 是英文(JavaScript Object Notation)即,JS对象表示法;
(2).JSON 是独立于编程语言的,通用的,轻量级的文本存储与交换的数据格式;
(3).JSON 使用JavaScript中的对象语法编写,可与js相互转换;
(4).JSON 本质上仍是字符串,仅仅是内部的书写格式受到js对象语法的限制;
----------------------------------------------------------------
2. JSON的二种数据结构:
(1). 对象(Object): 键值对集合,类似关联数组,参考了js对象语法,但做了一些规范;
(2). 数组(Array): 与js完全一致,是键值的有序的;
----------------------------------------------------------------
3. json 中支持的数据类型:
(1). 对象: 字面量表示 {...};
(2). 数组: 字面量表示 [...];
(3). 字符中: 双引号表示,支持转义 "name";
(4). 数值: 仅允许十进制 123;
(5). 布尔: true / false;
(6). null: 表示空/无.
----------------------------------------------------------------
4. json 字符串的校验: 在线工具: json.cn
5. 解析:
1. 解析分为二种情况:
(1)将json格式的字符串,解析为js对象: 适合于从服务器端接收数据
(2)将js对象解析来json格式的字符串: 适用于将向服务器端发送数据
第一情况: json字符串 To js对象: eval() 和 JSON.parse()
(1). eval()解析: 加上圆括号,将json字符串转为表达式 //这种方法不推荐
let json = '{"name":"朱老师","age":30,"course":["js","php","java"],"isMarried":true,"rich":null}';
let obj = eval('('+json+')');
typeof obj; // "object"
obj.name; // "朱老师"
obj.course[1]; // "php"
obj["age"]; // 可以用方括号访问: 30
eval()函数调用的是js的编译器,有一个问题,如果字符串有代码,会被执行,有可能会带来安全问题,所以js定义一些全局方法来专门处理json字符串
let str = "alert('我是一段恶意跳转代码');location.href='http://baidu.com'";
eval(str);
(2). JSON.parse(json): 只会识别json内容,非json内容不解析,比eval()函数更加安全
// 该方法非常适合于服务器端进行交互,因为从服务器接收的通常都是"字符串"
let json1 = '{"name":"朱老师","age":30,"course":["js","php","java"],"isMarried":true,"rich":null}';
let obj1 = JSON.parse(json1);
typeof obj1;
obj1.isMarried; // true
// 可以用 for in 遍历 json 中的内容
for (key in json1) {console.log(json1[key])} // 必须使用[]来访问属性名
// 可以更新
obj1.age = 50;
obj1.age; // 50
// 可以删除
delete obj1.age;
obj1.age; // undefined
(3). PHP中使用json_decode()进行转换, 一会我们会用ajax进行演示
<?php
$json_str='{"id":1,"name":"peter","hobby":["reading","cooking"]} ';
$obj=json_decode($json_str);
echo $obj->name; // "peter"
echo $obj->hobby[1]; // "cooking"
第二种情况: js对象 To json字符串:JSON.stringify()
let obj = {name:'peter',age:40,isMarried:true, salary:undefined};
let json = JSON.stringify(obj);
转换结果: "{"name":"peter","age":40,"isMarried":true}",值为undefined的数据不会出现在结果中
服务器端拿到这个json格式的字符串之后,例如php,会调用json_decode()将其解析来php对象进行访问
如果是数组格式的json字符串:
let json_arr = [10,20,30];
let str_arr = JSON.stringify(json_arr); // "[10,20,30]"
//服务器端,例如php,会直接解析来php数组类型来访问:
<?php
$str = "[10,20,30]";
$arr = json_decode($str);
print_r($arr);
二.ajax相关知识点
1. 传统的HTTP请求是什么样子的?
(1). 一次HTTP请求对应一个页面;
(2). 如果想在当前页面中发现请的http请求,页不跳转当前页面,就必须需要一个请求代 理;
(3). 这个请求代 理,代 理了用户的请求,向服务器发出新的http请求;
(4). 而这个代 理,我们可以用一段 javascript代码来完成,由js来发出http请求;
(5). 等js收到服务器端响应的数据后,再由js来刷新页面更新数据;
(6). 这时,给用户的感觉就是我仍停留在当前页面,而页面上的数据却在不停的更新中,用户体验超级棒;
(7). 这个代 理用户发出http请求的js代码,宏观上也可以叫作客 户端,因为任何能发起请求的实体都可以视为客 户端;
-----------------------------------------------------------------------------------------
2. Ajax 的工作原理
(1). Ajax 就是刚才我们所说的那个代 理用户发起http访问请求的js代码;
(2). Ajax 的全称是: Asynchronous JavaScript and XML[异步的 JavaScript 和 XML];
(3). 之前交互用xml格式比较多,现在json格式是主流,因为xml太臃肿了,我们就不再学习了;
(4). 同步与异步的区别:
[1].同步是指客 户端与服务器端处理的是同一个请求,服务器响应成功,客 户端也接收到返回的数据,这个请求才算完成;
[2].异步是指客 户端与服务器可以同时处理不同的请求,客 户端通过事件监听判断服务器端是否响应成功并返回数据;
(5). Ajax 是目前最主流的异步请求方式,得到了几乎所有的主流浏览器的支持,包括IE在内.
-----------------------------------------------------------------------------------------
3. Ajax 的主要应用场景?
(1). 表单验证;
(2). 数据实时更新,例如股票行情;
(3). 在线地图;
(4). 其它需要数据实时加载,无刷新的使用场景.
4. Ajax 中常用的属性和方法
(1). 对象: XMLHttpRequest() 简称 xhr对象;
(2). 事件: onreadystatechange() 监听就绪状态属性的变化;
(3). 属性: readyState 请求状态值,有四个值,我们只对数据就绪状态的值:4感兴趣;
(4). 属性: status 请求状态码, 返回 200 时,表示已从服务器上成功的获取到了返回的文本;
(5). 属性: responseText, 从服务器端返回的文本内容;
(5). 方法: open('请求类型','请求的url',请求方式,默认为true异步):设置请求参数
(6). 方法: send(): 发送请求,GET请求请填上参数null;
(7). 方法: 如果是post请求,需要设置一下请求头信息,请文档类型重置:
setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3.Ajax实战:获取html内容
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax实战:获取html内容</title>
</head>
<body>
<button>我最喜欢的电影</button>
<script>
let btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
//1.创建xhr对象
let xhr = new XMLHttpRequest();
//2.监听响应状态
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) { // 准备就绪
// 判断响应结果:
if (xhr.status === 200) {
// 响应成功,通过xhr对象的responseText属性可以获取响应的文本,此时是html文档内容
let div = document.createElement('div'); //创建新元素放返回的内容
div.style.width = '600px'; // 设置内容区的宽和高
div.style.height = '600px';
div.innerHTML = xhr.responseText; // 将响应文本添加到新元素上
document.body.appendChild(div); // 将新元素插入到当前页面中
} else {
// 响应失败,并根据响应码判断失败原因
alert('响应失败'+xhr.status);
}
} else {
// http请求仍在继续,这里可以显示一个一直转来转去的图片
}
}
//3.设置请求参数
xhr.open('get','inc/index.html',true);
//4.发送请求
xhr.send(null);
//将点击按钮禁用,防止重复点击
btn.disabled = true;
// btn.setAttribute('disabled',true); //等价语法
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.ajax案例实现登录检查
1.test.html 主页实现提交
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax实战:表单验证</title>
</head>
<body>
<h3>用户登录</h3>
<form>
<p>邮箱: <input type="email" name="email"></p>
<p>密码: <input type="password" name="password"></p>
<p><button type="button">提交</button></p>
</form>
<script>
let btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
//1.创建xhr对象
let xhr = new XMLHttpRequest();
//2.监听响应状态
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) { // 准备就绪
// 判断响应结果:
if (xhr.status === 200) {
// 响应成功,通过xhr对象的responseText属性可以获取响应的文本,此时是html文档内容
let p = document.createElement('p'); //创建新元素放返回的内容
p.style.color = 'red';
let json = JSON.parse(xhr.responseText);
if (json.status === 1) {
p.innerHTML = json.msg;
} else if (json.status == 0) {
p.innerHTML = json.msg;
}
// 将响应文本添加到新元素上
document.forms[0].appendChild(p); // 将新元素插入到当前页面中
btn.disabled = true;
setTimeout(function(){
document.forms[0].removeChild(p);
btn.disabled = false;
if (json.status == 1) {
location.href = 'admin.php';
}
},2000);
} else {
// 响应失败,并根据响应码判断失败原因
alert('响应失败'+xhr.status);
}
} else {
// http请求仍在继续,这里可以显示一个一直转来转去的图片
}
}
//3.设置请求参数
xhr.open('post','inc/check.php',true);
//4. 设置头信息,将内容类型设置为表单提交方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4.发送请求
let data = {
email: document.getElementsByName('email')[0].value,
password: document.getElementsByName('password')[0].value
};
// data = 'email='+data.email+'&password='+data.password;
let data_json=JSON.stringify(data);
xhr.send('data='+data_json);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.后台数据验证 test.php
实例
<?php
$user=json_decode($_POST['data']);
$email=$user->email;
$password=sha1($user->password);
$pdo=new PDO('mysql:host=localhost;dbname=phpcn','root','root');
$sql="select count(*) from `user` where `email`='{$email}' and `password`='{$password}'";
$stmt=$pdo->prepare($sql);
$stmt->execute();
if($stmt->fetchColumn(0)==1){
echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转']);
exit;
}else{
echo json_encode(['status'=>0,'msg'=>'登录失败,请重写登录']);
exit;
}
?>运行实例 »
点击 "运行实例" 按钮查看在线实例