AJAX简介
AJAX全称为Asynchronous JavaScript And XML,就是异步的JS和XML。可以通过AJAX在浏览器向服务器发送异步请求，最大的优势是可以实现无刷新获取数据，根据用户事件来更新部分页面内容。但同时也存在着跨域问题、没有浏览历史不能回退等缺点
HTTP
- HTTP请求交互过程 1、客户端从浏览器向服务器发送HTTP请求（请求报文）
2、服务器接收到请求后，调度服务器应用处理请求，向浏览器端返回HTTP响应（响应报文）
3、浏览器端接收到响应后，解析响应体，渲染返回的数据到页面
- 请求报文 1、请求行 ：method(请求方法) url（访问的url地址）
2、请求头：Host cookie Content-Type等等，以键值对的方式存在
3、空行
4、请求体 发起请求时，传入的参数，可以以对象方式存在 也可以使用&符号连接
- 响应报文
1、响应状态行 status（状态码） statusText（状态文字说明）
2、响应头 与请求头类似 如Content-Type、Content-Type等
3、空行
4、响应体 html文本、json文本、js、css等等都可能，视具体情况定
- 常见的响应状态码（一般小于300大于等于200的状态码都表示正常响应） 200 表示请求成功。一般用于GET 与POST 请求
201 表示已创建。成功请求并创建了新的资源
401 表示未授权/请求要求用户的身份认证
404 表示服务器无法根据客户端的请求找到资源
500 表示服务器内部错误，无法完成请求
原生AJAX的基本使用
1、创建XMLHttpRequest对象：const xhr = new XMLHttpRequest()
2、设置请求行信息：xhr.open('method'，'url')
3、发送请求：xhr.send()，当为post请求时，可以选择传入参数
4、接收响应
xhr.onreadystatechange = function(){
// readystate 是 xhr 对象中的属性，表示状态
// 0未初始化 1open()调用完毕 2send()调用完毕 3服务端返回部分结果 4服务端返回所有结果
// 判断 (服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500 2xx都表示成功
if(xhr.status >= 200 && xhr.status < 300){
// 响应
console.log(xhr.status); // 状态码
console.log(xhr.statusText); // 状态字符串
console.log(xhr.getAllResponseHeaders()); // 所有响应头
console.log(xhr.response); // 响应体
} else {
}
}
}
xhr.readyState用来查看请求文档的状态，下面是具体值对应状态、及描述表
Jquery中的AJAX
- get请求
$.get(url,{data},function(){},dataType)
1、url表示请求的URL地址
2、data表示请求的参数，以对象形式传入
3、匿名函数，这里是载入成功的回调函数，用于接收服务器响应内容
4、dataType用于指定返回内容的数据格式
$.get('http://127.0.0.1:8000/server', {
a: 100,
b: 200
}, function(data) {
// data就是返回的响应体
console.log(data);
}, 'json')
- post请求
$.post(url,data,function(){},dataType)
1、url表示请求的URL地址
2、data表示请求的参数，以对象形式传入
3、匿名函数，这里是载入成功的回调函数，用于接收服务器响应内容
4、dataType用于指定返回内容的数据格式
$.post('http://127.0.0.1:8000/server', {
a: 100,
b: 200
}, function(data) {
console.log(data);
},'json')
- 通用方法ajax()
$.ajax({
url:'',//url地址
data:{},//参数
type:'',//请求类型
dataType:'',//响应体类型
success:function(res){console.log(res);},//成功的回调函数
error:function(){console.log('出错了')}，//失败的回调函数
header:{//请求头信息设置
c:300,
d:400
}
})
axios中的ajax
axios是基于promise的网络请求库，可以用于浏览器和node.js，vue框架就是通过axios库进行ajax的操作
- get请求
axios.get(url,{config}).then(res=>{})``
axios.get('url', {
// url参数
params: {
id: 100,
vip: 7
},
// 请求头信息
headers: {
name: '',
age: 20
}
}
//回调函数
).then(value => {
console.log(data);
})
- post请求
axios.get(url,{data},{config}).then(res=>{})
axios.post('url', {
// 请求体
username: '',
password: ""
},
// 其他配置
{
params: {
},
header: {
}
//回调函数
}).then(value=>{
})
- 通用方法 通用方法与Jquery类似，都是按照报文顺序进行书写请求，简单明了
axios({
url:'',
// 请求方法
method:'get',
// 参数
params:{
},
// 头信息
header:{
},
// 请求实体参数
data:{
}
}).then(resonse=>{
// 处理结果
})
