目录

jsonp是什么

jsonp作用：解决跨域问题

为什么有跨域问题？

“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

这是一个用于隔离潜在恶意文件的重要安全机制。”

同源：相同协议，域名，端口号。

所以当ajax请求的地址，存在协议，域名，端口号不同时，则存在跨域问题，浏览器会报错。

jsonp时解决跨域的其中一种方法。

缺点：只支持GET请求而不支持POST等其它类型的HTTP请求

jsonp原理

  • ajax 请求无法访问不同源的地址
  • jsonp 不是一种新技术，可以说是一种小技巧，换种方式请求
  • 首先，script 标签可以引入不同源的地址，这样不会报错
  • 此时，如果 script 标签引入需要调用的后台数据接口，就可以拿到数据了，但是没有直接这么简单
  • 先定义获取数据成功后的操作函数，如下面的 success 函数
  • 使用 script 标签，引入需要调用的后台数据接口，参数必须附带，获取数据成功后的操作函数success

原生js使用jsonp

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <h3>控制台</h3>

    <script type="text/javascript">

        function success(data){

            console.log('数据：', data);

            // 之后对数据的处理

        }

    </script>

    <script src="http://localhost/aa.php?callback=success&param1=val1"></script>

</body>

</html>
<?php 
// aa.php

// 获取请求参数里面的callback，获取数据成功后调用的函数名

$callback = $_GET['callback'];

$param1 = $_GET['param1'];

$res = array(

    array("id"=>1, "name"=>"name1"),

    array("id"=>2, "name"=>"name2")

);

$res = json_encode($res);

echo $callback . "(" . $res . ")";

?>

解析：

  • 先定义 success 函数，对获取数据后的操作
  • 然后通过 script 标签引入后台数据接口
  • 我这里后端使用 php 写的
  • 先获取请求参数中 callback 的值，以及其他参数
  • 对数据进行获取，编码，拼接字符串，调用 success 函数。

jquery使用jsonp

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <h3>控制台</h3>

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

    <script type="text/javascript">

        $.ajax({

             type: "get",

             url: "http://localhost/aa.php?param1=val1",

             dataType: "jsonp",

             jsonp: "callback",

             // 传递给后台接口，用以获得jsonp回调函数名的参数名(一般默认为:callback)

             
　　　　　　　　jsonpCallback:"flightHandler",

             // 自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，

             // 也可以写"?"，jQuery会自动为你处理数据

             
　　　　　　　　success: function(data){

                console.log('数据：', data);

                // 之后对数据的处理

             },

             error: function(){

                alert('fail');

             }

         });

    </script>

</body>

</html>

ajax跨域jsonp —— javascript的更多相关文章

  1. 百度的一个Ajax跨域方法 JavaScript是没有域的限制

    baidu的通行证处理都是在二级域名passport.baidu.com中处理的,但是baidu很多地方登录都好像是用ajax处理的,他是怎么做的呢?研究了一下,发现一个小技巧. 在http://zh ...

  2. jQuery的ajax跨域 Jsonp原理

    1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...

  3. 【JS】AJAX跨域-JSONP解决方案（一）

    AJAX跨域介绍 AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面 由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求 ...

  4. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  5. 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  6. 由浅入深学习ajax跨域(JSONP)问题

    什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...

  7. jQuery $.ajax跨域-JSONP获取JSON数据（转载）

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  8. ajax跨域jsonp

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  9. Ajax 跨域，这应该是最全的解决方案了

    https://segmentfault.com/a/1190000012469713 前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了 ...

随机推荐

  1. 堆里面的分区：Eden，Survivor（from+ to），老年代，各自的特点

    堆里面分为新生代和老生代(java8取消了永久代,采用了Metaspace),新生代包含Eden+Survivor区,survivor区里面分为from和to区,内存回收时,如果用的是复制算法,从fr ...

  2. MySQL 获取格林时间

    SELECT *FROM 表面WHERE DATE_SUB( NOW( ), INTERVAL 3 MINUTE ) <= CONVERT_TZ( 时间字段, @@SESSION.time_zo ...

  3. 关于varchar的总结

    摘自:https://www.jianshu.com/p/c3e188440c67 大家都知道用 varchar 比用 char 类型更省空间(不过性能略有下降,char查询更快),相对于定长的 ch ...

  4. 使用EXSI创建虚拟机

    使用exsi创建虚拟主机之前需要确定好使用什么系统来创建虚拟主机,而本地电脑上的镜像服务器是无法直接使用的,我们需要先将镜像上传到服务器的存储器上,然后才能在提供给虚拟服务器使用,如何替换呢,参考下方 ...

  5. TODO: Java虚拟机 初始化过程

    Java虚拟机 初始化过程: 参考: https://www.cnblogs.com/bhlsheji/p/4017816.html 参考:https://blog.csdn.net/boling_c ...

  6. python 逻辑运算符and or

    Python中逻辑运算符与C.C++.Golang等语言不太一样. 简单记录下. 1. 都是真或第一个真,第二个假 >>> a = 1 >>> b = 2 > ...

  7. Ubuntu系统下各种报错杂烩（持续更新）

    在Github时报Permanently added the RSA host key for IP address '192.30.252.128' to the list of known hos ...

  8. Kettle使用教程之Job使用

    1.Kettle的Job使用十分简单,这里也只是演示比较简单的操作,创建Job 2.点击转换,然后点击浏览,选择转换对象 3.执行按钮,运行该转换 4.如果需要长期的进行定时转换,可以在Job中的st ...

  9. 解决kubeadm部署kubernetes集群镜像问题

    kubeadm 是kubernetes 的集群安装工具,能够快速安装kubernetes 集群.kubeadm init 命令默认使用的docker镜像仓库为k8s.gcr.io,国内无法直接访问,需 ...

  10. c++ 引用 日期&时间

    日期时间[点击进入看吧,没啥可后期拓展的] 引用 引用变量是一个别名,也就是说,它是某个已存在变量的另一个名字.一旦把引用初始化为某个变量,就可以使用该引用名称或变量名称来指向变量. 一.引用和指针的 ...