ajax、跨域、存储
ajax
1、XMLHttpRequest
//ajax原生写法
//XMLHttpRequest
let xhr = new XMLHttpRequest()
xhr.open('GET','api.txt',false)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
console.log(xhr.responseText)
}
}
}
xhr.send(null)
2、状态码说明
readyState
● 0 - (未初始化)还没调用send()方法 ● 1 - (载入)已调用send()方法,正在发生请求 ● 2 - (载入完成) send()方法执行完成,已经接收到全部响应内容 ● 3 - (交互) 正在解析响应内容 ● 4 - (完成) 响应内容解析完成,可以在客户端调用了
status
● 2xx - 表示请求成功处理。如200 ● 3xx - 需要重定向,浏览器直接跳转 ● 4xx - 客户端请求错误, 如404 ● 5xx - 服务器端错误
跨域
1、什么是跨域
● 浏览器有同源策略,不允许 ajax 访问其他域接口
● 跨域条件:协议、域名、端口,有一个不同就算跨域
2、可以跨域的三个标签
● img
● link
● script
3、三个标签的场景和注意事项
//<img>用于打点统计,统计网站可能是其他域
//<link><script>可以使用CDN,CDN的也是其他域
//<script>可以用于JSONP
//跨域注意事项
//所有的跨域请求都必须经过信息提供方允许
//如果未经允许即可获取,那是浏览器同源策略出现漏洞
4、实现跨域
// 1、定义一个函数
window.callback = function(data){ //接收后台返回的内容
//输出跨域得到的信息
console.log(data)
}
// 2、<script src="http://....."></script> 利用script标签获取内容
// 后台返回 callback({x:100,y:200...}) 需要什么内容就返回什么内容