Javascript的jsonp原理
 
首先JSON是一种基于文本的数据交换方式，或者叫做数据描述格式
当一个网页在请求JavaScript文件时则不受是否跨域的影响，凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>
所以我们这里运用了script标签的跨域能力，让它用一个callback函数包裹着一段JSON格式的数据，当该数据返回到前端页面的时候，我们再执行这个函数就可以把数据读取出来
前端代码
jsonp.html
<html>

    <head>

        <meta charset="UTF-8">

        <title>Wsscat's jsonp</title>

    </head>

    <body>

        <button onclick="jsonpServer('jsonp.php')">JSONP</button>

    </body>

    <script>

        function jsonpServer(url) {

            var script = document.createElement("script");

            script.setAttribute("type", "text/javascript");

            script.setAttribute("src", url);

            document.body.appendChild(script);

        }

        function JSON_CALLBACK(data) {

            console.log(data);

        }

    </script>

</html>

　　

后端代码
jsonp.php
<?php

$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';

$data = "JSON_CALLBACK(" . $data . ")";

echo $data;

?>

　　

jQuery的jsonp方法
 
type：请求方式 GET/POST
url:请求地址
async:布尔类型，默认为true 表示请求是否为异步，如果为false表示为同步。
dataType：返回的数据类型
jsonp：传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback：自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success：调用成功执行的函数
error：异常处理函数
js代码
$.ajax({

            url:'index.php',

            type:'get',

            dataType:'jsonp',

            //jsonp:'JSON_CALLBACK',

            jsonpCallback:'JSON_CALLBACK',

            success:function(data){

                console.log(data)

            }

        })
php代码
<?php

    $data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';

    $data = "JSON_CALLBACK(" . $data . ")";

    echo $data;

?>

　　

Javascript的jsonp原理的更多相关文章

  1. Ajax跨域：Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  2. javascript笔记——jsonp

    上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS.   那这篇博客就介绍JSONP方式.   JSONP原理   在同源策略下,在某个服务器下的页面是无法获取到该 ...

  3. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  4. jsonp原理，封装，应用（vue项目）

    jsonp原理 JSON是一种轻量级的数据传输格式. JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 ...

  5. 面试汇总——知道什么是同源策略吗？那怎么解决跨域问题？知道 JSONP 原理吗？

    本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...

  6. 简单透彻理解JSONP原理及使用

    首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中.JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进 ...

  7. JSONP原理及jQuery中的使用

    JSONP原理   JSON和JSONP   JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息.   JSONP(JSON ...

  8. 跨域JSONP原理及调用详细演示样例

      上篇博客介绍了同源策略和跨域訪问概念,当中提到跨域经常使用的基本方式:JSONP和CORS.   那这篇博客就介绍JSONP方式.   JSONP原理   在同源策略下,在某个server下的页面 ...

  9. 跨域篇--JSONP原理

    一篇文章让你明白 jsonp原理详解 什么是JSONP? 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自 ...

随机推荐

  1. C和C++ const的声明差异

    当在C源代码文件中将变量声明为const时,可以通过以下方式实现: const int i = 2; 然后,可以在另一个模块中使用此变量,如下表示: extern const int i; 但若要获取 ...

  2. Elasticsearch---基于scroll技术滚动搜索大量数据

    如果一次性要查出来比如10万条数据,那么性能会很差,此时一般会采取用scoll滚动查询,一批一批的查,直到所有数据都查询完处理完 使用scoll滚动搜索,可以先搜索一批数据,然后下次再搜索一批数据,以 ...

  3. 计算机-禁止USB服务

    接到一个任务,禁止集团内所有电脑的USB接口进行文件拷贝,但不能妨碍打印机.鼠标键盘.扫描仪.加密狗等等一切需要USB接口工作的外部设备. 纠结了,这不摆明了让我蛋疼吗? 不过,疼归疼,办法总是要想滴 ...

  4. C#中的Socket

    ];//用于缓存客户端所发送的信息,通过socket传递的信息必须为字节数组 IPEndPoint ipep = new IPEndPoint(IPAddress.Any, 9050);//本机预使用 ...

  5. Python学习笔记-小记

    1.字符串string 推断一个字符(char)是数字还是字母 str.isalpha() #推断是否为字母 str.isdigit() #推断是否为数字 推断一个字符串是否为空 if not str ...

  6. Java关键字整理之一

    变量.函数.类的前面都可能会用到关键字,最常见的 private.public.protected.default 这四个修饰符的访问权限如下表: -------------------------- ...

  7. hdu5319 Painter（模拟）

    题目链接:点击打开链接 题目大意:给一个矩形.有两把刷子,一把刷红色,一把刷蓝色,红色的方向是东南,蓝色的方向是西北,红色加蓝色等于绿色,如今已知这面墙当前的状态.求从白墙到这个状态最少刷了多少次. ...

  8. JSP页面标签

    1.EL表达式中empty的用法 EL表达式中empty的用法 <c:if test="${! empty key}">${key}</c:if> < ...

  9. python的range()函数使用方法

    python的range()函数使用非常方便.它能返回一系列连续添加的整数,它的工作方式类似于分片.能够生成一个列表对象. range函数大多数时常出如今for循环中.在for循环中可做为索引使用.事 ...

  10. inconsistent line endings 解决方法

     I'm using Unity 3D in combination with Visual Studio 2008 on a Windows 7 64 bit system. When savi ...