AJAX基础知识

AJAX基础知识

1. 什么是AJAX？

AJAX（async javascript and xml）核心作用：

• 实现数据请求 + 客户端渲染 局部刷新
• AJAX解决了网页异步刷新的问题
• 什么是同步刷新
• 什么是异步刷新
• XML（可扩展标记语言） 和 JSON

AJAX核心【基于XMLHttpRequest创建HTTP请求】

let xhr = new XMLHttpRequest;
xhr.open('GET', './1.json');
// 设置请求头信息&超时时间&携带资源凭证 需要在open之后send之前
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// xhr.setRequestHeader('name', '珠峰'); 请求头信息中不允许出现中文
xhr.onreadystatechange = function () {
    if (xhr.status !== 200) return;
    if (xhr.readyState === 2) { console.log(xhr.getAllResponseHeaders());  }
    if (xhr.readyState === 4) {console.log(xhr.response);}
};
xhr.send(Qs.stringify({
    name: 'xxx',
    lx: 0
})); 

• 创建xhr实例：let xhr = new XMLHttpRequest;
• 打开一个URL地址「发送请求前的一些配置信息」xhr.open('GET', './1.json');
  • method 请求方式：GET(get/delete/head/options…) / POST(post/put/patch…)
  • url 请求的URL地址
  • async 是否采用异步 默认是TRUE
  • username 用户名
  • userpass 密码
• 监听请求的过程，在不同的阶段做不同的处理「包含获取服务器的响应信息」
  • ajax状态 xhr.readyState
  • HTTP状态码 xhr.status/xhr.statusText
  • 获取响应主体信息 xhr.response/ responseText/ responseXML…
  • 获取响应头信息 xhr.getResponseHeader/getAllResponseHeaders
• 发送请求「send中传递的信息，就是设置的请求主体信息」
  • xhr.send();

GET和POST在官方定义中是没有明确的区别的，但是浏览器或者开发的时候，都有一套约定俗成的规范：

• GET请求传递给服务器的信息，除了请求头传递以外，要求基于URL问号传参传递给服务器：
  • xhr.open('GET', './1.json?lx=1&name=xxx')
• POST请求要求传递给服务器的信息，是基于请求主体传递：
  • xhr.send('lx=1&name=xxx')

GET请求 VS POST请求

1. GET传递的信息不如POST多，因为URL有长度限制「IE->2KB」，超过这个长度的信息会被自动截掉，这样导致传递内容过多，最后服务器收到的信息是不完整的！！POST理论上是没有限制的，但是传递的东西越多，速度越慢，可能导致浏览器报传输超时的错误，所以实际上我们会自己手动做限制
2. GET会产生缓存「浏览器默认产生的，不可控的缓存」：两次及以上，请求相同的API接口，并且传递的参数也一样，浏览器可能会把第一次请求的信息直接返回，而不是从服务器获取最新的信息
   • xhr.open(‘GET’, ‘./1.json?lx=1&name=xxx&_’+Math.random())
   • 在请求URL的末尾设置随机数，以此来清除GET缓存的副作用
3. POST相对于GET来讲更安全一些：GET传递的信息是基于URL末尾拼接，这个随便做一些劫持或者修改，都可以直接改了，而POST请求主体信息的劫持，没那么好做！！但是“互联网面前，人人都在裸奔”！！所以不管什么方式，只要涉及安全的信息，都需要手动加密「因为默认所有的信息传输都是明文的」

Ajax状态码 xhr.readyState

• 0 UNSENT
• 1 OPENED
• 2 HEADERS_RECEIVED 响应头信息已经返回
• 3 LOADING 响应主体信息正在处理
• 4 DONE 响应主体信息已经返回

HTTP状态码 xhr.status/xhr.statusText

• 200 OK
• 202 Accepted ：服务器已接受请求，但尚未处理（异步）
• 204 No Content：服务器成功处理了请求，但不需要返回任何实体内容
• 206 Partial Content：服务器已经成功处理了部分 GET 请求（断点续传 Range/If-Range/Content-Range/Content-Type:”multipart/byteranges”/Content-Length….）
• 301 Moved Permanently 永久转移 「域名迁移」
• 302 Move Temporarily 临时转移 「负载均衡」
• 304 Not Modified 缓存
• 305 Use Proxy 使用代理
• 400 Bad Request : 请求参数有误 【4开头一般是客户端问题】
• 401 Unauthorized：权限（Authorization）
• 403 Forbidden 服务器拒绝执行「为啥可能会已响应主体返回」
• 404 Not Found 地址错误
• 405 Method Not Allowed 请求方式不被允许
• 408 Request Timeout 请求超时
• 500 Internal Server Error 未知服务器错误
• 503 Service Unavailable 超负荷
• 505 HTTP Version Not Supported 当前HTTP版本不被支持
• …

服务器返回的响应主体信息的格式

• 字符串「一般是JSON字符串」 「最常用」
• XML格式数据
• 文件流格式数据「buffer/二进制…」
• …

基于请求主体传递给服务器的数据格式是有要求的「Postman接口测试工具」

1. form-data 主要应用于文件的上传或者表单数据提交

xhr.setRequestHeader('Content-Type', 'multipart/form-data');
let fd = new FormData;
fd.append('lx', 0);
fd.append('name', 'xxx');
xhr.send(fd);

2. x-www-form-urlencoded 格式的字符串
   • 格式：“lx=1&name=xxx” 「常用」
   • Qs库：$ npm i qs
   • Qs.stringify/parse:实现对象和urlencoded格式字符串之间的转换

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(Qs.stringify({
	lx: 0, 
	name: 'xxx' 
})); 

3. raw字符串格式
   • 普通字符串 -> text/plain
   • JSON字符串 -> application/json => JSON.stringify/parse 「常用」
   • XML格式字符串 -> application/xml
   • …
4. binary 进制数据文件「buffer/二进制…」
   • 一般也应用于文件上传
   • 图片 -> image/jpeg
   • EXCEL -> application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
   • …
5. GraphQL
   

XMLHttpRequest实例有几个常用方法：7个

• abort
• getAllResponseHeaders
• getResponseHeader
• open
• overrideMimeType
• send
• setRequestHeader

对象的方法：

• xhr.onabort()：xhr.abort() 中断请求, 触发xhr.onabort()
• xhr.onerror()
• xhr.onload()
• xhr.onreadystatechange()
• xhr.ontimeout() ：xhr.timeout=n,设置超时时间，xhr.ontimeout()监听超时
• xhr.withCredentials = true .在CORS跨域资源请求中，允许携带资源凭证例如cookie
• xhr.upload.onprogress 监听文件上传的进度
• …