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:服务器端错误、后端代码出错等