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. 操作实践题 - HTML 列表综合应用

    通过对列表的综合应用,编写如下效果网页: 解答: <html> <head> <title>操作实践题</title> <meta http-eq ...

  2. java.lang.IllegalStateException: BeanFactory not initialized or already closed - call 'refresh' before accessing beans via the ApplicationContext

    spring的项目中有时候会报错:java.lang.IllegalStateException: BeanFactory not initialized or already closed - ca ...

  3. jquery, jquery-ui, requirejs, bootstrap 的关系理解

    jquery 是 基于 javascript 的一个语法衍生,更方便操作dom, 事件,css 整体来说更好用,更简洁. jquery-ui 是基于 jquery 实现的各种更好看,交互更友好的的界面 ...

  4. Spring MVC+MySQL保存中文变成乱码

    环境:MySQL,Spring MVC3.2.0,jQuery v2.0.3,使用JdbcTemplate访问数据库,相当于全套Spring解决方案. 现象 直接使用表单POST,或者使用jQuery ...

  5. Jmeter做并发测试（设置集合点）

    集合点:让所有请求在不满足条件的时候处于等待状态. 如:我集合点设置为50,那么不满足50个请求的时候,这些请求都会集合在一起,处于等待状态,当达到50的时候,就一起执行.从而达到并发的效果. 那么J ...

  6. day 44 django 学习入门

    前情提要: 终于学到了Django  ...古川小姐姐好流b .....7天学完.....脑壳疼..为了出了这个小火箭.. 详细参考官网. https://www.django.cn/ 中文网站 一: ...

  7. POJ 1051

    #include <iostream> #include <algorithm> #include <string> #define MAXN 27 using n ...

  8. [WiX]Component Rules 101

    原文:http://robmensching.com/blog/posts/2003/10/18/component-rules-101 I've been debating with myself ...

  9. dubbo学习(1)--简单的入门搭建实例

    转载请注明源文出处:http://www.cnblogs.com/lighten/p/6828026.html 1 简介 dubbo是一个分布式服务框架,由阿里巴巴的工程师开发,致力于提供高性能和透明 ...

  10. 可调试Windows服务框架

    参考: Build A Windows Service Framework 新建ServiceFramework类库,项目中需引用: using System.Configuration.Instal ...