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

Posted 2020-07-03

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

本文出自 “会飞的蚂蚁” 博客，谢绝转载！