ajax(XMLHttpRequest)
2023-01-11 21:16:14 5 举报
AI智能生成
ajax
作者其他创作
大纲/内容
封装简易版的ajax
Fetch 新的网络请求API
当接收到一个代表错误的 HTTP 状态码时,
从 fetch() 返回的 Promise 不会被标记为 reject,
即使响应的 HTTP 状态码是 404 或 500。
相反,它会将 Promise 状态标记为 resolve
(但是会将 resolve 的返回值的 ok 属性设置为 false ),
仅当网络故障时或请求被阻止时,才会标记为 reject。
从 fetch() 返回的 Promise 不会被标记为 reject,
即使响应的 HTTP 状态码是 404 或 500。
相反,它会将 Promise 状态标记为 resolve
(但是会将 resolve 的返回值的 ok 属性设置为 false ),
仅当网络故障时或请求被阻止时,才会标记为 reject。
fetch() 可以不会接受跨域 cookies;
你也可以不能使用 fetch() 建立起跨域会话。
其他网站的 Set-Cookie 头部字段将会被无视。
你也可以不能使用 fetch() 建立起跨域会话。
其他网站的 Set-Cookie 头部字段将会被无视。
fetch 不会发送 cookies。
除非你使用了credentials 的初始化选项。
(自 2017 年 8 月 25 日以后,
默认的 credentials 政策变更为 same-origin。
Firefox 也在 61.0b13 版本中进行了修改)
除非你使用了credentials 的初始化选项。
(自 2017 年 8 月 25 日以后,
默认的 credentials 政策变更为 same-origin。
Firefox 也在 61.0b13 版本中进行了修改)
xhr.readyState
0 未初始化,还没有调用send()方法
1 载入,已调用send()方法,正在发送请求
2 载入完成,send()方法执行完成,已经接收到全部响应内容
3 交互,正在解析响应内容
4 完成,响应内容解析完成,可以在客户端调用
xhr.status
HTTP协议的状态码,如200
同源策略
ajax请求时,浏览器要求当前网页和server必须同源(安全)
同源:协议、域名、端口三者必须一致,有一个不一致则非同源
加载css js img的标签可以无视同源策略
<img src="xxx" />
可用于统计打点,可使用第三方统计服务
<link href="xxx" />
可使用CDN
<script src="xxx" ></script>
可使用CDN、可实现JSONP
跨域
CORS-服务端设置http header
服务端设置response头部
JSONP
<script> 可绕过跨域限制
例如访问www.baidu.com,服务端一定返回一个html文件吗
服务器可以任意动态拼接数据返回,只要符合html格式要求
同样访问www.baidu.com/getData.js也不一定返回一个js文件,也可以返回任意数据
所以只要服务端愿意配合前端,就可以返回想要的数据
缺点:只能访问get请求的资源
jQuery实现jsonp的原理也是一样的
收藏
收藏
0 条评论
下一页