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. Vue -- element-ui el-table 的合计在第一行显示并可点击

    使用element-ui el-table 中有这样一个需求,需要将合计放在表格内容的第一行,并且点击合计可跳转到其它页面! 框架中提供了合计的属性方法,这样可以进行数值求和及自定义求和,但是,合计那 ...

  2. java自带线程池和队列详细讲解，android中适用

    Java线程池使用说明 一简介 线程的使用在java中占有极其重要的地位,在jdk1.4极其之前的jdk版本中,关于线程池的使用是极其简陋的.在jdk1.5之后这一情况有了很大的改观.Jdk1.5之后 ...

  3. js严格模式下判断数据类型

    function isType(type) { return function (content) { let t = Object.prototype.toString.call(content). ...

  4. 在使用SSH+JPA开发中，ajax使用ObjectMapper类从后台向前台传值

    使用ObjectMapper对象的writeValue方法 ObjectMapper objectMapper = new ObjectMapper(); objectMapper.writeValu ...

  5. Linux常用命令last的使用方法详解

    http://www.jb51.net/article/120140.htm 最近在学习linux命令,学习到了last命令,发现很多同学对last命令不是很熟悉,last命令的功能列出目前与过去登入 ...

  6. 初学JavaScript之推測new操作符的原理

    本文是一篇原理推測的文章,假设有不准确的地方请指正, 原文:http://blog.csdn.net/softmanfly/article/details/34833931 JavaScript中构造 ...

  7. 一个关于 UIPickerView 的 bug

    首先,我下描写叙述一下bug的发生情况: 在使用UIPickerView实现选择城市的时候.出现这样一个Bug 1.在iOS 6的系统上 2.Picker的数据上省份一栏选择了"香港&quo ...

  8. spark中的广播变量broadcast

    Spark中的Broadcast处理 首先先来看一看broadcast的使用代码: val values = List[Int](1,2,3) val broadcastValues = sparkC ...

  9. HTML5开发移动web应用——Sencha Touch篇(8)

    DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...

  10. C++实现位数组

    当我们遇到大量整数排序时候为了节省内存空间我们能够考虑使用bit数组来实现,缺点是其仅仅适用于正整数. 思想: 在32位系统一个int类型占4个字节,按位来计算一个int类型能够记录32个数.因此,採 ...