目录

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. kotlin实现流读取

    在Java对流的读取是下面的那样,当前不要忘记流的关闭close. // java 代码void someFunc(InputStream in, OutputStream out) throws I ...

  2. C++入门经典-例6.3-字符串之未使用字符串结束符“\0”和使用字符串结束符“\0”的区别

    1:为字符串数组赋值的方式有两种,即数组元素逐一赋值和使用聚合方式赋值. 为数组元素逐一赋值.例如: pWord[0]='H'; 使用聚合方式赋值如: char pWord[]={'H','E','L ...

  3. 谈谈DevOps和TestOps个人见解

    首先是百度百科和维基百科的解释对DevOps的说明: https://baike.baidu.com/item/devops DevOps是开发运维,而TestOps则测试运维.DevOps(Deve ...

  4. orcal解决锁表

    1.查看历史运行纪录 select * from dba_jobs_running: 2查看锁住的sid和pid select s.sid,s.serial# fromv$session s wher ...

  5. leetcode 94二叉树的中序遍历

    递归算法C++代码: /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; ...

  6. python文件读写和异常

    1,文本文件 普通打开 f.open f.close def main(): f = None try: f = open('致橡树.txt', 'r', encoding='utf-8') prin ...

  7. Ruby小白入门笔记之<个人记录档>

    书写缘由 快两年的JAVA开发,因为来到一家新公司,产品需要用Ruby开发,故此才有了这从头开始,一入编程深似海啊...... 因为入门时是JAVA,所以理念跟规范早已形成,故此感觉突然采用Ruby编 ...

  8. nagios配置邮件告警

    1.编辑配置文件 vim /etc/nagios/objects/contacts.cfg增加如下内容:define contactgroup{ contactgroup_name admins al ...

  9. RedHat 5下安装gcc编译环境的具体步骤

    RedHat 5下安装gcc编译环境的具体步骤 在RHEL5系统中默认不安装linux系统中的开发编译环境(gcc),此软件包安装时依赖其他包较多 在以前使用RHEL4时可以通过如下命令安装: rpm ...

  10. pycryptodom的源码安装

    1.去网站https://pypi.python.org/pypi/pycryptodome/#downloads下载 2.python setup.py build -> python set ...