ylbtech-JSON:  介绍、应用

JSONP(JSON with Padding)是 JSON 的一种“使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

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

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

1. JSONP 应用返回顶部
 
2. 服务器端 JSONP 格式数据返回顶部
如客户想访问:http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction
假设客户期望返回 JSONP 数据:["customername1","customername2"]。
2.1 真正返回到客户端的数据显示为:(["customername1","customername2"])
2.2 (实例给出)真正返回到客户端的数据显示为:callbackFunction(["customername1","customername2"])
服务器端文件 jsonp.php 代码为:

<?php
header('Content-type: appliaction/json');
//获取回调函数名
$jsoncallback=htmlspecialchars($_REQUEST['jsoncallback']);
//json 数据
$json_data='["customername1","customername2"]';
//输出 jsonp 格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
3. 客户端实现 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.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>
4. jQuery 使用 JSONP返回顶部
以上代码可以使用 jQuery 代码实例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JSNP 实例</title>
<meta charset="utf-8" />
<script src="http://apps.bdimg.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>
5.返回顶部
 
 
6.返回顶部
 
7.返回顶部
 
8.返回顶部
 
9.返回顶部
 
10.返回顶部
 
 
11.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

JSON: 介绍、应用的更多相关文章

  1. xml与json 介绍

    一.JSON数据格式 1)概念:json是一种网络数据传输格式,有值/对象:{“A”:1,”B”:”2”…}词典:对象的序列:[,,,,,]数组两种数据类型 2)URLWithString 将字符串网 ...

  2. Json介绍以及解析Json

    首先,介绍一下Json字串,以下Json的介绍引用网上资料. 简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应 ...

  3. JSON介绍及Android最全面解析方法(Gson、AS自带org.son、Jackson解析)

    前言 今天,我们来介绍一下现今主流的数据交换格式-JSON! 相同作为主流为数据交换格式-XML,假设有兴趣能够阅读我写的XML及其DOM.SAX.PULL解析方法和对照 文件夹 定义 JavaScr ...

  4. Json介绍与Ajax技术

    AJAX   AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据 ...

  5. 【】JSON介绍

    0.说明 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写. 同时也易于机器解析和生成. 它是基于JavaScript Programm ...

  6. 1.4 jQuery方法,JSON介绍

    jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...

  7. JSON介绍

    JSONhttp://www.json.org/json-zh.html JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机 ...

  8. iOS开发网络篇—JSON介绍

    一.什么是JSON JSON是一种轻量级的数据格式,一般用于数据交互 服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除外) JSON的格式很像OC中的字典和数组 {" ...

  9. 安卓Json介绍(转)。

    1.JSON(JavaScript Object Notation) 定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式, ...

随机推荐

  1. (16)JavaScript的流程控制(js的循环)

    流程控制有3种结构 1.顺序结构:代码执行的本质就是顺序结构 2.分支结构:if家族 语法规则: if (条件1) { //代码块1}else if (条件2){ //代码块1}//如果所有条件都不满 ...

  2. Python的方法和语法解释

    ---------------------------------------------------------------------------------------------------- ...

  3. 模块化,AMD规范

    模块化:代码量比较大,可能会有几个人同时写一个页面,同样写在一个文件里面,可能会有冲突,模块化可以解决代码的冲突(匿名函数调用,自己调用自己,就是立即执行函数) 团队的分工更加的明确 异步的执行: A ...

  4. Centos6.8 搭建Tomcat服务器

    Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,是一个可以提供web服务同时也支持Servlet的JSP服务器. ...

  5. Python基础-使用paramiko

    一:简介 paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. 由于使用的是python这样的能够跨平台运行的语言,所以所有python支 ...

  6. hdu4965 Fast Matrix Calculation 矩阵快速幂

    One day, Alice and Bob felt bored again, Bob knows Alice is a girl who loves math and is just learni ...

  7. $.each $.map $.filter 区别 Script

    $('section.required').each(function () { var type = $(this).attr('data-type'); if (type == 'MULTIPLE ...

  8. java 编译 运行 及 引用外部 jar 包的方法

    1. 环境变量配置 JAVA_HOMEC:\Program Files\Java\jdk1.8.0_121; PATH%PATH%;C:\Java\jdk1.6.0_30\bin; CLASSPATH ...

  9. 【BZOJ3514】 Codechef MARCH14 GERALD07加强版

    hentai... 原题: N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. 对于100%的数据,1≤N.M.K≤200,000. 直接复制wulala的题解 wulal ...

  10. 解决jpgraph在php7.0版本下时,无法显示例子图表的问题

    解决gpgraph4.02在php7.0显示空白框问题 Gpgraph类库强大的绘制图表的功能深受广大phper的喜爱,目前官方最新的版本是 jpgraph-4.0.2 ,适用于php5.0及7.0以 ...