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. sudo命令 和限制root 远程登陆

    1.对sudo命令的配制,输入 visudo 然后,找到92行进行以下配制 以下就是效果 比如: 如果要同时给两个普通用户设置这样子的权限,就可以用另一种方式,下面这种方式不可取的 而是用这种 效果如 ...

  2. C#中的IDisposable接口

    深入理解C#中的IDisposable接口 写在前面 在开始之前,我们需要明确什么是C#(或者说.NET)中的资源,打码的时候我们经常说释放资源,那么到底什么是资源,简单来讲,C#中的每一种类型都是一 ...

  3. Ubuntu下一个好用的终端

    在终端下输入: sudo apt-get install terminator 快捷键: shift+ctrl+e          在当前窗口右侧新开一个窗口 shift+ctrl+w        ...

  4. 《DSP using MATLAB》Problem 6.13

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  5. 走进 AQS 瞧一瞧看一看

    并发中有一块很重要的东西就是AQS.接下来一周的目标就是它. 看复杂源码时,一眼望过去,这是什么?不要慌,像剥洋葱一样,一层层剥开(哥,喜欢"扒开"这个词). 参考资源: http ...

  6. 写出一个程序，接受一个由字母和数字组成的字符串，和一个字符，然后输出输入字符串中含有该字符的个数。不区分大小写。java算法

    知识点一:equalsIgnore 1.使用equals( )方法比较两个字符串是否相等.它具有如下的一般形式: boolean equals(Object str) 这里str是一个用来与调用字符串 ...

  7. 【添加tomcat里lib下的jar包】eclipse中The project cannot be built until build path errors are resolved

    问题描诉:在eclipse中新建了一个web项目,把myeclipse中正常的项目拷贝到eclipse的src和webcontent目录 然后项目中就出现了× 注意项目中Errors

  8. centos7/linux 磁盘管理入门

    添加新磁盘并挂载: 设置虚拟机系统里添加磁盘,重启虚拟机后,虚拟机目录/dev下会增加一个sdb设备. 使用fdisk /dev/sdb 管理磁盘分区,首先p 查看磁盘分区信息,然后n增加一个主分区, ...

  9. MySQL--数据超时相关参数

    =============================================== connect_timeout connect_timeout用在client和server之间建立连接 ...

  10. kubebapps 添加私有harbor 中的helm repo

    kubebapps 支持添加私有的helm repo,基于http basic auth ,我们通过添加header 就可以了 备注 harbor helm 以及kubebapps 的搭建可以参考 h ...