跨域和ajax

Ajax

基础（面试）

1. 手动编写一个ajax，不依赖第三方库
2. 跨域的几种实现方式

知识点：

• XMLHTTPRequest
• 状态码说明
• 跨域

 

状态码说明：

readyState

• 0 （未初始化）还没有调用send()方法
• 1 （载入）已调用send（）方法，正在发送请求
• 2 （载入完成）send（）方法执行完成，已经接收到全部响应内容
• 3 （交互）正在解析响应内容
• 4 （完成）响应内容解析完成，可以在客户端调用了

status

• 2XX 表示成功请求处理，比如200
• 3XX 需要重定向，浏览器直接跳转
• 4XX 客户端请求错误，如404（客户端发来的地址客户端没有定义，找不到）
• 5XX 服务器端错误

 

 

跨域

1.什么是跨域

浏览器有同源策略，不允许ajax访问其他域接口

跨域条件：协议、域名、端口，有一个不同就算跨域

 

跨域的几种实现方式

• JSONP
• 服务器端设置http header

 

2.可以跨域的三个标签

但是有三个标签允许跨域加载资源

• <img src=xxx>
• <link src=xxx>
• <script src=xxx>

 

三个标签的场景

• <img>用于打点统计，统计网站可能是其他域（）注意：img标签可以兼容任何浏览器
• <link><script>可以使用CDN，CDN的也是其他域
• <script>可以用于JSONP

跨域注意事项：

• 所有的跨域请求都必须通过信息提示方允许
• 如果未经允许即可获取，那是浏览器同源策略出现漏洞

 

JSONP 实现原理

• 加载http://coding.m.imooc.com/classindex.html
• 不一定服务端真正有一个classindex.html文件
• 服务器可以根据请求，动态生成一个文件，返回

例子：<script src="http://coding.m.imooc.com/api.js ">的时候，慕课网不一定

真正存在api.html文件，但是服务器可以根据请求，自己拼一个js文件或者一个js格式的文件返回

 

服务器端设置http header（了解，后端实现）

• 另外一个解决跨域的简洁方法，需要服务器端来做
• 但是作为交互方，我们需要知道这个方法
• 是将来解决跨域问题的一个趋势

 

存储

请描述一下cookie，sessionStorage和localStorage的区别？

cookie

• 本身用于客户端和服务器端通信
• 但是它有本地存储的功能，于是就被“借用”
• 使用document.cookie=... 获取和修改即可

cookie用于存储的缺点

• 存储量太小，只有4KB
• 所有http请求都带着，会影响获取资源的效率
• API简单，需要封装才能用document.cookie=...

 

sessionStorage和localStorage

• HTML5专门为存储设计，最大容量5M
• API简单易用
• localStorage.setItem(key,value); localStorage.getItem(key);适合数据存储和读取

区别

• 如果浏览器关了，会话清理，那么 sessionStorage会清理，但是localStorage即使浏览器关闭也不会被清理掉，所以localStorage的应用场景较多

使用注意：

• IOS Safari隐藏模式下，localStorage.getItem会报错，建议统一使用try-catch封装

	cookie	localStorage和sessionStorage
容量	4KB	5M
是否会携带到ajax中	携带	不携带，只作为存储
API易用性	需要自己封装	简单易用，使用getItem和setItem