ajax及http基础知识
文章目录
-
- ajax操作
- Http请求方式的区别
- get和post区别
- ajax状态
- http网络状态码status
- ajax方法和属性
-
- 属性
- 方法
ajax操作
AJAX 这个词是 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信
具体定义见ajax，局部刷新与全局刷新
a.【创建ajax实例】，XMLHttpRequest对象
let xhr = new XMLHttpRequest();
b. 【打开请求】：发送请求之前的配置项目
- HTTP METHOD 请求方式
GET/DELETE/HEAD/OPTIONS/TRANCE/CONNECT
POST/PUT - URL 向服务端发送的api接口地址
- ASYNC 设置ajax请求的同步异步，默认是异步，false是同步
- USER-NAME/USER-PASS 用户名密码，一般不用
- 一共有五个但写的时候一般写两个 method和url
xhr.open([HTTP METHOD], [URL], [ASYNC], [USER-NAME], [USER-PASS]);
c.【事件监听】：一般的监听都是READY_STATE_CHANGE事件（AJAX状态改变事件），基于这个事件可以获取服务器返回的响应主题内容
xhr.onreadystatechange = () => {
//指定回调函数
if (xhr.readyState === 4 && xhr.status === 200) {
xhr.responseText;
}
};
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
d. 【发送ajax请求】，从这步开始，当前ajax任务开始，如果ajax是同步的，后续代码不会执行，要等到ajax状态成功后再执行，反之异步不会
xhr.send([请求主体内容])//string：仅用于 POST 请求,请求参数，get时候（）为空
完整实例：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
// 通信成功时，状态值为4
if (xhr.readyState === 4){
if (xhr.status === 200){
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.open('GET', 'http://localhost:3000', true);//这里我用express自己搭了个server
xhr.send(null);
最好用webstorm运行，如果用vscode要自己配置webpack搭本地服务，webstorm自带本地服务
Http请求方式的区别
所有的请求都可以给服务端传递内容，也可以从客户端获取内容
- GET:从服务端获取数据（给得少拿得多）
- POST:向服务端传递数据（给得多拿得少）
- DELETE:删除服务端的某些内容（一般是一些文件）
- PUT:向服务器存放一些内容，一般是存放文件
- HEAD:只获取服务器返回的响应头信息，不要响应主体内容
- OPTIONS:一般使用它向服务器发送一个探测性请求，如果服务器返回信息了说明当前客户端和服务端建立了链接，我们可以继续执行其他请求。axios这个ajax类库再基于cross domain进行跨域请求的时候，就是先发送options进行探测性尝试，如果能联通服务器才会继续发送其他请求（非简单请求）
get和post区别
【传参方式不同】
get是基于url地址“问号传参”，post是基于“请求主体“把信息传递给服务器”
xhr.open('get','/temp/list?xxx=xxx&xxx=xxx')
xhr.send('xxx=xxx&xxx=xxx')
post给得多，浏览器对url长度有最大限制，超过部分浏览器截掉，post是基于主体的，理论上主体没有限制，但项目中会自己做大小限制，防止传递信息过大导致请求迟迟不完成
这是约定俗成的规范不是官方说法，多年形成的开发规范。
【get不安全，post相对安全】
因为get是基于问号传参把信息传递给服务器，容易被url劫持，post基于请求主体传递，相对来说不好被劫持；所以登录注册等涉及安全性的交互操作，我们都应该用post请求
【get会产生不可控制的缓存，post不会】
连续向相同地址（并且传递的参数信息也是相同的）发送请求，浏览器会把之前获取的数据从缓存中拿到返回，导致无法获取服务器最新的数据（post不会）
解决办法：
xhr.open('get', `/temp/list?lx=1000&{Math.random()}`);
保证每次请求的地址不完全一致，在每一次请求的末尾追加一个随机数即可。浏览器的缓存机制，不可控的缓存机制，可控的叫304
ajax状态
UNSENT: 0 刚开始创建xhr还没有发送
OPENED: 1 已经执行了open操作
HEADERS_RECEIVED: 2 已经发送ajax请求，响应头信息已经被客户端接收（响应头里包含了服务器时间，返回的http状态码）
LOADING: 3 响应主体正在返回
DONE: 4 响应主体已经完全被客户端接收
在控制台
xhr = new XMLHttpRequest
dir(xhr)
查看其原型里面有这四个状态
http网络状态码status
根据状态码可以清楚反应出当前交互的结果及原因
200 ok 成功
301 永久转移 =>
域名更改，访问原始域名重定向到新的域名
302 临时转移 =>
- 服务器负载均衡，一台服务器已经达到最大并发数的时，会把后续访问的用户临时转移到其他服务器机组上处理
- 偶尔项目中会把所有的图片放到单独的服务器上“图片服务器”，这样减少主服务器的压力，当用户向主服务器访问图片时，主服务器都把它转移到图片服务器上处理
307 临时重定向 =>
网站现在是基于https做的，如果访问的是http会基于307重定向到https协议上
304 设置缓存 =>
对于不经常更新的资源文件，例如js/css/html/img等，服务器会结合客户端设置304缓存。第一次加载过这些资源就缓存到客户端，下次再获取的时候，是从缓存中获取，如果资源更新了，服务器会通过最后修改时间来强制让客户端从服务器重新拉取。这是服务器来做的。基于ctrl+f5强制刷新页面，304做的缓存就没有用了
400 请求参数错误
401 无权限访问
404 找不到资源/地址不存在
413 给服务器交互的内容资源超过服务器的最大限制，服务器不愿处理
500 未知的服务器的错误
503 服务器超负荷，排不到了
2成功 3成功但蹊跷 4一般都是客户端问题 5服务端问题
ajax方法和属性
属性
xhr.response 响应主体内容
xhr.responseText 响应主体的内容是字符串（json或xml格式字符串都可以）
xhr.responseXML 响应主体内容是xml文档
xhr.status 返回http状态码
xhr.statusText 状态码描述
xhr.timeout = 1000 设置请求超时
xhr.onTimeout = () => {
} 请求超时怎么处理
xhr.withCredentials 是否允许跨域带cookie（false不允许）
xhr.onabort = () => {
} 中断时的处理
方法
xhr.abort() 强制中断请求
xhr.getAllResponseHeaders() 获取所有响应头信息
xhr.getResponseHeader([key]) 获取key对应的响应头信息，例如xhr.getResponseHeader(date)
xhr.open() 打开url
xhr.send() 发送请求
xhr.setRequestHeader() 设置请求头
xhr.overrideMimeType() 重写mime类型（用得少）