我们在使用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. opencv:直方图操作

    示例程序: #include <opencv.hpp> using namespace cv; using namespace std; int main() { Mat src, dst ...

  2. linux下vim对于意外退出的文档的再次开启

    转载的: 1.对于同一个文件如果上次已经打开,而未关闭的情况下,又打开该文件进行编辑时,会出现如下提醒: 这是由于已经打开但未闭关的文件,会在其目录下出现一个.swp的文件,由于是属于隐藏文件,可以用 ...

  3. hp g6 2328tx 加装ssd 机械硬盘安装到光驱位置 问题小结

    惠普 g6 笔记本从13年入手至今,三年有余,性能啥的开始跟不上了,所有入手了一块ssd,闪迪(sanDisk)加强版 240G的固态硬盘,准备升下级.狗东下午下单,第二天早上7点多到的,把老硬盘换下 ...

  4. Some Interview Questions About Python

    一大波超链接即将袭来 Django认证流程 Python实现阶乘 Python文件处理 Python统计日志文件IP出现次数 JSON数据解析 JSON数据解析2 买卖股票的最佳时期 读取一个大文件比 ...

  5. 关于iframe和div窗口中ajax请求200状态时执行的回调问题

    上一篇说了在ajax回调里面处理iframe窗口的刷新问题,这一篇记录一下遇到的一个分别在iframe和div窗口中ajax请求200状态时执行的回调问题. 我们先来看一下ajax请求的写法(这里使用 ...

  6. golang包快速生成base64验证码

    base64Captcha快速生成base64编码图片验证码字符串 支持多种样式,算术,数字,字母,混合模式,语音模式. Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一.Base6 ...

  7. mysql-jdbc创建Statement与执行SQL

    使用JDBC创建Connection后,执行SQL需要先创建Statement Statement stmt = connection.createStatement(); 创建代码如下 public ...

  8. HihoCoder 1104 : Suzhou Adventure(树形DP)

    Suzhou Adventure 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi is taking an adventure in Suzhou n ...

  9. HohoCoder 1184 : 连通性二·边的双连通分量（+原理证明）

    1184 : 连通性二·边的双连通分量 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在基本的网络搭建完成后,学校为了方便管理还需要对所有的服务器进行编组,网络所的老师 ...

  10. matlab中的开方sqrt用牛顿迭代法实现的代码

    function kaifang = KAIFANG(a)g0=a/2;g1=(g0+a./g0)/2;for i=0 : 299g0=g1;g1=(g0+a./g0)/2;endkaifang = ...