一、同源策略

        同源策略（Same origin policy）是一种约定，它是浏览器最核心也最主要的安全功能，假设缺少了同源策略，则浏览器的正常功能可能都会受到影响。能够说Web是构建在同源策略基础之的。浏览器仅仅是针对同源策略的一种实现。

        同源策略，它是由Netscape提出的一个著名的安全策略。如今全部支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议。port同样。

当一个浏览器的两个tab页中分别打开来
百度和谷歌的页面当浏览器的百度tab页运行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，仅仅有和百度同源的脚本才会被运行。

        为了好理解，举个样例：
        在localhost:8082和localhost:24253有TEST.js,当中TEST.js内容是alert("Hello World");
 
       localhost:8082的測试代码为：    
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

<script src="/common/js/lib-base.js"></script>

<script>

function test(){

	  $.get("http://localhost:24253/TEST.js", function (data) {

	        console.log(data)

	    });

	  $.get("/common/js/TEST.js", function (data) {

	        console.log(data)

	    });

	   $.get("http://localhost:8082/common/js/TEST.js", function (data) {

	        console.log(data)

	    });

}

</script>

</head>

<body>

     <div><input type="button" value="test"  onclick="test()"/></div>

</body>

</html>

点击buttontest后，弹出两个Hello World,当中在请求另外一个域资源的时候。由于同源策略而不能读取。

      
      
 
       可是在页面中增加<script src="http://localhost:24253/TEST.js></script>就能够绕过同源策略。由于这样是本地server訪问远程server的信息。
 
     2、理解JSONP跨域
     JSONP正是为了解决同源策略的问题。它的基本原理就是借助script标签src属性的跨域能力，通过src返回的“回调函数名+json数据”。 然后在前台的回调函数中运行该方法。
 
      我们先来看一个JSONP演示样例：
      在localhost:8082上构建一个json格式数据。然后在localhost:24253上測试：
      locahost:8082的链接和结果例如以下：
 
    在localhost:24253上调用代码例如以下：
     
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

<script src="jquery-1.7.2.min.js"></script>

<script>

    function CreateScript(src) {

        $("<script><//script>").attr("src", src).appendTo("body");

    }

    function getData() {

       CreateScript("http://localhost:8082/eap/testJSONP");

    }

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input type="button" value="get value from localhost:8082" onclick="getData()" />

    </div>

    </form>

</body>

</html>
 
运行后，出现例如以下错误，由于传回的json数据会当js运行。
 
 
3、JSONP演示样例（原生构造与JQuery）
如今我们在localhost:8082另构造一个“回调函数+json类型”的方法http://localhost:8082/eap/testJSONP_1?

callback=jsonpcallback

而在localhost:24253通过这样的方式就可以调用成功，代码例如以下：
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

<script src="jquery-1.7.2.min.js"></script>

    <script src="json2.js"></script>

<script>

    function CreateScript(src) {

        $("<script><//script>").attr("src", src).appendTo("body");

    }

    function getData() {

       CreateScript("http://localhost:8082/eap/testJSONP_1?callback=jsonpcallback");

    }

    function jsonpcallback(data) {

        alert(JSON.stringify(data));

    }

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input type="button" value="get value from localhost:8082" onclick="getData()" />

    </div>

    </form>

</body>

</html>
 
结果例如以下：
 
 


而借助于JQuery则可轻松实现：
  function getData() {

        $.ajax({

            url: 'http://localhost:8082/eap/testJSONP_1',

            dataType: "jsonp",

            jsonp: "callback",

            success: function (data) {

                alert(JSON.stringify(data));

            }

        })

    }

 

版权声明：本文博主原创文章，博客，未经同意不得转载。

原产地政策，jsonp跨域的更多相关文章

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 借助node实战JSONP跨域

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...

  3. jsonp跨域+ashx（示例）

    前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...

  4. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  5. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

  6. 我的jsonp跨域问题

    关于jsonp跨域问题,在这个方面也是了解一点点,先记录下来,主要作为以后查看,之前下载并安装过wampserver,了解到了jsonp和json的区别,现在谈谈跨域这个问题: 首先什么是跨域,简单地 ...

  7. jsonP跨域调用

    -------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...

  8. JSONP跨域的原理解析( 一种脚本注入行为)

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...

  9. jsonp跨域问题

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式). 同源策略限制 ...

随机推荐

  1. jenkins 集成 redmine 账户验证的方案

    jenkins 集成 redmine 账户验证的方案 赖勇浩(http://laiyonghao.com) 动机 Jenkins 是最著名的持续集成工具,又因为它开源免费.插件众多,成为了许多团队做持 ...

  2. hadoop学习；大数据集在HDFS中存为单个文件；安装linux下eclipse出错解决；查看.class文件插件

    sudo apt-get install eclipse 安装后打开eclipse,提示出错 An error has occurred. See the log file /home/pengeor ...

  3. HttpClient请求服务器代码优化版

    HttpClient请求服务器代码优化版 首先,我在前面的两篇博文中介绍了在 Android中,除了使用java.net包下HttpUrlConnection的API访问HTTP服务之外,我们还可以换 ...

  4. centos6搭建本地openstack软件源

    1.把相关软件包所有下载到本地机器 wget -np -nH –cut-dirs=1 -r -c -L –exclude-directories=repodata –accept=rpm,gz,xml ...

  5. Android中TweenAnimation四种动画切换效果

    点击每个按钮都会有对应的动画显示 activity代码: package com.tmacsky; import android.app.Activity; import android.os.Bun ...

  6. 黄聪：Microsoft Enterprise Library 5.0 系列教程(九) Policy Injection Application Block

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(九) Policy Injection Application Block 代理对象(Proxy Object) ...

  7. Java EE (2) -- Java EE 6 Enterprise JavaBeans Developer Certified Expert(1z0-895)

    Introduction to Java EE Gain an understanding of the Java Platform, Enterprise Edition (Java EE) Exa ...

  8. python进阶八_警告和异常

    心情有点纠结,怎么说呢,倒不是由于其它学习上的事情,反而是由于生活上狗血的剧情逼着人偏离,渐行渐远,人跟人之间有误会也是正常的,可能是由于交流不够,彼此不够了解吧,希望能尽快度过这一段纠结的日子,简单 ...

  9. ufldl学习笔记和编程作业：Softmax Regression（softmax回报）

    ufldl学习笔记与编程作业:Softmax Regression(softmax回归) ufldl出了新教程.感觉比之前的好,从基础讲起.系统清晰,又有编程实践. 在deep learning高质量 ...

  10. iOS Crash获取闪回日志和上传server

    首先我们整理常常会闪退的异常哪些:数组越界.空引用.引用没有定义方法.内存空间不足等等. 怎样获取crash闪退日志 -- 工具查看 先看第一个问题怎样查看,我搜索的方法有下面几个: 第一个方法:XC ...