目录

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. grep家族、sed、awk

    一.grep家族 grep是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来. 在上一次的博客中已经使用过egrep通过正则表达式来匹配正确IP地址,这里的用法就不多说了. f ...

  2. docker容器无法删除——状态Dead

    问题:由于容器挂载数据卷,无法直接删除. 解决: 先查出ID 进行杀掉,然后再删除. . 搞定

  3. spark 笔记 2： Resilient Distributed Datasets: A Fault-Tolerant Abstraction for In-Memory Cluster Computing

    http://www.cs.berkeley.edu/~matei/papers/2012/nsdi_spark.pdf  ucb关于spark的论文,对spark中核心组件RDD最原始.本质的理解, ...

  4. vue中limitBy，filterBy，orderBy的用法

    1.limitBy的用法 <body> <div id="box"> <ul> <li v-for="val in arr | ...

  5. 方差分析（python代码实现）

    python机器学习-乳腺癌细胞挖掘(欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章) https://study.163.com/course/introduction ...

  6. leetcode 103二叉树的锯齿形层次遍历

    与102相比就增加了flag,用以确定要不要进行reverse操作 reverse:STL公共函数,对于一个有序容器的元素reverse ( s.begin(),s.end() )可以使得容器s的元素 ...

  7. kotlin之基本数据类型

    数据类型                       占用字节数 Double 8 Float 4 Long 4 Int 4 Short 2 Byte 1 数据类型之间的转换 toByte():转换为 ...

  8. 在java poi导入Excel通用工具类示例详解

    转: 在java poi导入Excel通用工具类示例详解 更新时间:2017年09月10日 14:21:36   作者:daochuwenziyao   我要评论   这篇文章主要给大家介绍了关于在j ...

  9. Android SmartRefreshLayout 使用

    SmartRefreshLayout是一款实现上拉加载.下拉刷新的控件,网络上相关内容也很多,在这里简单总结下我的使用 使用SmartRefreshLayout需导入依赖:implementation ...

  10. select去掉默认样式

    今天遇到的问题,并在这里做一下记录和总结 去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px ...