一、概念
1.1 同步交互
用户向服务器端发起请求,直到服务器端进行响应的全过程,用户是不可以做其他事情的(等) 典型:表单提交、网址请求 - 都属于同步交互
1.2 异步交互
用户向服务器端发起请求,直到服务器端进行响应的全过程,用户是可以做其他事情的(不等) 典型:ajax请求
二、Ajax
Asynchronous JavaScript And XML
2.1 如何使用
- 创建ajax核心对象:
var xhr=new XMLHttpRequest();
- 建立和服务器端的连接
xhr.open("GET/POST","路由");
- 向服务器端发送请求消息
xhr.send();
- 如果你是GET请求:
//获取 - ajax一般都是使用get,去找服务器端那东西的
xhr.open("GET","路由?key=value&key=value&...");
xhr.send(null);
- 如果你是POST请求:
//post:发送 - 举例:跟安全性挂钩,登录、注册
xhr.open("POST","路由");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value&key=value&...");
- 绑定状态监听事件
xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
xhr.responseText - 服务器端相应的文本,ajax就难在你拿到东西了要干什么
}
}