ajax的基础知识
- 创建ajax实例的步骤
// 1、创建AJAX实例
let xhr = new XMLHttpRequest();
// 2、打开URL(发送请求前的一些处理)
xhr.open('get', 'http://www.baidu.com', true);
// 3、箭筒AJAX状态信息
xhr.onreadystatechange = function(){
// xhr.readyState AJAX的状态 0~4
// xhr.status xhr.statusText 服务器返回的网络状态码 2/3/4/5
if(xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.response);
}
}
// 4、发送请求(请求主体的信息会基于send的时候发送给服务器)
xhr.send(null);
- ajax的请求方式
/*
* 客户端向服务器发送网络请求的方式
GET:get/delete/head/options
POST:post/put
GET系列的特点:一般认为是从服务器获取信息(当然也可以把客户端的信息传递给服务器),比重是 给得多,拿得少
get:从服务器获取信息
delete:一般应用于想删除服务器上的一些文件或者一些大量的信息
head:只需要获取响应头的信息即可,响应主体信息不接受(服务器也不需要返回)
options:试探性请求,常用于CORS跨域资源共享的时候,每一个正常的请求发送之前,默认会先发一个options请求,这个请求用来校验客户端和服务器端是否正常连接
POST系列的特点:一般认为是给服务器推送信息(当然服务器也可以给客户端返回信息),比重是 给得少,拿得多
post
put:和delete对应,一般用于给服务器传递文件或者大数据(例如文本编译器编辑的内容)
官方文档没有明确规定GET和POST的区别,但是程序员们默认按照一些的方式来传
GET传递信息给服务器的信息一般是基于“URL地址问号传参”实现
xhr.open('get','http://www.baidu.com?xx=xx&yy=yy')
POST传递给服务器的信息一般是基于“请求主体”实现
xhr.send('xx=xx&yy=xx')
客户端还可以基于设置情趣头把一些简要的信息传递给服务器(例如cookie,token等)
1、GET传递给服务器的信息要远远小于POST
原因:URL在不同浏览器中有长度的限制,IE:2KB(2*1024B),超出浏览器限制的部分内容会被浏览器自动裁剪掉;POSt理论上是没有长度限制的(请求主体没有设置过大小的限制),但是真实项目中为了保证数据传输的高效性,默认都会手动做限制;
2、安全问题:POST相对GET来说要安全一些
这样项目中涉及安全信息的传输都要用POST(例如:登录);
GET基于URL传输数据很容易被URL劫持掉,这样不安全;POST相对安全,但是也不是绝对安全,所以对于重要信息的传输也需要进行加密处理(例如:md5加密)
3、缓存问题:浏览器在处理GET请求的时候,如果两次请求的地址和参数都是一样的,那么浏览器会设置数据缓存(这个缓存并不是我们想要的);想要不走浏览器的缓存,需要保证每次请求url都不完全一样(例如:在在参数后面多加一个时间戳或者随机数等)
chr.open('get', 'url?xx=xx&yy=yy&_='+Math.random())
*/
- ajax的状态码和网络状态码
/*
* AJAX的状态 xhr.readyState
UNSENT:0 未发送 开始创建xhr默认状态就是0
OPEND:1 已打开 执行了open
HEADERS_RECEVED:2 服务器已经返回了响应头的信息
LOADIND:3 响应主体正在加载返回中
DONE:4 响应主体信息也返回了
* HTTP网络状态码
以2开头的 200 服务器正常返回数据(客户端想服务器端发送请求,服务器正常把数据返回给客户端,但是数据是否正确不一定)
以3开头的 304 读取的是协商缓存的数据
301 永久重定向(一般用于域名的转移)
302/307 临时转移或者临时重定向(一般用于服务器的负载均衡)
以4开头的(一般是客户端的错)
400 参数错误
401 无权限访问
403 服务器拒绝执行
404 地址错误
以5开头的(一般是服务器端的错误)
500 服务器发生未知错误
503 超负荷
项目中所谓的请求成功和失败时分为两种的:
网络层面:服务器没有返回任何的信息(或者和服务器都没有连接上)这肯定是失败的【根据不同的状态码就可以分辨出原因】
业务层面:已经从服务器获取数据,只不过获取的数据是不符合业务逻辑需要的,也可以定位为失败。一般服务器返回的数据中都包含code表示,代表的是业务逻辑上的成功还是失败【需要前后端协商好数据的判断标识】
*/