目录

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. leetcode-easy-others-118 Pascal's Triangle

    mycode   16.47% class Solution(object): def generate(self, numRows): """ :type numRow ...

  2. 解决 Ubuntu 18.10 使用较新的独立显卡输出无法初始化图形界面并配置深度学习开发环境

    原文地址:解决 Ubuntu 18.10 使用较新的独立显卡输出无法初始化图形界面并配置深度学习开发环境 0x00 配置 硬件 OS: Ubuntu 18.10 Base Board: ASUS WS ...

  3. 解决ssh链接慢问题

    1,ssh -v root@ip 2,查看哪里卡住了 一般情况就是卡在debug1: SSH2_MSG_SERVICE_ACCEPT received 3,如果是上面卡住了 修改/etc/ssh/ss ...

  4. 【翻译】WPF应用程序模块化开发快速入门（使用Prism+MEF）

    编译并运行快速入门 需要在VisualStudio 2010上运行此快速入门示例 代码下载:ModularityWithMef.zip 先重新生成解决方案 再按F5运行此示例 说明: 在此快速入门示例 ...

  5. oracle 12 安装

    oracle 12 第二版本安装 下载地址  https://www.oracle.com/technetwork/cn/middleware/webcenter/content/downloads/ ...

  6. QDataSet – 如何比较两个数据集内容的差异

    QDataSet 提供了两个函数来比较两个数据集的差异,并将结果保存到第三个数据集. procedure Intersect(ASource1, ASource2: TQDataSet; AField ...

  7. nginx报错：nginx: [emerg] unknown directive in /etc/nginx/conf.d/test.conf:4

    nginx报错:nginx: [emerg] unknown directive  in /etc/nginx/conf.d/test.conf:4 解决: 第四行出现了 tab 空格 , 换成正常的 ...

  8. java：CSS（定位，组合选择符，边距，Float，Table的样式，显示和隐藏，换行，盒子模型，iframe和frameset框架）

    1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  9. 依赖注入——angular

    在Angular中创建一个对象时,需要依赖另一个对象,这是代码层的一种依赖关系,当这种依赖被声明后,Angular通过injector注入器将所依赖的对象进行注入操作. 一.依赖注入的原理 看下面的示 ...

  10. LeetCode.949-给定数字的最大时间(Largest Time for Given Digits)

    这是悦乐书的第363次更新,第391篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第225题(顺位题号是949).给定4个整数组成的数组,返回最大的24小时时间. 最小的 ...