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>

更多专业前端知识，请上【猿2048】www.mk2048.com

JSON 使用教程相关推荐

Swift语言中如何使用JSON数据教程
原文:Swift语言中如何使用JSON数据教程这是一篇翻译文章,原文出处:http://www.raywenderlich.com/82706/working-with-json-in-swift- ...
js修改本地json文件_Flutter加载本地JSON文件教程建议收藏
今天农村老家的天气不是很好而且外面还下雨了,每天只能坐在老家打开电脑,看看文章,写写文章今天我给大家带来一篇Flutter加载本地JSON文件教程本头条核心宗旨欢迎来到「技术刚刚好」作者,「 ...
AE制作Json动画教程
本文将从为什么要做动画,到动画实现方式,再到用AE+Bodymovin制作动画,结合实际案例行分享,希望给新手带来一些启发. 首先我们来聊聊,我们为什么要做动效? 1.突出产品某项功能在APP中,我 ...
JSON(json)详细教程
JSON详细教程一.什么是JSON? 二.JSON的语法规则具体规则: 1.JSON名称/值对 2.JSON的值的类型 1. 数字(整数或者浮点数) 2. 字符串(在双引号中) 3. 逻辑值(tr ...
阿里json解析教程
阿里json解析教程第一步:引入阿里json解析工具jar包第二步:见代码 { { "AppRequest":{ "name":"xiaomign ...
iOS Swift JSON解析教程
In this tutorial, we will learn how to parse a JSON response in our iOS Application using Swift. We ...
Asp.Net Newtonsoft.Json使用教程
json序列化和反序列化的使用教程实体 public class wendaModel {private string _title;private string _cons;public stri ...
echarts map地图数据Json制作教程
首先来一个echarts map地图使用的教程(对应地图的数据包我的下载里有 echarts地图离线数据包有需要的可以自行下载或在博客下留言我会单独发你) <!DOCTYPE html> ...
Jackson解析JSON数据教程
Json解析-Jackson使用教程日常求赞,感谢老板. 欢迎关注公众号:其实是白羊.干货持续更新中- 一.JSON解析我这里指的解析是:JSON和JavaObject之间的序列化和反序列化. 如 ...

JSON 使用教程

JSONP 教程

JSONP 应用

1. 服务端JSONP格式数据

2. 客户端实现 callbackFunction 函数

页面展示

客户端页面完整代码

jQuery 使用 JSONP

JSON 使用教程相关推荐

最新文章

热门文章

JSON 使用 教程

JSONP 教程

JSONP 应用

1. 服务端JSONP格式数据

2. 客户端实现 callbackFunction 函数

页面展示

客户端页面完整代码

jQuery 使用 JSONP

JSON 使用 教程相关推荐

最新文章

热门文章

JSON 使用教程

JSON 使用教程相关推荐