首先：什么是跨域？

Cross Domain Request：从一个资源请求另一个资源，二者所在的请求地址不同，域名不同、端口号不同、请求协议不同。

它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

关于同源策略 这里推荐感兴趣的可以去 阮大的博客查看  阮一峰的个人博客

如何区分当前的请求是跨域请求？

在前端使用XHR对象发起请求时 浏览器 会将请求的发送地址和请求地址 的 协议  域名 端口号 做 字符串的匹配

提示：localhost和127.0.0.1也算跨域！

 浏览器允许跨域请求的情形：

IMG、LINK、SCRIPT、IFRAME ...

 浏览器禁止跨域请求的情形：

XHR  —— 浏览器处于安全考虑，禁用了XHR的跨域请求（其实服务器给出了响应消息，但浏览器不让使用）

如何解决浏览器的XHR跨域请求限制？

网上有关解决跨域请求的方法五花八门，这里仅仅列出常用的两种

1）、修改响应消息头部，添加Access-Control-Allow-Origin头部     服务器端添加响应头部

2）、使用JSONP

JSONP：JSON with Padding，填充式JSON，与JSON完全两码事，是一种使用JSON数据的方式。意思是在JSON字符串左右添加函数名： doResponse( {"ename":"Tom", "age":20} );

JSONP是专用于解决XHR跨域限制一种手段。基本原理：使用动态创建的一个SCRIPT标签代替XHR发起异步请求，要求服务器必须返回application/javascript，立即在客户端执行——要执行的函数本体在客户端浏览器中声明。

<script src="x.php" async></script>

通常我们使用 script 标签获取并执行一段js代码 而scrip标签和所以拥有src属性的元素一样 不受浏览器同源策略的影响；

如果我们请求的是 doResponse( data ) 同时本地创建了一个 doResponse 函数

结果 就是直接调用了 doResponse 函数  并在其参数组中获得了 我们需要的数据 data

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>...</title>

  <style>

  </style>

 </head>

 <body>

        <h3>使用JSONP解决浏览器跨域问题</h3>

        <hr>

        <button id="btn">发送jsonp请求</button>

        <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>

        <script type="text/javascript">

            $("#btn").click(function(){

                var scri = docuemnt.createElement("script");

                s.src="http://localhost/AJAX/JSONP/1_jsonp.php";

                s.async=true;

            });

        </script>

 </body>

</html>

jQuery中如何使用JSONP发起异步请求：

(1) $.getJSON()

用途1：使用XHR发起异步请求(不能跨域)

$.getJSON('x.php', doResponse)

用途2：使用JSONP发起跨域异步请求

$.getJSON('http://跨域地址/x.php?callback=?', doResponse)

(2) $.ajax() 推荐

用途1：使用XHR发起异步请求(不能跨域)

$.ajax({  })

用途2：使用JSONP发起跨域异步请求

$.ajax({ dataType: 'jsonp' })

jquery 中极度简化了 script 获取后端响应数据的过程 但原理都是一样的；

XHR的跨域请求和JSONP详解的更多相关文章

  1. JavaScript跨域请求和jsonp请求实例

    <script type="text/javascript" src="./whenReady.js"></script> <sc ...

  2. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  3. 跨域发送HTTP请求详解

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客讲述几种跨域发HTTP请求的几种方法,POST请求,GET请求 目录: 一,采用JsonP的方式(只能 ...

  4. 百万年薪python之路 -- 请求跨域和CORS协议详解

    楔子 什么是同源策略 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab ...

  5. 解决ajax跨域的方法原理详解之Cors方法

    1.神马是跨域(Cross Domain)   对于端口和协议的不同,只能通过后台来解决.   一句话:同一个ip.同一个网络协议.同一个端口,三者都满足就是同一个域,否则就是 跨域问题了.而为什么开 ...

  6. Java跨域问题的处理详解

    1,JavaScript由于安全性方面的考虑,不允许页面跨域调用其他页面的对象,那么问题来了,什么是跨域问题? 答:这是由于浏览器同源策略的限制,现在所有支持JavaScript的浏览器都使用了这个策 ...

  7. node解决跨域和服务器代理详解代码

    node中有很多解决服务器代理的插件,这里简介一个:express-http-proxy 之前网上查的使用node解决跨域的插件,有很多,例如,cors,koa2,这里解决跨域问题我拿原生解决的,ex ...

  8. AJAX学习笔记2：XHR实现跨域资源共享（CORS）以及和JSONP的对比----转载

    1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介 ...

  9. 与跨域相关的 jsonp 劫持与 CORS 配置错误

    参考文章: CORS(跨域资源共享)错误配置漏洞的高级利用 JSONP劫持CORS跨源资源共享漏洞 JSONP绕过CSRF防护token 读取型CSRF-需要交互的内容劫持 跨域资源共享 CORS 详 ...

随机推荐

  1. Contiki Ctimer模块

    Ctimer 提供和Etimer类似的功能,只是Ctimer是在一段时间后调用回调函数,没有和特定进程相关联. 而Etimer是在一段时间后发送PROCESS_EVENT_TIMER事件给特定的进程. ...

  2. html5+CSS3实现的炫酷超链接特效

    今天为大家介绍一个非常炫酷的超链接特效.在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果. 这些超链接特性,大都是借助伪元素.svg.HTML5动画来实现的.效果都很漂亮,不信看下面. 用你的 ...

  3. 时尚设计div+css免费模板

    时尚设计div+css免费网页模板,时尚设计,div+css. http://www.huiyi8.com/moban/

  4. python学习笔记：第六天（流程控制语句）

    Python3 条件控制 1.if 语句 <1> 一般形式 Python中if语句的一般形式如下所示: if condition_1: statement_block_1 elif con ...

  5. 1091 Acute Stroke (30)（30 分）

    One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...

  6. kettle导数删除并插入更新数据_20161130

    这里有3个表 仅是时间维度不同 天 周 月,现在需要把昨天数据每天添加进入这3个表 由于业务上会有退货等情况,因此需要先把这些表原来的部分数据删除 再从那个时间点进行更新. 天需要先删除前7天的数据, ...

  7. Python连接Mysql数据库_20160928

    python版本 2.7.1,python 连接mysql需要安装MYSQLdb模块 安装方法一种是cmd pip命令安装 pip install MySQLdb 一种是网上下载python MYSQ ...

  8. P2024 [NOI2001]食物链[扩展域并查集]

    大水题一道啊,几分钟切掉. 还是扩展域,每个点拆3个点,之间连边表示有关系(即捕食关系).然后随便判定一下就好了,不难,毕竟NOI上古题目. #include<iostream> #inc ...

  9. HDU1828：Picture

    浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:http://acm.hdu.edu.cn/showproblem.php? ...

  10. NOI.AC 31 MST——整数划分相关的图论(生成树、哈希)

    题目:http://noi.ac/problem/31 模拟 kruscal 的建最小生成树的过程,我们应该把树边一条一条加进去:在加下一条之前先把权值在这一条到下一条的之间的那些边都连上.连的时候要 ...