在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作

另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,iframe等

1.jsonp的原理

jsonp,即json+padding,动态创建script标签,利用script标签的src属性可以获取任何域下的js脚本,通过这个特性(也可以说漏洞),服务器端不在返回json格式,而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>GoJSONP</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8.     function jsonhandle(data){
  9.         alert("age:" + data.age + "name:" + data.name);
  10.     }
  11. </script>
  12. <script type="text/javascript" src="jquery-1.8.3.min.js">
  13. </script>
  14. <script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>
  15. </body>
  16. </html>

这里调用了跨域的remote.js脚本，remote.js代码如下：

  1. jsonhandle({
  2.     "age" : 15,
  3.     "name": "John",
  4. })

这个是参考文件：https://blog.csdn.net/u011897301/article/details/52679486

<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>这个代码相当于是执行了

  1. jsonhandle({"age" : 15,"name": "John",})这个函数。
    2.最后jQuery提供了方便使用JSONP的方式，代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>GoJSONP</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript" src="jquery-1.8.3.min.js">
  8. </script>
  9. <script type="text/javascript">
  10.     $(document).ready(function(){
  11.         $.ajax({
  12.             type : "get",
  13.             async: false,
  14.             url : "http://www.practice-zhao.com/student.php?id=1",
  15.             dataType: "jsonp",
  16.             jsonp:"callback", //请求php的参数名
  17.             jsonpCallback: "jsonhandle",//要执行的回调函数
  18.             success : function(data) {
  19.                 alert("age:" + data.age + "name:" + data.name);
  20.             }
  21.  
  22.         });
  23.     });
  24. </script>
  25. </body>
  26. </html>

3.优缺点

jsonp优点:

  1. 完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback。参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
    简单来说数据的格式没有发生很大变化。
    jsonp缺点:

1.jsonp只支持get请求而不支持post请求,也即是说如果想传给后台一个json格式的数据,此时问题就来了,浏览器会报一个http状态码

415错误,告诉你请求格式不正确

2安全问题

安全防范:

1.防止callback参数意外截断js代码,特殊字符单引号双引号,换行符存在风险.

2.防止callback参数恶意添加script标签,造成xss漏洞

3.防止跨域请求滥用,阻止非法站点恶意调用

详细请看:http://blog.csdn.net/jian_xi/article/details/66474717

  1.  
  1.  

jsonp的跨域原理的更多相关文章

  1. 简单的jsonp实现跨域原理

    什么原因使jsonp诞生?  传说,浏览器有一个很重要的安全限制,叫做"同源策略".同源是指,域名,协议,端口相同.举个例子,用一个浏览器分别打开了百度和谷歌页面,百度页面在执行脚 ...

  2. 跨域解决方案二：使用JSONP实现跨域

    跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家 ...

  3. 使用XHR2或Jsonp实现跨域以及实现原理

    我们直接使用XMLHttpRequset请求外部接口 会发现 报这个错误 其实浏览器成功发送请求并拿回了数据  只是浏览器的同源策略 禁止了获取  在xhr2 服务器端支持跨域 需要在响应头增加 Ac ...

  4. jsonp跨域原理解析

    前言: 跨域请求是前台开发中经常遇到的场景,但是由于浏览器同源策略,导致A域下普通的http请求没法加载B域下的数据,跨域问题由此产生.但是通过script标签的方式却可以加载非同域下的js,因此可以 ...

  5. ajax跨域原理以及解决方案

    说明 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 强烈推荐阅读参考来源中的文章,能够快速帮助了解跨域的原理 参考来源 本文参考了以下来源 浏览器同源政 ...

  6. json跨域原理及解决方法

    这一篇文章呢,主要是之前一直听别人讲json跨域跨域,但是还是一头雾水,只知其一,于是一怒之下,翻阅各种资料,如果有不正确的地方,劳烦指正一下^_^ 首先,先了解浏览器有一个很重要安全性限制,即为同源 ...

  7. 转（JSONP处理跨域事件）

     前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...

  8. Ajax跨域原理及JQuery中的实现

    浅析Ajax跨域原理及JQuery中的实现分析   AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...

  9. 使用JSONP实现跨域

    什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通 ...

随机推荐

  1. go命令行参数

    go命令行参数例子: package main import( "fmt" "os" "strings" ) func main(){ wh ...

  2. 从数组中找出所有组合为s的数

    java版本 package numCombine; /** * 从数组中找出所有组合为s的数 * @author root * */ public class NumComberAll { publ ...

  3. AndroidStudio NDK环境3种搭建方式

    AndroidStudio NDK环境3种搭建方式     转载. https://blog.csdn.net/zhang_jun_ling/article/details/85621427 一.前言 ...

  4. 数据分析 - seaborn 模块

    seaborn 模块 简述 对 matplotlib 模块进行了二次封装, 底层依旧使用还是 matplotlib 的, 但是在此基础上增加了很多的易用性模板, 更加方便使用 引用使用 import ...

  5. IDEA使用git

    本文转自:http://www.cnblogs.com/java-maowei/p/5950930.html 一.安装git 下载地址:  https://git-scm.com/download/w ...

  6. R语言常用包简介

  7. 逻辑回归（Logistic Regression）二分类原理及python实现

    本文目录: 1. sigmoid function (logistic function) 2. 逻辑回归二分类模型 3. 神经网络做二分类问题 4. python实现神经网络做二分类问题 1. si ...

  8. 纹理特征描述之自相关函数法 纹理粗糙性与自相关函数的扩展成正比 matlab代码实现

    图像中通常采用自相关函数作为纹理测度 自相关函数的定义为: ​ 调用自定义函数 zxcor()对砖墙面和大理石面纹理进行分析: 自定义函数 zxcor(): function [epsilon,eta ...

  9. Unity小白文——单例的定义

    当类继承与MonoBehaviour时 public class TestSingle : MonoBehaviour { public static TestSingle Instance; voi ...

  10. 【VS开发】【计算机视觉】使用opencv静态库编译程序时爆出错误的解决方案

    #[VS开发][计算机视觉]关于opencv静态库的使用说明 标签:[VS开发] [图像处理] --- 忽然间发现OpenCV中居然有已经编译好的静态链接库,于是尝试着使用一下,却遇到了比较多的问题, ...