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

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

时间: 2024-10-26 06:14:36

JavaScript之Ajax-7 Ajax跨域请求(Ajax跨域概述、Ajax跨域实现)的相关文章

Ajax 跨域请求-- Cross Domain

在认识 跨域 之前,先简单了解下域名和协议名,比如下面这个 URL http://mail.163.com/index.html http://              协议名,也就是HTTP超文本传输协议 mail                  服务器名 163.com           域名 mail.163.com    网站名 /                        根目录 index.html         根目录下的默认网页 1.什么是跨域请求? 请求的下一个资源

django解决ajax跨域请求

由于jquery禁止通过ajax进行跨域请求,所以在通过ajax请求另外一个不同域名服务api的时候会报错:"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access" 最简单的两个解决办法: 1.在django中return的时候设置 def xxxxx(request):         ...

实现跨域请求的4种方法

模拟服务器端的PHP文件: service: <?php//允许访问header('Access-Control-Allow-Origin:*');@$callback=$_GET['callback'];//创建数据$userInfo = array('id'=>1,'username'=>'Scott Jeremy','email'=>'[email protected]');//编译成JSON$result = json_encode($userInfo);echo $cal

SpringBoot多跨域请求的支持(JSONP)

在我们做项目的过程中,有可能会遇到跨域请求,所以需要我们自己组装支持跨域请求的JSONP数据,而在4.1版本以后的SpringMVC中,为我们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持jsonp的数据(SpringBoot接收解析web请求是依赖于SpringMVC实现的).下面我们就看一下怎么用AbstractJsonpResponseBodyAdvice来支持跨域请求. 使用AbstractJsonpResponseBodyAdvice来支持跨域请求

jquery跨域请求的原理

jquery 跨域请求什么实现? jQuery  $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的.,$.getJSON是$.ajax()的封装,可以参考jquery aip 的$.getJSON部分. 2.什么是 JSONP? JSONP(JSON with Padding-填充json数据也就是常用的json跨域方式):利用script标签,通过特定的src地址的调用,来执行一个客户端的js函数,在 服务器端生成相对的数据(json格式)并以参数的形式传递给这个客户

spring boot跨域请求访问配置以及spring security中配置失效的原理解析

一.同源策略 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[origin]就是协议.域名和端口号.例如:http://www.baidu.com:80这个URL. 什么是同源 若地址里面的协议.域名和端口号均相同则属于同源. 是否是同源的判断 例如判断下面的URL是否与 http://www.a.com/test/index.html 同源 http://www.a

【转】同源策略和跨域请求解决方案

一.一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源.举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: URL 结果 原因 http://a.xyz.com/dir2/other.html 成功 协议,端口(如果有指定)和域名都相同 http://a.xyz.com/dir/inner/another.html 成功 协议,端口(如果有指定)和域名都相同 https://a.xyz.com/secure

angular的跨域请求

get请求 1,jsonp跨域 <script> angular.module("myApp",[])         .controller("myCtrl",['$scope','$http',function($scope,$http){             $http.get('http://lolapi.games-cube.com/champion?callback=JSON_CALLBACK',{headers:{"DAIWA

Zepto跨域请求

使用jquery进行跨域请求,可在 $.ajax({ success:function(data){ //如果返回json,data即为对象,jquery自动实现一个callback方法 } }) 而在zepto中需要手动实现,因为zepto精简了很多东西 下面附上代码 function pandoraCall(data){ console.log(data); } //按需执行下面的跨域请求 $.ajax({ type:"get", url:"http://localhos