JSONP 教程

本章节我们将向大家介绍 JSONP 的知识。

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

JSONP 应用

1. 服务端JSONP格式数据

如客户想访问 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假设客户期望返回JSON数据：["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码为：

jsonp.php 文件代码

<?php

header('Content-type: application/json');

//获取回调函数名

$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);

//json数据

$json_data = '["customername1","customername2"]';

//输出jsonp格式的数据

echo $jsoncallback . "(" . $json_data . ")";

?>

2. 客户端实现 callbackFunction 函数

<script type="text/javascript">

function callbackFunction(result, methodName)

{

    var html = '<ul>';

    for(var i = 0; i < result.length; i++)

    {

        html += '<li>' + result[i] + '</li>';

    }

    html += '</ul>';

    document.getElementById('divCustomers').innerHTML = html;

}

</script>

页面展示

<div id="divCustomers"></div>

客户端页面完整代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>JSONP 实例</title>

</head>

<body>

    <div id="divCustomers"></div>

    <script type="text/javascript">

function callbackFunction(result, methodName)

        {

            var html = '<ul>';

            for(var i = 0; i < result.length; i++)

            {

                html += '<li>' + result[i] + '</li>';

            }

            html += '</ul>';

            document.getElementById('divCustomers').innerHTML = html;

        }

</script>

<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

</body>

</html>

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JSONP 实例</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>

</head>

<body>

<div id="divCustomers"></div>

<script>

$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {

    var html = '<ul>';

    for(var i = 0; i < data.length; i++)

    {

        html += '<li>' + data[i] + '</li>';

    }

    html += '</ul>';

    $('#divCustomers').html(html);

});

</script>

</body>

</html>

JSONP 教程的更多相关文章

  1. 【04】JSONP 教程

    JSONP 教程 Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的域 ...

  2. JSONP的诞生、原理及应用实例

    问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...

  3. 利用Jsonp实现跨域请求，spring MVC+JQuery

    1 什么是Jsonp? JSONP(JSON with Padding)是数据格式JSON的一种"使用模式",可以让网页从别的网域要数据.另一个解决这个问题的新方法是跨来源资源共享 ...

  4. JSON 使用 教程

    JSONP 教程 本章节我们将向大家介绍 JSONP 的知识. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...

  5. JSONP数据调用

     json 是一种数据格式  jsonp 是一种数据调用的方式. 什么是JSONP          为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是 ...

  6. JSONP（转）

    1 什么是Jsonp? JSONP(JSON with Padding)是数据格式JSON的一种“使用模式”,可以让网页从别的网域要数据.另一个解决这个问题的新方法是跨来源资源共享. 由于同源策略,一 ...

  7. VUE -- JSONP的诞生、原理及应用实例

    问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...

  8. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  9. JSONP的使用示例（以及jquery版jsonp）超简单

    前言: 平时工作中很少跨域,很少用到jsonp,但是几乎每次面试都会被问到这个问题.很崩溃. 菜鸟教程上的jsonp教程就很好.这里做个笔记,自己捋一遍. Jsonp(JSON with Paddin ...

随机推荐

  1. Java 反射机制系列

    http://www.cnblogs.com/KingIceMou/category/1034898.html

  2. 常见手机的useragent

    设备 系统 浏览器 User-Agent 华为Mate 10 Pro Android QQ浏览器 Mozilla/5.0 (Linux; U; Android 8.1.0; zh-cn; BLA-AL ...

  3. easyUI slider滑块，在加载出来后，easyUI slider滑块禁用方法

    easyUI slider滑块禁用 如下图easyUI slider滑块,在加载出来后,需要禁止拉动 easyUI slider滑块禁用方法 //禁用$(s1).slider({ disabled:t ...

  4. Ubuntu之tar与curl操作

    1,压缩备份: tar cfvj /tmp/test.tar.bz2  /tmp/test tar cfvz /tmp/test.tar.gz  /tmp/test tar xfvj /tmp/tes ...

  5. django框架--中间件系统

    目录 零.参考 一.中间件的基本理解 二.中间件的系统定位 三.中间件的配置 四.中间件的执行流程 五.中间件与装饰器之间的思考 六.中间件的应用场景 七.内置中间件 八.总结 零.参考 https: ...

  6. windows server 2016安装docker

    最近微软发布了windows server 2016,并原生支持docker,本文通过一系列的步骤,来学习怎么在windows server 2016安装docker. 1.下载 windows se ...

  7. windows下如何下载并安装Python

    1.打开Python官网,点download中的windows(或者打开网址https://www.python.org/downloads/windows/) 2.下载exe后缀的可执行文件,根据自 ...

  8. 06-python中的装饰器

    java类中, 有一系列的装饰器, 尤其对文件的操作, python的装饰器比较简单, 直接上代码 #!/usr/bin/env python3 #coding:utf- ''' python的装饰器 ...

  9. spring中获取applicationContext

    常用的5种获取spring 中bean的方式总结: 方法一:在初始化时保存ApplicationContext对象代码:ApplicationContext ac = new FileSystemXm ...

  10. ASP.NET Core 中的缓存

    目录 缓存的基本概念 缓存原理 缓存设计 分布式缓存 Memcache 与 Redis 的比较 缓存穿透,缓存击穿,缓存雪崩解决方案 数据一致性 使用内置 MemoryCache 使用分布式缓存 Re ...