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脚本解 ...

随机推荐

AVL树的实现——c++
一.概念 AVL树是根据它的发明者G.M. Adelson-Velsky和E.M. Landis命名的.它是最先发明的自平衡二叉查找树,也被称为高度平衡树.相比于"二叉查找树",它 ...
Reservoir Sampling-382. Linked List Random Node
Given a singly linked list, return a random node's value from the linked list. Each node must have t ...
MySQL(分组、连表操作、备份数据库)
day58 分组参考:https://www.cnblogs.com/xp796/p/5262187.html select dept, max(salary) from department gr ...
elasticsearch5.x安装中一些问题的解决办法
1.root超级用户不能正常启动由于elasticsearch2.0版本以后不能使用root来启动,所以需要创建一个普通用户来启动. [root@bogon ~]# groupadd elastic ...
AppScan安全测试入门操作
appscan:可以对网站等 Web 应用进行自动化的应用安全扫描和测试,也就是经常说的安全测试工作原理:是通过对web应用进行安全攻击来检查网站是否存在漏洞. 初步了解到的创建新的扫描-> ...
CentOS7启动Tomcat报错：./startup.sh: Permission denied
错误信息:./startup.sh: Permission denied 执行./startup.sh,或者./shutdown.sh的时候, 报:Permission denied,因为是执行tom ...
Monkey捕获Crash原理
Android的RuntimeInit.commonInit中会设置UncaughtHandler ActivityManagerService(AMS)在执行handleApplicationCra ...
【Oracle】数据泵导入导出
数据泵 expdp导出 nohup expdp system/******** dumpfile=lysb_20121113_%U.dmp directory=dmp_dir schemas=sco ...
Eclipse+jboss5 无法启动
在使用Eclipse luna 配置Jboss5 时,配置成功,但无法在eclipse 控制台上启动. log: Deployment "AttachmentStore" is i ...
2018春招-今日头条笔试题-第二题（python）
题目描述:2018春招-今日头条笔试题5题(后附大佬答案-c++版) 解题思路: 利用深度优先搜索 #-*- coding:utf-8 -*- class DFS: ''' num:用于存储最后执行次 ...

JSON 使用 教程