目录

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. 20175215 2018-2019-2 第七周java课程学习总结

    第八章 常用实用类 8.1 String类 Java专门提供了用来处理字符序列的String类.String类在java.lang包中,由于java.lang包中的类被默认引入,因此程序可以直接使用S ...

  2. 五、smarty模板继承特性

    1.如何去实现模板之间的继承 继承是发生在模板之间的事,和PHP程序没有关系的 方法一: 在模板中使用<{extends}>函数实现模板的继承 <{extends file=”模板文 ...

  3. 解决phpmyadmin出现: Maximum execution time of 300

    在mysql用phpmyadmin导入数据的时候出现: Fatal error: Maximum execution time of 300 seconds exceeded in ... 上网查了很 ...

  4. 微信小程序中的不同场景，不同的判断，请求的时机

    本来5月1之前就想写一下一篇关于小程序不同场景下发送ajax请求的问题,但是放假的前一天,出了个大bug,就是因为我修改不同的场景下执行不同的逻辑造成的 1.首先,在小程序里,微信做了很多的缓存,我们 ...

  5. Java Array数组 遍历 四种方式（包含 Lambda 表达式遍历）

    示例代码如下: package com.miracle.luna.lambda; import java.util.Arrays; /** * @Author Miracle Luna * @Date ...

  6. java：LeakFilling（JS,JQ）

    1.<a href="javascript:void(0)" onclick="dele();"> a标签不使用链接的时候,必须加javascrip ...

  7. 2018-12-10 发布 vue全家桶实现的商城web-app，真实数据接口开发

    项目地址:https://github.com/Rosen97/web-shop.git 博客地址:https://segmentfault.com/a/1190000017323841

  8. （转）GIS中的4D产品（DLG、DRG、DEM、DOM）

    DLG 数字线划地图(DLG, Digital Line Graphic):是与现有线划基本一致的各地图要素的矢量 数据集,且保存各要素间的空间关系和相关的属性信息. 在世字测图中,最为常见的产品就是 ...

  9. 拉格朗日乘法与KKT条件

    问题的引出 给定一个函数\(f\),以及一堆约束函数\(g_1,g_2,...,g_m\)和\(h_1,h_2,...,h_l\).带约束的优化问题可以表示为 \[ \min_{X \in R^n}f ...

  10. neo4j3.0多数库切换

    动机 类似与关系型数据库,创建了多个数据库 想要像访问关系型数据库那样来可以无缝切换多个数据库 然而,在neo4j 3.0都暂时没有办法做到:每次启动neo4j,它只能读取一个数据库.比如,现在有两个 ...