我们在使用ajax请求的时候经常会产生跨域问题，这是由于浏览器的同源策略导致的。所谓同源，即域名、协议、端口均相同，否则不管是静态页面还是动态网页或者web服务都无法通过ajax正常请求。有时候，我们可以通过jsonp来解决。

　　jsonp的数据传输方式是利用了 script标签src属性中的链接可以访问跨域的js脚本 这一特性（其实是js语言设计的一大漏洞哈哈），通过src来调用接收服务器返回的js脚本而不是常规的json格式的数据，从而达到接收数据跨域访问的目的。

下面使用jsonp，本地代码中script中的src标签指向另一域名下的remote.js文件，

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript">

    var localHandler = function(data){

        alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);

    };

    </script>

    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>

</head>

<body>

</body>

</html>

然后本地函数可以输出远程js带来的数据，以达到跨域访问的目的，远程js代码：

localHandler({"result":"我是远程js带来的数据"});

但是怎么让远程js知道它应该调用的本地函数叫什么名字呢？毕竟是jsonp的服务者都要面对很多服务对象，我们可以传一个参数过去给服务端，

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript">

    // 得到航班信息查询结果后的回调函数

    var flightHandler = function(data){

        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');

    };

    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）

    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";

    // 创建script标签，设置其属性

    var script = document.createElement('script');

    script.setAttribute('src', url);

    // 把script标签加入head，此时调用开始

    document.getElementsByTagName('head')[0].appendChild(script);

    </script>

</head>

<body>

</body>

</html>

服务端动态生成这样一段js代码：

flightHandler({

    "code": "CA1998",

    "price": 1780,

    "tickets": 5

});

　　

jquery也把jsonp作为ajax的一种形式进行了封装，这里调用也更加方便，本地不用再写调用函数 flightHandler 了，jquery会自动生成回调函数再把数据取出来供success函数调用，

<!DOCTYPE html>

<html>

<head>

     <title>Untitled Page</title>

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

      <script type="text/javascript">

     jQuery(document).ready(function(){

        $.ajax({

             type: "get",

             async: false,

             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",

             dataType: "jsonp",

             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

             success: function(json){

                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');

             },

             error: function(){

                 alert('fail');

             }

         });

     });

     </script>

     </head>

  <body>

  </body>

</html>

嗯，就是这样了。

 

什么是jsonp？——使用jsonp解决跨域请求问题的更多相关文章

  1. Django使用jsonp和cors解决跨域请求问题

    1.使用jsonp的方式解决跨域请求的问题 我启动两个django项目,然后使用的端口不一样,在项目1中通过ajax发请求给项目2,然后接受项目2发送过来的数据 先看项目1的ajax的代码 $(&qu ...

  2. JSONP方法解决跨域请求

    Ajax跨域请求的问题 跨域:跨域名, 一个域名下的文件去请求了和他不一样的域名下的资源文件(注意是请求文件,而不是数据接口),那么就会产生跨域请求,下面来写一个ajax来跨域请求的例子 <!D ...

  3. 跨域 - jsonp轻松搞定跨域请求

    1.jsonp轻松搞定跨域请求 vue中使用axios,遇到跨域我就蒙逼了.第一次真正意义上的尝试使用jsonp js中用 var myscript = document.createElement( ...

  4. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  5. 外部调用mvc的api方法时，如何解决跨域请求问题？

    首先,创建一个mvc项目(包含webapi),我们模拟一个场景 1)在项目的Controller 创建一个WeiXinApiController public class WeiXinApiContr ...

  6. Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题

        webservice 代码 /// <summary> /// MESService 的摘要说明 /// </summary> [WebService(Namespac ...

  7. XMLHttpRequest.withCredentials 解决跨域请求头无Cookie的问题

    查看原文 XMLHttpRequest.withCredentials  属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者 ...

  8. 使用SpringMVC的@CrossOrigin注解解决跨域请求问题

    跨域问题,通俗说就是用ajax请求其他站点的接口,浏览器默认是不允许的.同源策略(Same-orgin policy)限制了一个源(orgin)中加载脚本或脚本与来自其他源(orgin)中资源的交互方 ...

  9. SpringBoot解决跨域请求拦截

    前言 同源策略:判断是否是同源的,主要看这三点,协议,ip,端口. 同源策略就是浏览器出于网站安全性的考虑,限制不同源之间的资源相互访问的一种政策. 比如在域名https://www.baidu.co ...

  10. JSONP、CORS解决跨域问题

    一.为什么会有跨域问题? 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,对href属性都不拦截. 二.解决跨域问题的两种方式 JSONP CORS 三.JSONP 先 ...

随机推荐

  1. 使用display:inline-block产生间隙

    使用display:inline-block产生间隙 一.产生的原因:当初设立标准的不是亚洲而是欧洲,inline元素为了正确显示英文字母如y j g等带有尾巴的,就在底下留空.二.解决办法: 四个d ...

  2. struts转换器

    struts转换器:在B/S应用中,将字符串请求参数转换为相应的数据类型,是MVC框架提供的功能,而Struts2是很好的MVC框架实现者,理所当然,提供了类型转换机制. 一.类型转换的意义 对于一个 ...

  3. C#当中利用Attribute实现简易AOP

    首先看一段简单的代码: public partial class Form1 : Form { public Form1() { InitializeComponent(); } //来自UI层的调用 ...

  4. 导出/打印项目数据报表需要设置IE浏览器

    导出/打印项目数据报表需要设置IE浏览器如下: 1.将本地服务器站点设置为可信站点, 2.通过点击网页上的工具→Internet选项→安全→自定义级别→把关于activeX控件和插件的选项都设置成启用 ...

  5. golang:bson.ObjectId与string转化

    网上资料不好搜,记下来:两个变量:id bson.ObjectIdstr string bson.ObjectId—>string id.Hex() string—>bson.Object ...

  6. MbrFix 问题

    删除Windows/Linux双系统下的Linux系统 参考博客 注意:官网上的 MbrFix.exe 下载或许太慢. CSDN下载 问题 1.看到博客下面的评论写道: 为什么我的到第四步的时候会提示 ...

  7. HihoCoder - 1236 Scores (五维偏序，分块+bitset)

    题目链接 题意:给定n个五维空间上的点,以及m组询问,每组询问给出一个点,求五个维度都不大于它的点有多少个,强制在线. 神仙题 单独考虑每个维度,把所有点按这个维度上的大小排序,然后分成T块,每块用一 ...

  8. Redis设计与实现 (一): 简单动态字符串

    1.定义 Redis没有使用C语言的字符串,  C语言的字符串只会用在不需要对字符串修改而只使用其值地方. Redis使用SDS表示字符串, 结构定义 : typedef char *sds; str ...

  9. 剑指offer-第四章解决面试题思路(判断一个数组是否为二叉搜索树的后序遍历序列)

    二叉搜索树:二叉搜索树根节点的左边都比根节点小,右边都比根节点大. 例题:输入一个数组,判断是否为二叉搜索树的后序遍历序列,如果是,返回true,如果不是,返回flase,假设没有重复的元素. 思路: ...

  10. 批量插入数据利器之SqlBulkCopy

    工作中要频繁的处理一些数据导入,又不想手工去做,因此用了神器SqlBulkCopy.在MSDN查看了此类的帮助文档几经波折终于搞定,记录下来方便以后查阅. MSDN实例: using System.D ...