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. 为DK2应用程序迁移到Oculus CV1做好准备!

    为DK2应用程序迁移到Oculus CV1做好准备! 本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/arti ...

  2. linux下sort对中文排序

    http://blog.csdn.net/luoleicn/article/details/6162358 设置: export LC_ALL=C;

  3. CF802G Fake News (easy)

    CF802G Fake News (easy) 题意翻译 给定一个字符串询问能否听过删除一些字母使其变为“heidi” 如果可以输出“YES”,不然为“NO” 题目描述 As it's the fir ...

  4. spring的启动过程就是创建ioc容器的过程

    1. spring简介 spring的最基本的功能就是创建对象及管理这些对象之间的依赖关系,实现低耦合.高内聚.还提供像通用日志记录.性能统计.安全控制.异常处理等面向切面的能力,还能帮我们管理最头疼 ...

  5. 推荐几款VisualStudio的插件

    继前几天推荐了一款转换vs插件的插件后,借着安装VS2013之际,把我比较喜欢的几个插件继续推荐一下. C# Outline 2013 2013 C#的代码折叠最小只能到函数级,不像C++那样可以折叠 ...

  6. 【Swift】学习笔记(六)——函数

    函数  懂编程语言的来说这个是最主要的了,不论什么语言都有函数这个概念.函数就是完毕特定任务的独立代码块. 函数怎么创建: 1.创建一个无參无返回值的函数(实际上全部的函数都有返回值,这个函数返回vo ...

  7. svn 服务器的搭建

     SVN服务器运行模式:模式1:svn服务器单独运行  监听: 3690端口    访问: svn://IP模式2: svn 服务器+ apache   : 80 端口  访问: http://IP  ...

  8. UVA - 11021 - Tribles 递推概率

    GRAVITATION, n.“The tendency of all bodies to approach one another with a strengthproportion to the ...

  9. 关于Win 10的隐私保护政策

    近日.有人责备Win10收集用户信息,事实上这样的指责并不公平,比方:"Privacy Groups Claim Microsoft Uses Windows 10 as Big Broth ...

  10. Oracle Access和filter的区别

    在查看Oracle执行计划的时候经常会遇到Access和filter,脑容量太小,总是分不清两者的区别...稍作整理. Access:表示对应的谓词条件会影响数据的访问路径(是按照索引还是表) Fil ...