一、Ajax跨域概述
同源策略
- 同源策略(Same origin policy)是一种约定,它是浏览器的核心也最最基本的核心。如果少了同源策略,则浏览器的正常功能可能都会收到影响。可以说Web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现
- 它是由 Netscape 提出的一个著名的安全策略
- 现在所有支持 JavaScript 的浏览器都会使用这个策略
- 所谓同源策略是指,域名、协议、端口相同
域名概述
- 域名(Domain Name) 是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名字,用于在数据传输时标识计算机的电子方位
- 域名的目的是便于记忆和沟通的一组服务器的地址
- 顶级域名
- 二级域名
- 三级域名
不同的域
跨域概述
- 简单来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略"。而跨域就是通过某些手段来绕过同源策略限制。实现不同服务器之间的通信的效果。
- 只要协议、域名、端口有任何一个不同,都被当作是不同的域
二、Ajax跨域实现
JSONP概述
- JSONP(JSON with Padding) 是JSON的一种使用模式,可用于解决主流浏览器的跨域数据访问的问题
- 由于同源策略,一般来说位于 server1.example.com的网页无法与不是server1.example.com的服务器沟通,而 HTML 的<script>元素是一个例外。利用<script>元素的这个开放策略,网页可以得到从其他动态产生的JSON资料,而这种使用模式就是所谓的JSONP
$.getJSON()
- $.getJSON()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据
- 使用 $.getJSON() 方法实现跨域请求,需要在请求路径的URL后增加"callback=?",jQuery将自动替换"?"为正确的函数名,以执行回调函数
$.ajax()
- $.ajax() 方法同样可以利用JSONP实现跨域请求,只需将$.ajax()方法的选项"dataType"的值设置为"jsonp"即可。
- $.ajax() 的选项
- dataType - 设置服务器端返回的数据类型,这里需要设置为"jsonp"
- jsonpCallback - 为JSONP请求指定一个回调函数名,这个值将用于替代jQuery自动生成的随机函数名
- jsonp - 在一个JSONP请求中重写回调函数的名字,这个值将用于替代"callback=?"
总结:本章内容主要介绍了 Ajax跨域请求(Ajax跨域概述、Ajax跨域实现)