ajax发送请求

Posted 2021-05-18 码妈

同步和异步
同步Synchronous
在一个任务进行的过程中，不能开启其它的任务
同步访问：浏览器在向服务器发送请求的时候，浏览器不能做任何其它事情，只能等待响应
出现场合：
1.浏览器地址栏输入url是同步
2.a标签跳转页面
3.form表单发送请求

异步Asynchronous
在一个任务进行的过程中，可以执行其它任务
异步访问：浏览器在向服务器发送请求的时候，不用等待响应，同时可以操作页面
出现场合
1.用户名重复验证，异步
2.股票软件
3.百度搜索联想词条

什么是ajax
Asynchronous javascript and xml
异步的 js 和 xml json
本质：使用js提供的异步对象
异步的向服务器发送请求，并接收响应回来的数据

ajax发送请求

• 发送请求
• 接收响应

发送请求

①创建异步对象var xhr=new XMLHttpRequest();
②创建请求 xhr.open(“请求方法”,“url”,isAsyn);
isAsyn当前这个请求，是否用异步发送，true是，false否
xhr.open(“get”,“http://127.0.0.1:8080/ajax/test”,true);
③发送请求 xhr.send(formdata); 请求主体post/put有请求主体
get/delete没有请求主体，没有请求主体的时候参数可以不填/null
④接收响应
注意，浏览器地址栏只能验证get请求
http://127.0.0.1:8080/01_ajax.html

接收响应

创建监听xhr.onreadystatechange=function(){}
监听的是xhr.readyState属性，保存着当前请求的5个状态
取值 0：请求尚未初始化
1：已经打开服务器连接，请求正在发送
2：开始接收响应头信息
3：开始接收响应主体
4：接收响应完毕
我们接收响应需要第4遍，只接收正确的响应
响应状态码 200 xhr.status == 200
响应数据自动保存在xhr.responseText中，在正确的位置获取就可以了
xhr.onreadystatechange=function(){
//筛选出第4遍,响应状态是200
if(xhr.readyState == 4 && xhr.status == 200){
//响应自动保存在xhr.responseText中，在正确的位置取出
var r = xhr.responseText;
console.log( r );
}
}