![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
这一节课主要讲的是json和ajax的知识，主要内容是json的简介和实例，ajax的简介和实战
Ajax的工作原理分析
HTTP请求对应一个页面时，ajax代 理当前页面的请求，使得当前页面不跳转，等js收到服务器端响应的数据后,再由js来刷新页面更新数据
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</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>
var btn = document.getElementsByTagName('button')[0];
btn.onclick=function () {
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () {
if (xhr.readyState ===4){
if (xhr.status===200){
var p=document.createElement('p');
p.style.color='red';
var 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.dis=false;
if(json.status==1){
location.href='admin.php';
}
},2000);
}else{
alert('响应失败'+xhr.status);
}
}else{
}
}
xhr.open('post','check.php',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var data={
email:document.getElementsByName('email')[0].value,
password:document.getElementsByName('password')[0].value
};
var data_json=JSON.stringify(data);
xhr.send('data='+data_json);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图
手写
![DR(A]NLEZA@{@GRDLO3EQ5P.png](https://img.php.cn//upload/image/841/237/128/1536977424305893.png "1536977424305893.png")
手写对于Ajax的完整运行流程记得更加清晰
总结
1、Ajax 中常用的属性和方法：对象: XMLHttpRequest() 简称 xhr对象; 事件: onreadystatechange() 监听就绪状态属性的变化; 属性: readyState 请求状态值,有四个值,我们只对数据就绪状态的值:4感兴趣;属性: status 请求状态码, 返回 200 时,表示已从服务器上成功的获取到了返回的文本; 属性: responseText, 从服务器端返回的文本内容; 方法: open('请求类型','请求的url',请求方式,默认为true异步):设置请求参数方法: send(): 发送请求,GET请求请填上参数null; 方法: 如果是post请求,需要设置一下请求头信息,请文档类型重置:setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
2、JSON 是独立于编程语言的,通用的,轻量级的文本存储与交换的数据格式