AJAX

1.同步Synchronous

同步任务：在一个任务进行的过程中，不能开启其它任务
同步访问：浏览器在发送请求时，只能等待响应回来，不能做其它任何事
场景：浏览器地址栏输入url
a标签跳转
form表单提交请求

2.异步Asynchronous

异步任务：多个任务可以同时进行
异步访问：浏览器在发送请求的同时，能够做其它事情
场景：用户名重复的验证
股票软件
搜索联想

4.什么是ajax

Asynchronous Javascript And XML
异步的 js 和 xml（json）
本质，使用js提供的异步对象
通过这个异步对象，调用方法
创建请求，发送请求，接收响应
使用ajax的步骤
①创建异步对象
②创建请求
③发送请求
④接收响应

5.使用ajax的步骤

①创建异步对象
var xhr=new XMLHttpRequest();
②创建请求
xhr.open("请求方法","url",是否使用异步发送);
get/post/put/delete true异步/false同步
③发送请求
xhr.send();
当请求方法没有请求主体时，send()参数可以不写，或者写null
如果请求方法有请求主体，send()参数为请求主体
④接收响应，需要监听器
xhr.readyState 异步对象的状态码，有五个值
0.请求尚未初始化
1.打开连接，请求正在发送中
2.开始接收响应头信息
3.开始接收响应主体
4.响应主体接收完毕
xhr.status==200 响应状态码
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
//响应数据自动的保存在xhr.responseText中
var r=xhr.responseText;
}
}

6.ajax完成http的get方法传参

不报错，不显示怎么办
从业务逻辑的第一步开始查----打桩console.log()
1.方法是否被调用
2.按照代码执行顺序，一行一打桩
错误总结

图片5.png

跨域错误，使用访问服务器的方式，打开页面

图片6.png

XMLHttpRequset 拼错

图片7.png

左手错误，if中的条件缺少等号
404错误，对比前后台接口，同时确认服务器开启

图片8.png

图片9.png

数据库没开启

6.ajax完成http的get方法传参

后台
r.get("/url不写查询字符串",(req,res)=>{
var _uname=req.query.uname;
})
前台 xhr.open("get","/前缀/url?uname=拼接",true);

7.restful风格的get登录

get 查询模块
post 新增模块
put 修改模块
delete 删除模块
get 后台
r.get("/url/:uname&:upwd",(req,res)=>{
var _uname=req.params.uname;
var _upwd=req.params.upwd;
});
前台
xhr.open("get","/前缀/url/dingding&123456",true);

8.restful风格的delete

除了前后台要把get改成delete以外
其它操作与get一模一样

9.JSON

后台查询数据之后，得到的数组对象，为了传递到前台
自动的转换成string
前台得到的响应数据，就是string类型
问题，这个string保留了obj的格式
我们管这种保留了obj格式的string，称作js对象表示法----JSON
javascript object notation
我们想用循环操作对象，必须把json转换为obj
我们称之为json解析 var arr=JSON.parse(r);

10.restful的post和put请求

post和put的操作一模一样，只是写不同的方法名称
不能在地址栏传参，需要请求主体
post做登录

r.post("/url",(req,res)=>{
  var _uname=req.body.uname;
});
xhr.open("post","/ajax/post_login",true);

//3.1创建请求主体

var formdata=`uname=${_uname}&upwd=${_upwd}`;

//3.2设置请求头信息，中的content-type

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formdata);

注意，设置请求头信息，有位置要求
只能放在open和send之间
put请求，前后台把post改成put就行可以了