文中内容来自 B 站教学视频【尚硅谷】3小时Ajax入门到精通
- AJAX 就是异步的 JS 和 XML
- AJAX 是一种局部刷新的新方法，不是一种语言
- AJAX 包含的技术主要有 javascript, dom, css, xml 等，核心是 javascript 和 xml
- javascript 负责创建异步对象，发送请求，更新页面的 dom 对象
- ajax 请求需要服务器端的数据
- xml 是网络中传输的数据格式，现在使用 json 替换了 xml
- 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
- XML 被设计用来传输和存储数据
- 最初服务器端与客户端通过 AJAX 传输数据的时候用的就是 XML，现在已经被 JSON 代替了
- AJAX 缺点：
- 没有浏览历史，不能回退
- 存在跨域问题
- SEO 不友好（搜索引擎优化）
- HTTP 协议叫【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则
- HTTP 请求报文格式：行，头，空行，体
POST /mbs/web/insuInfo/receiver/refuseInsuInfo HTTP/1.1
Host: mbs.nmtst.hsip.gov.cn:30000
Connection: keep-alive
Content-Length: 229
Accept: application/json, text/plain, */*
X-XSRF-TOKEN: 47a737a2-93ba-49b9-a5dd-597bd6a0fd80
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36
menuId: mbs-jbylbxzr
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7,zh-TW;q=0.6
Cookie: XSRF-TOKEN=47a737a2-93ba-49b9-a5dd-597bd6a0fd80; SESSION=YjQ2NDdiNWMtYWQ5OC00Zjk0LThhZDMtOTQzNjQ3OThjYTZi
username=admin&password=admin
- HTTP 响应报文格式：行，头，空行，体
HTTP/1.1 200 OK
Date: Thu, 02 Dec 2021 09:06:14 GMT
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Pinpoint-MonitorG: hsa
Pinpoint-ProjectID: eb60828076964237bdd040620f6e9d82
Pinpoint-TxType: POST_/mbs/web/insuInfo/receiver/refuseInsuInfo
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
Pinpoint-SrcResId: hsa-mbs-local-service:8080|33bf5399ae7abd8894c949b30acf6059
Pinpoint-Forced-CallChain: true
Server: elb
<html>
<head></head>
</html>
- 浏览器控制台 Network 页签中，XHR 是 XMLHttpRequest 的缩写，是对 AJAX 请求做的筛选
- 请求头
Content-Type 设置请求体内容的类型
- 利用浏览器内置的 XMLHttpRequest 对象实现 AJAX 写法
// 获取 button 元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
// 绑定事件
btn.onclick = function(){
// 1. 创建对象
const xhr = new XMLHttpRequest();
// 2. 初始化 设置请求方法和 url
xhr.open('GET', 'http://localhost:3333/mock/22/server?a=100&b=200&c=300');
// 3. 发送
xhr.send();
// 4. 事件绑定 处理服务端返回的结果
// on when 当……的时候
// readystate 是 xhr 对象中的属性，表示状态 0，1，2，3，4
// 0 未初始化；1 表示 open 方法调用完毕；
// 2 send 方法调用完毕；3 服务端返回部分结果；
// 4 服务端返回了所有结果
// change 改变
xhr.onreadystatechange = function(){
// 判断（服务端返回了所有的结果）
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); // 响应体
// 设置 result 的文本
result.innerHTML = xhr.response;
}
}
}
}
- axios 是目前前端最热门的 AJAX 工具库，而且是 Vue 和 React 推荐的 AJAX 工具包
- Promise 是 ES6 推出的异步变成的新的解决方案
- BootCDN 网站中可以查到各种 CDN 的资源
- crossorigin="anonymous" 语句可以去掉发送请求时所携带的 cookies 信息，防止控制台出提示
- post 请求，url 参数和请求体可以同时设置
- 同源策略：是浏览器的一种安全策略
- 同源：
协议、域名、端口号必须完全相同 - AJAX 是默认遵循同源策略的
- 违背同源策略就是跨域
- JSONP(JSON with Padding)，是一个非官方的跨域解决方案。只支持 get 请求
- 在网页有一些标签天生就具有跨域能力，比如：img, link, iframe, script。JSONP 就是利用 script 标签的跨域能力来发送请求的
- 使用 JSONP，服务端返回的得是一段 js 代码才可以
- CORS 是跨域的另一种解决方案
- CORS(Cross-Origin Resource Sharing)，跨域资源共享
- CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
- CORS 需要服务端返回响应报文时，要设置 header
response.setHeader("Access-Control-Allow-Origin", "*")
