我们在使用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. Win7系统搭建WiFi热点详细攻略

    (转自:http://blog.csdn.net/gisredevelopment/article/details/16113889) 一.如果你之前没有在笔记本上搭建过WiFi,那么恭喜你,你的笔记 ...

  2. TCPL学习笔记：4-12以及4-13。关于使用递归的问题。

    4-12.写一个函数itoa,通过递归调用将整数转换成为字符串. #include <stdio.h> #include <stdlib.h> void Itoa(int nu ...

  3. Git和SVN之间的区别

    如果你在读这篇文章,说明你跟大多数开发者一样对GIT感兴趣,如果你还没有机会来试一试GIT,我想现在你就要了解它了. GIT不仅仅是个版本控制系统,它也是个内容管理系统(CMS),工作管理系统等.如果 ...

  4. 1 秒杀系统模拟基础实现，使用DB实现

    本文根据动脑学院的一节类似的课程,改编实现.分别使用DB和redis来完成. 隔离的解释 业务隔离:将秒杀业务独立出来,尽量不与其他业务关联,以减少对其他业务的依赖性.譬如秒杀业务只保留用户id,商品 ...

  5. 9.9 Python 文档字符串

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

  6. PS基础教程[4]如何载入笔刷

    笔刷是我们制作图片时的一个很好的工具,能够快速方便的帮助我们制作出很多现有的效果,所以我们都会制作很多的笔刷保存起来载入到PS中方便我们使用.本次系类经验的第四篇就来介绍一下笔刷的导入. 方法 1.笔 ...

  7. 剑指offer-第六章面试中的各项能力（翻转单词的顺序VS左旋转字符串）

    //题目1:翻转单词顺序例如“Hello world!”翻转后为world! Hello. //思路:首先翻转整个字符串,然后再分别翻转每个单词. //题目2:左旋转字符串,是将字符串的前面几个(n) ...

  8. SqlServer 数据库负载均衡【转】

    负载均衡集群是由一组相互独立的计算机系统构成,通过常规网络或专用网络进行连接,由路由器衔接在一起,各节点相互协作.共同负载.均衡压力,对客户端来说,整个群集可以视为一台具有超高性能的独立服务器. 1. ...

  9. 转载Verilog乘法器

    1. 串行乘法器 两个N位二进制数x.y的乘积用简单的方法计算就是利用移位操作来实现. module multi_CX(clk, x, y, result); input clk; input [7: ...

  10. 如何禁用 FastAdmin 双击编辑功能？

    如何禁用 FastAdmin 双击编辑功能? 新版 (1.0.0.20180513_beta)增加一个新功能,可以禁止双击编辑. 很多人还是喜欢双击选中复制,默认的双击编辑还是不怎么习惯. 可以以下文 ...