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. 监控Weblogic计数器

  2. ContextLoaderListener的说明

    ContextLoaderListener是配置在web.xml里的,具体如下: <!-- ContextLoaderListener是个监听器,用来监听容器启动事件,监听到容器启动事件后 其c ...

  3. 2015 Multi-University Training Contest 10 hdu 5407 CRB and Candies

    CRB and Candies Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  4. 转载：手游安全破“黑”行动：向黑产业链说NO

    目前的手游市场已被称为红海.从业界认为的2013年的“手游元年”至今,手游发展可谓是既经历了市场的野蛮生长,也有百家争鸣的战国时代.如今,手游市场竞争已趋白热化,增长放缓.但移动互联网的发展大势之下, ...

  5. socket编程之二：两种链接类型tcp和udp

    前面一篇文章说到了一些计算机网络的基础知识.引入了socket.从这节開始,就进入正题了. 一 概述 TCP:Transimission Control Protocol传输控制协议. UPD:Use ...

  6. Geeks - Range Minimum Query RMQ范围最小值查询

    使用线段树预处理.能够使得查询RMQ时间效率在O(lgn). 线段树是记录某范围内的最小值. 标准的线段树应用. Geeks上仅仅有两道线段树的题目了.并且没有讲到pushUp和pushDown操作. ...

  7. java基础——各种变量你晕了不？

    java 中的变量大致分为 成员变量 和 局部变量 两大类. 成员变量:     在类体里面定义的变量称为成员变量.     假设该成员变量有 static keyword修饰.则该成员变量称为 静态 ...

  8. Create a Visual C++ Wizard for Visual Studio 2005

    from:http://www.codeguru.com/cpp/v-s/devstudio_macros/customappwizards/article.php/c12775/Create-a-V ...

  9. 检测Nginx访问成功(状态码200)的IP及次数

    cat  access.log |awk '{print $1,$9}'|grep '200'|sort | uniq -c|awk '{print $2" "$1}'

  10. 关于udebug的使用

    关于udebug的使用 特别强调: 转载于此 当你做国外OJ的题目时,总是不知道有什么问题,用题解打对拍都发现不出来,看到某道可恶美好的英文题目WA掉时,又不能下载样例时,会觉得很无奈吧.我们可以使用 ...