首先：什么是跨域？

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. 如何用命令行删除EasyBCD开机选择项？

    用硬盘安装Ubuntu方法的windows双系统电脑上面,很多人都是用EasyBCD设置的开机启动选择.所以当我们不需要双系统的时候,或者已经删除双系统后,或者安装双系统失败的情况下,发现电脑的开机启 ...

  2. linux 进程学习笔记-信号semaphore

    信号灯(信号量)不是进程通信手段,其是用于控制和协调在进程间通信过程中的共享资源访问,就如同互斥锁(两者的区别可以参考这里) 可以将简单地将信号灯想象成一个计数器,初始时计数器值为n(有n个资源可供使 ...

  3. Stamps

    链接 分析:dp[i][j]表示前i个数,组成j,最少需要多少个.dp[i][j]=min(dp[i-1][j],dp[i-1][j-k*v[i]]+k),则可以转化为完全背包问题,同样的方法进行降维 ...

  4. VirtualBox下安装MacOS11

    8.键盘选中 “简体中文” -- > "拼音模式".VirtualBox安装Mac OS 10.11 ,安装日期:2016 / 5 / 14 用虚拟机装黑苹果本人也装了不下3 ...

  5. Html5 canvas 元素

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  6. Day05:装饰器，三元表达式，函数的递归，匿名/内置函数，迭代器，模块，开发目录

    上节课复习:1.函数的对象    函数可以被当作数据取处理2.函数嵌套    嵌套调用:在调用一个函数时,函数体代码又调用了其他函数    嵌套定义:在一个函数内部又定义了另一个函数 def foo( ...

  7. layout属性

    RelativeLayout 第一类:属性值为true可false android:layout_centerHrizontal        水平居中 android:layout_centerVe ...

  8. 按钮交互loading ---- 转圈圈 加载

    按钮loading状态自定义选项(功能): 可以在元素上添加 data-am-loading 来设置选项: spinner 加载动画图标,适用于支持 CSS3 动画.非 input 元素,写图标名称即 ...

  9. <正则吃饺子> ：关于Collections中 比较器的简单使用

    在线文档地址: http://tool.oschina.net/apidocs/apidoc?api=jdk-zh sort public static <T extends Comparabl ...

  10. JavaScript高级程序设计学习笔记第二十章--JSON

    1.JSON:JavaScript Object Notation, JavaScript 对象表示法. 2.最重要的是要理解它是一种数据格式,不是一种编程语言.虽然具有相同的语法形式,但 JSON ...