ajax

203 阅读2分钟

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...}) 需要什么内容就返回什么内容

存储(cookie,sessionStorage和localStorage)

1、cookie

1.1、本身用于客户端和服务器端通信
1.2、但是它有本地存储的功能,于是就被"借用"
1.3、使用方法: document.cookie = ... 获取和修改即可
缺点:
● 存储量太小,只有4KB
● 所有http请求都带着,会影响获取资源的效率
● API简单,需要封装才能用 document.cookie = ...

2、sessionStorage 和 localStorage

● HTML5专门为存储而设计,最大容量5M
● API简单易用:
2.1、设置:localStorage.setItem(key,value); 获取:localStorage.getItem(key)
2.2、sessionStorage:浏览器关闭就会消失 localStorage不会

描述一下cookie,sessionStorage和localStorage的区别

1、容量
2、是否会携带到ajax中(cookie会带,其他不会带)
3、API易用性