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 使用教程的更多相关文章

Swift语言中如何使用JSON数据教程
这是一篇翻译文章,原文出处:http://www.raywenderlich.com/82706/working-with-json-in-swift-tutorial Swift语言中如何使用JSO ...
.net处理JSON简明教程
.net处理JSON简明教程 Json.Net是.net中的一种流行的高性能的JSON框架. 特点灵活的JSON序列化转化.net对象为JSON字符串.和把JSON字符串转换为.net对象. 手动读 ...
Asp.Net Newtonsoft.Json使用教程
json序列化和反序列化的使用教程实体 public class wendaModel { private string _title; private string _cons; public s ...
Dart 和 Flutter 使用json_annotation和json_serializable来处理json数据教程
在学习fultter的时候突然想到如何去处理从服务器获取的json或者将app中的对象数据转换成json上传给服务器于是研究一下dart对json数据的处理首先需要依赖下面的第三方库(这里要强调下 ...
.Net使用Newtonsoft.Json.dll(JSON.NET)对象序列化成json、反序列化json示例教程
JSON作为一种轻量级的数据交换格式,简单灵活,被很多系统用来数据交互,作为一名.NET开发人员,JSON.NET无疑是最好的序列化框架,支持XML和JSON序列化,高性能,免费开源,支持LINQ查询 ...
JSON入门教程
尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 ...
JSON.NET 教程（一）
下载地址:http://www.newtonsoft.com/json 参考官网文档:http://www.newtonsoft.com/json/help/html/SerializingJSON. ...
json基础教程|理解Json
一. 在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式.这一期讨论一种有用的数据格式 JavaScript Object Notation(JSON),以及如何使用它更轻松地 ...
jquery json 格式教程
介绍我们知道AJAX技术能够使得每一次请求更加迅捷,对于每一次请求返回的不是整个页面,也仅仅是所需要返回的数据.通常AJAX通过返回XML格式的数据,然后再通过客户端复杂的JavaScript脚本解 ...

随机推荐

SQL语句常见优化十大案例
1.慢SQL消耗了70%~90%的数据库CPU资源: 2.SQL语句独立于程序设计逻辑,相对于对程序源代码的优化,对SQL语句的优化在时间成本和风险上的代价都很低:3.SQL语句可以有不同的写法: 1 ...
二叉堆的实现(数组）——c++
二叉堆的介绍二叉堆是完全二元树或者是近似完全二元树,按照数据的排列方式可以分为两种:最大堆和最小堆.最大堆:父结点的键值总是大于或等于任何一个子节点的键值:最小堆:父结点的键值总是小于或等于任何一个 ...
jQuery基础笔记（3）
day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-8-0 操作标签样式操作样式类 addClass();// 添 ...
五：MyBatis学习总结(五)——实现关联表查询
一.一对一关联 1.1.提出需求根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关 ...
django -orm操作总结
前言 Django框架功能齐全自带数据库操作功能,本文主要介绍Django的ORM框架到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段使用 MyS ...
css之IE hack 方法[ IE6 - IE9]
ps: 由于近来需要研究IE下兼容问题,今天又再次翻起起这些针对IE的hack,于是决定写下这篇笔记,记录下这些本该献祭级浏览器下的处理方法,用于备忘一.IE10以及以下版本均会生效(ie edge ...
Oracle sys或者system的默认密码
Oracle的sys和system默认密码 system默认:manager sys默认:change_on_install 使用SQL Plus登录数据库时,system使用密码manager可 ...
asp.net六种方法刷新页面
第一: private void Button1_Click( object sender, System.EventArgs e ) { Response.Redirect( Reque ...
正确的C++/C堆栈
在理解C/C++内存分区时,常会碰到如下术语:数据区,堆,栈,静态存储区,静态区,常量区,常变量区,全局区,字符串常量区,静态常量区,静态变量区,文字常量区,代码区等等,初学者被搞得云里雾里.在这里, ...
java-jdk7-forkjoin带有返回值
来自并发编程网: http://ifeve.com/fork-join-3/ 如果这个任务必须解决一个超过预定义大小的问题,你应该将这个任务分解成更多的子任务,并且用Fork/Join框架来执行这些子 ...

JSON 使用 教程