jsonp是什么？

  • Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

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

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

JSONP 应用

  1. 服务端JSONP格式数据
<?php

header('Content-type: application/json');

//获取回调函数名

$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);

//json数据

$json_data = '["customername1","customername2"]';

//输出jsonp格式的数据

echo $jsoncallback . "(" . $json_data . ")";

?>
  1. 客户端页面完整代码
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<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>
  1. jQuery 使用 JSONP
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JSONP 实例</title>

    <script src="http://cdn.static.runoob.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>
  1. 自测代码
<?php

header('Content-type: application/json');

//获取回调函数名

$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);

//json数据

$json_data = '["customername1","customername2"]';

//输出jsonp格式的数据

echo $jsoncallback . "(" . $json_data . ")";

?>


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<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.php.test/jsonp/jsonp.php?jsoncallback=callbackFunction"></script>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JSONP 实例</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>

</head>

<body>

<div id="divCustomers"></div>

<script>

$.getJSON("http://www.php.test/jsonp/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>

菜鸟教程jsonp基础知识讲解的更多相关文章

  1. Html基础知识讲解

    Html基础知识讲解 <title>淄博汉企</title> </head> <body bgcolor="#66FFCC" topmar ...

  2. python基础知识讲解——@classmethod和@staticmethod的作用

    python基础知识讲解——@classmethod和@staticmethod的作用 在类的成员函数中,可以添加@classmethod和@staticmethod修饰符,这两者有一定的差异,简单来 ...

  3. java Reflection（反射）基础知识讲解

    原文链接:小ben马的java Reflection(反射)基础知识讲解 1.获取Class对象的方式 1.1)使用 "Class#forName" public static C ...

  4. php基础教程-必备基础知识

    PHP 脚本在服务器上执行. 您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML CSS JavaScript 如果您希望首先学习这些项目,请在我们的 首页 访问这些教程 ...

  5. ElasticSearch（四）：关于es的一些基础知识讲解

    上一篇博客更新完之后,我发现一个问题:在我创建索引的时候依旧无法准确的理解每个字段的意义,所以就有了这个. 1. 关于索引 1.1 关于索引的一些基础知识 在创建标准化索引的时候,我们传入的请求体如下 ...

  6. shell基础知识讲解

    第1章 shell基础 1.1 什么叫做shell编程 shell编程也叫做bash高级编程语法 1.2 常见的shell命令解释器 bash            redhat和centos使用 d ...

  7. AC自动机基础知识讲解

    AC自动机 转载自:小白 还可参考:飘过的小牛 1.KMP算法: a. 传统字符串的匹配和KMP: 对于字符串S = ”abcabcabdabba”,T = ”abcabd”,如果用T去匹配S下划线部 ...

  8. 1.spring基础知识讲解

    引言:以下记录一些自己在使用时pringle框架时的一些自己心得合成体会时,如有侵权,请联系本博主. 1. spring基本都使用 spring是一个开源的轻量级框架,其目的是用于简化企业级应用程序开 ...

  9. redis 教程(一)-基础知识

    redis 简介 redis 是高性能的 key-value 数据库,读的速度是110000次/s,写的速度是81000次/s ,它以内存作为主存储 具有以下优点: 1. 支持数据的持久化,将内存中的 ...

随机推荐

  1. gRPC-go源码（2）：ClientConn

    摘要 在上一篇文章中,我们聊了聊gRPC是怎么管理一条从Client到Server的连接的. 我们聊到了gRPC拥有Resolver,用来解析地址:拥有Balancer,用来做负载均衡. 在这一篇文章 ...

  2. Java 多线程 02

    多线程·线程间通信 和 GUI 单例设计模式 * A:单例设计模式 * 保证类在内存中只有一个对象 * B:如何保证 * a:控制类的创建,不让其他类来创建泵类的对象,私有化构造方法 * b:在本类中 ...

  3. JSP, EL, JSTL的使用

    JSP基础指令和语法 回顾 在Jsp页面: 只要是Java代码就会原封不动的输出, 如果是html代码,就会转义为 out.write("<html>\r\n") 这样 ...

  4. Apache配置 1. 默认虚拟主机

    编辑httpd.conf搜索httpd-vhosts,去掉#号 # vi /usr/local/apache2.4/conf/httpd.conf Include conf/extra/httpd-v ...

  5. 【死磕JVM】一道面试题引发的“栈帧”！！！

    前言 最近小农的朋友--小勇在找工作,开年来金三银四,都想跳一跳,找个踏(gao)实(xin)点的工作,这不小勇也去面试了,不得不说,现在面试,各种底层各种原理,层出不穷,小勇就遇上了这么一道面试题, ...

  6. 自导自演的面试现场之--你竟然不了解MySQL的组提交？

    Hi,大家好!我是白日梦!本文是MySQL专题的第 26 篇. 下文还是白日梦以自导自演的方式,围绕"组提交"展开本话题.看看你能抗到第几问吧 换一种写作风格,自导自演面试现场!感 ...

  7. 精通模块化JavaScript

    近日读了一本名为<精通模块化JavaScript>的书,并记录了其中的精髓. 一.模块化思维 精通模块化开发并不是指要遵循一套定义明确的规则,而是指能够将自己置身于使用者的角度,为可能即将 ...

  8. HTML标签解读

    因为最近在学习爬虫,那么在爬取网页内容时,就要求我们能够简单的看懂这个网页的基本结构,才能更好的去爬取我们所需要的内容. 这篇随笔也只是简单的说明了一些标签的含义. 标签关系 包含关系 eg:< ...

  9. 得分(JAVA语言)

    package 第三章习题; /*  * 给出一个由O和X组成的串(长度为1~80),统计得分.  * 每个O得分为目前连续出现的O的个数,X得分为0.  * 例如,OOXXOXXOOO的得分为  * ...

  10. OOP第一次博客作业

    一.关于Java&&面向对象 本学期刚开始进行Java的学习,也是刚开始了解面向对象,目前也就学习了三四周的样子,期间进行了三次作业,我感觉到Java的语法和c语言中的有许多相似之处, ...