JSONP 教程

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

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

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

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

JSONP 应用

1. 服务端JSONP格式数据

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

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

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

服务端文件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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <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.rm5u.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

</body>

</html>

jQuery 使用 JSONP

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

<!DOCTYPE html>

<html>

<head>

	<title>JSONP 实例</title>

	<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>

</head>

<body>

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

<script>

$.getJSON("http://www.rm5u.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>
 

JSON 使用 教程的更多相关文章

  1. Swift语言中如何使用JSON数据教程

    这是一篇翻译文章,原文出处:http://www.raywenderlich.com/82706/working-with-json-in-swift-tutorial Swift语言中如何使用JSO ...

  2. .net处理JSON简明教程

    .net处理JSON简明教程 Json.Net是.net中的一种流行的高性能的JSON框架. 特点 灵活的JSON序列化转化.net对象为JSON字符串.和把JSON字符串转换为.net对象. 手动读 ...

  3. Asp.Net Newtonsoft.Json使用教程

    json序列化和反序列化的使用教程 实体 public class wendaModel { private string _title; private string _cons; public s ...

  4. Dart 和 Flutter 使用json_annotation和json_serializable来处理json数据教程

    在学习fultter的时候突然想到如何去处理从服务器获取的json或者将app中的对象数据转换成json上传给服务器 于是研究一下dart对json数据的处理 首先需要依赖下面的第三方库(这里要强调下 ...

  5. .Net使用Newtonsoft.Json.dll(JSON.NET)对象序列化成json、反序列化json示例教程

    JSON作为一种轻量级的数据交换格式,简单灵活,被很多系统用来数据交互,作为一名.NET开发人员,JSON.NET无疑是最好的序列化框架,支持XML和JSON序列化,高性能,免费开源,支持LINQ查询 ...

  6. JSON入门教程

    尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 ...

  7. JSON.NET 教程（一）

    下载地址:http://www.newtonsoft.com/json 参考官网文档:http://www.newtonsoft.com/json/help/html/SerializingJSON. ...

  8. json基础教程|理解Json

    一. 在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式.这一期讨论一种有用的数据格式 JavaScript Object Notation(JSON),以及如何使用它更轻松地 ...

  9. jquery json 格式教程

    介绍 我们知道AJAX技术能够使得每一次请求更加迅捷,对于每一次请求返回的不是整个页面,也仅仅是所需要返回的数据.通常AJAX通过返回XML格式的数据,然后再通过客户端复杂的JavaScript脚本解 ...

随机推荐

  1. FunDA（9）－ Stream Source：reactive data streams

    上篇我们讨论了静态数据源(Static Source, snapshot).这种方式只能在预知数据规模有限的情况下使用,对于超大型的数据库表也可以说是不安全的资源使用方式.Slick3.x已经增加了支 ...

  2. 非常好用的@ResponseBody注解

    AJAX的写法: ajax接收json格式: ①如果ajax接收的是text dataType:"text", var json = eval("(" + da ...

  3. 解决chrome无法启用印象笔记-剪藏功能

        新版Chrome浏览器安全的问题,导致从印象笔记官网下载的rxs(crx)文件无法直接通过drap&drop功能添加功能块.可以将rxs(crx)文件后缀名改成rar格式,然后解压,通 ...

  4. 【xsy1058】 单词 乱搞

    题目大意:给你$n$个长度为$m$的字符串,字符集仅为{x,y,z}三个字符,定义两个字符串$(s_i,s_j)$的相似度为$\sum_{k=1}^{m} [s_i[k]==s_j[k]]$. 从$0 ...

  5. 希尔排序的理解和实现(Java)

    希尔排序原理 希尔排序(shell sort)这个排序方法又称为缩小增量排序,是1959年D·L·Shell提出来的. 该方法的基本思想是:设待排序元素序列有n个元素,首先取一个整数increment ...

  6. javascript数据结构与算法--二叉树（插入节点、生成二叉树）

    javascript数据结构与算法-- 插入节点.生成二叉树 二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 /* *二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 * * ...

  7. 如何解决jade标签没有闭合，如input

    最近用jade模板引擎编写html时发现input编译输出为<input>,而我想要的效果为<input/>, 如何解决呢,这时我们可以这样写: input/     ---& ...

  8. js的事件学习笔记

    目录 0.参考 1.事件流 冒泡传播 事件捕获 2.事件绑定--onclick接口 onclick类的接口,只能注册一个同类事件 onclick类的接口,使用button.onclick = null ...

  9. (转)MySQL慢查询日志总结

    慢查询日志概念 原文:http://www.cnblogs.com/kerrycode/p/5593204.html MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应 ...

  10. Java之IO(一)InputStream和OutputStream

    转载请注明源出处:http://www.cnblogs.com/lighten/p/6964702.html 1.前言 计算机的IO操作一直都是比较重要的一环,IO顾名思义,就是输入输出流.不管是磁盘 ...