JavaScript之Ajax-7 Ajax跨域请求(Ajax跨域概述、Ajax跨域实现)

1、Ajax跨域概述

同源策略

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

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

      - 如今全部支持 JavaScript 的浏览器都会使用这个策略

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

域名概述

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

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

      - 顶级域名

      - 二级域名

      - 三级域名

不一样的域

跨域概述

  - 简单来讲，出于安全方面的考虑，页面中的JavaScript没法访问其余服务器上的数据，即"同源策略"。而跨域就是经过某些手段来绕过同源策略限制。实现不一样服务器之间的通讯的效果。

  - 只要协议、域名、端口有任何一个不一样，都被看成是不一样的域

2、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跨域实现)