我们在使用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. 剑指offer--32.把数组排成最小的数

    用to_string()将整形转化为字符串,对字符串进行比较 --------------------------------------------------------------------- ...

  2. [Git]Git指南一　查看创建删除标签

    1. 查看标签 列出现有标签,使用如下命令: xiaosi@yoona:~/code/learningnotes$ git tag r-000000-000000-cm.cm v1.0.0 v1.0. ...

  3. 深入Guerrilla Games解密次世代开山大作《杀戮地带暗影坠落》（The technology of Killzone Shadow Fall）

    文章摘要:这几天终于有时间,把全文翻译完了,自己感觉不是太满意,不过大家能看懂就好,就当一个学习的机会.整篇文章通过SONY第一方游戏工作室Guerrilla Games主创的语录,为我们展现了次世代 ...

  4. 使用第三方图表工具——Chart.js

    效果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  5. 使用hping3/nping施行DoS攻击

    DDoS攻击是常见的攻击方式,每小时大约发生28次.http://www.digitalattackmap.com提供在世界范围内的DDoS实时攻击分布图: 从DDoS攻击的地图上就可以看出国际形势: ...

  6. laravel 框架给数组分页

    //Get current page form url e.g. &page=6        $currentPage = LengthAwarePaginator::resolveCurr ...

  7. 9.9 Python 文档字符串

    9.9 Python 文档字符串. 进入 Python 标准库所在的目录. 检查每个 .py 文件看是否有__doc__ 字符串, 如果有, 对其格式进行适当的整理归类. 你的程序执行完毕后, 应该会 ...

  8. BZOJ - 1941 Hide and Seek (kd树)

    题目链接 kd树模板题,求二维空间上的最远点/最近点. 对所有点建立kd树,分别查询每个点即可.单次查询期望时间复杂度$O(logn)$ #include<bits/stdc++.h> u ...

  9. strftime()和strptime的区别

    strftime()是把时间转成规定格式的字符串 strptime()是把字符串转成时间 转载:http://blog.csdn.net/caimouse/article/details/501986 ...

  10. Dawn 阿里开源前端开发构建工具

    Dawn 取「黎明.破晓」之意,原为「阿里云·业务运营团队」内部的前端构建和工程化工具,现已完全开源.它通过pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操作,简化 ...