ajax
前端发请求 ==》 打电话
1、拨号 号码：
url 请求地址
2、请求方式 get / post
安全性： get没有 post安全
数据量： get只能发送 普通的 key=value 拼接在请求的 url后面
post可以发送文件
3、携带的参数（非必要） （文件参数， 键值对参数）
4、设置请求头（告知后端 数据格式，额外信息）
5、接收后端响应代码(响应数据的格式，类型)
把一条请求称为 一个 接口（url,method,data,header, respone）
接口文档： 后端生成
ajax
1、创建xmlHttpRequest对象 xhr
2、xhr注册readystatechange 事件处理函数
3、请求配置 xhr.open(mothed, url, true);
4、设置请求头 xhr.setRequestHeader('Content-Type','')
5、发送网络请求 xhr.send()
请求参数：
get请求， 请求的键值对参数，拼接在 请求url后面
post请求，单纯键值对参数， xhr.send("拼接字符串")
文件+键值对
var formData = new FormData()
formData.append('file', file.files[0])
xhr.send(formData);
响应
if(xhr.readyState == 4 ){
if(xhr.status ==> 200-300 || 304){
xhr.responseText
}
}
xmlHttpRequest
//1、创建xml对象
var xhr = new XMLHttpRequest();
//2、开启事件监听后端收到数据，并返回响应
xhr.addEventListener('readystatechange', function () {
/*
xhr.readyState ：表示当前请求的发送阶段
默认：0 ==》 xhr.open() 未调用
1 ==> xhr.send() 还没有被调用
2 ==> 服务器尚未接通
3 ==> 服务器接通，正在接收服务器响应中
4 ==> 响应接收完毕 要接收的服务器数据，在第四个状态中
*/
if(xhr.readyState == 4){
//网络请求状态码 2xx 4xx 5xx
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ){
//获取后端回发的数据 xhr.responseText
var data = JSON.parse(xhr.responseText);
alert("网络请求结束")
console.log(data);
}
}
})
//3、配置请求参数 xhr.open(请求方式,url,true) bool值用来控制网络请求代码的执行顺序
// true的 异步。 请求成功后回调。 如果写成false，。网络请求之后所有的代码，都要等待
// 网络请求结束后，才能执行。 影响效率
xhr.open('post', 'http://www.balooalex.com/qqApi/search.php', true);
//4、配置请求头
xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
xhr.setRequestHeader("Accept" , "text/html/json")
//5、发送请求
xhr.send("content=大风吹&page=1"); //只发送 post的键值对数据
// get请求 如果要携带参数，需要在 将参数以键值对的形式拼接在 请求的url后面
// xhr.open('get', 'http://www.balooalex.com/qqApi/search.php?content=大风吹&page=1', true);
// post请求，如果只携带 键值对参数。需要将参数，以键值对的形式拼接成字符串。放在 xhr.send(中)
// xhr.send("content=大风吹&page=1"); //只发送 post的键值对数据
// post 键值对 ，文件
