一、Ajax跨域概述


同源策略

  - 同源策略(Same origin policy)是一种约定,它是浏览器的核心也最最基本的核心。如果少了同源策略,则浏览器的正常功能可能都会收到影响。可以说Web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现

      - 它是由 Netscape 提出的一个著名的安全策略

      - 现在所有支持 JavaScript 的浏览器都会使用这个策略

      - 所谓同源策略是指,域名、协议、端口相同


域名概述

  - 域名(Domain Name) 是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名字,用于在数据传输时标识计算机的电子方位

  - 域名的目的是便于记忆和沟通的一组服务器的地址

      - 顶级域名

      - 二级域名

      - 三级域名


不同的域

wKiom1cCRe-yAFPXAAHmAHmdETc804.png


跨域概述

  - 简单来说,出于安全方面的考虑,页面中的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将自动替换"?"为正确的函数名,以执行回调函数

wKioL1cCSGGA7SB5AACp36vGB-A147.png


$.ajax()

  - $.ajax() 方法同样可以利用JSONP实现跨域请求,只需将$.ajax()方法的选项"dataType"的值设置为"jsonp"即可。

  - $.ajax() 的选项

      - dataType - 设置服务器端返回的数据类型,这里需要设置为"jsonp" 

      - jsonpCallback - 为JSONP请求指定一个回调函数名,这个值将用于替代jQuery自动生成的随机函数名

      - jsonp - 在一个JSONP请求中重写回调函数的名字,这个值将用于替代"callback=?"


总结:本章内容主要介绍了 Ajax跨域请求(Ajax跨域概述、Ajax跨域实现)