ajax 基础
- 手写ajax
function ajax(url){
const p = new Promise(resolve,reject)=>{
const xhr=XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange=function(){
ir(xhr.readystate === 4){
if(xhr.status === 200){
resolve(JSON.parse(xhr.responseText))
}else if(xhr.statue === 404){
reject(new Error('404 not found'))
}
}
}
xhr.send(null)
}
return p;
}
ajax('/data/test.json')
.then(res=>console.log(res))
.catch(err=>{console.log(err)})
- 现有技术：
- jQuery 比较老、不支持promise异步
- fetch 浏览器未全部兼容，400、500返回值也不会reject，比较麻烦；不会从服务端发送或接受任何cookies，站点依赖session会导致未经认证的请求，要发送cookies必须设置credentials选项；
- axios 支持promis、浏览器、node.js，也是用的XMLHttpRequest api；支持promise；
- 跨域
- 原因：ajax请求时，_浏览器_要求当前网页和server必须同源（协议https/http、域名、端口，三者一致），为了安全
- 加载图片、css、js不受同源策略限制
可用于统计打点，即第三方统计服务，如站长之家
<script />可实现JSONP
<img src=xxImg /> // 服务器可以做防盗链，判断是否是白名单内的域名请求，不是的话返回报错即可
<link href=xx.css /> // 如：在线cdn等
<script src=xx.js /> // 如：在线cdn等
- 所有的跨域，必须经过server端允许和配合，否则说明浏览器有漏洞，很危险，易被此浏览器攻击
- JSONP
<body>
<script>
window.callback = function(data){
console.log(data)
}
</script>
<script src="http://xx?8990/xx?username=xx&callback=callback"
</body>
- CORS // 服务器设置http header
- XMLHttpRequest
// get 请求
const xhr = new XMLHttpRequest()
xhr.open("GET", "/api",true) // 第三个参数true为异步，false为同步
xhr.onreadystatechange = function(){
// 这里的函数异步执行，类似img.onload
if(xhr.readyState === 4 ){
if(xhr.status === 200){
alert(xhr.responseText)
}
}else{
console.log('其他情况')
}
}
xhr.send(null) // get请求不需要发送数据，xhr发送数据只能发送字符串；通过JSON.stringify(data)转一下就可以了
- 状态码(xhr.status)
- 2xx: 成功处理请求
- 3xx：需要重定向，浏览器会直接自动跳转
- 301：永久重定向（不多见）
- 302：临时重定向（浏览器自动跳到重定向的位置，下次还是跳正常的位置）
- 304：资源未改变（未更新），浏览器会使用自身缓存数据
- 4xx: 客户端请求错误
- 404：请求地址错误
- 403：缺少相关权限（管理系统多见，未登陆等）
- 5xx：服务器端错误、后端代码出错等
