菜鸟教程jsonp基础知识讲解
jsonp是什么？
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。
同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
JSONP 应用
- 服务端JSONP格式数据
如客户想访问 : http://www.runoob.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 . ")";
?>
- 客户端页面完整代码
<!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>
- 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>
- 自测代码
<?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基础知识讲解的更多相关文章
- Html基础知识讲解
Html基础知识讲解 <title>淄博汉企</title> </head> <body bgcolor="#66FFCC" topmar ...
- python基础知识讲解——@classmethod和@staticmethod的作用
python基础知识讲解——@classmethod和@staticmethod的作用 在类的成员函数中,可以添加@classmethod和@staticmethod修饰符,这两者有一定的差异,简单来 ...
- java Reflection（反射）基础知识讲解
原文链接:小ben马的java Reflection(反射)基础知识讲解 1.获取Class对象的方式 1.1)使用 "Class#forName" public static C ...
- php基础教程-必备基础知识
PHP 脚本在服务器上执行. 您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML CSS JavaScript 如果您希望首先学习这些项目,请在我们的 首页 访问这些教程 ...
- ElasticSearch（四）：关于es的一些基础知识讲解
上一篇博客更新完之后,我发现一个问题:在我创建索引的时候依旧无法准确的理解每个字段的意义,所以就有了这个. 1. 关于索引 1.1 关于索引的一些基础知识 在创建标准化索引的时候,我们传入的请求体如下 ...
- shell基础知识讲解
第1章 shell基础 1.1 什么叫做shell编程 shell编程也叫做bash高级编程语法 1.2 常见的shell命令解释器 bash redhat和centos使用 d ...
- AC自动机基础知识讲解
AC自动机 转载自:小白 还可参考:飘过的小牛 1.KMP算法: a. 传统字符串的匹配和KMP: 对于字符串S = ”abcabcabdabba”,T = ”abcabd”,如果用T去匹配S下划线部 ...
- 1.spring基础知识讲解
引言:以下记录一些自己在使用时pringle框架时的一些自己心得合成体会时,如有侵权,请联系本博主. 1. spring基本都使用 spring是一个开源的轻量级框架,其目的是用于简化企业级应用程序开 ...
- redis 教程(一)-基础知识
redis 简介 redis 是高性能的 key-value 数据库,读的速度是110000次/s,写的速度是81000次/s ,它以内存作为主存储 具有以下优点: 1. 支持数据的持久化,将内存中的 ...
随机推荐
- PHP代码审计_用==与===的区别
目录 背景介绍 如何审计 绕过案例1 绕过案例2 背景介绍 比较==与===的差别 == 是等于符号,=== 是恒等于符号,两个符号的功能都是用来比较两个变量是否相等的,只不过两个符号的比较维度不一样 ...
- Vue.js 可排序列表 (Sortable & Searchable Tables) 组件
可排序表格 (Sortable & Searchable Tables) 在网页和表单设计中非常常用.用户可以通过点击表头对将表格以该列做顺序或降序排列,也可以利用 Search Box 对表 ...
- LeetCode-在受污染的二叉树中查找元素
在受污染的二叉树中查找元素 LeetCode-1261 /** * 给出一个满足下述规则的二叉树: * root.val == 0 * 如果 treeNode.val == x 且 treeNode. ...
- CCF(引水入城：60分)：最大流+ISAP算法
引水入城 201703-5 这从题目分析来看很像最大流的问题,只需要增加一个超级源点和一个超级汇点就可以按照题意连边再跑最大流算法. 因为数据量太大了,肯定会超时.但是没有想到可行的解决方法. #in ...
- javascript处理HTML的Encode(转码)和解码(Decode)
HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的,在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式 一.用浏览器 ...
- [virtualenv][python] 环境管理——对 virtualenv 更轻便的封装
virtualenv_simple_wrapper 如有错误,欢迎指出 Char-z 项目地址 gitee: virtualenv_simple_wrapper 使用说明 下载文件 virtualen ...
- python基础学习之集合set
.集合:set 特点:无序,不可重复(自动去重),可更改,可以与元组.列表互相转换 格式:s = {'x','y','z'} 转换:(转回用set) s = {'x','y','z'} ...
- C指针与二维数组
先贴上完整的代码: #include<stdio.h> int main(int argc, char *argv[]){ int a[3] [5]={1,2,3,4,5,6,7,8,9, ...
- MySQL按天备份二进制日志
#!/usr/bin/env python # -*- coding:utf-8 -*- # Author:guozhen.zhang import MySQLdbimport timeimp ...
- 一个通用驱动Makefile-V2-支持编译多目录
目录 前言 1. 特点 2. 分析 2.1 简要原理 2.2 具体分析 3. 源码 前言 该 Makefile 已经通过基于内核 Linux5.4 版本验证通过. 因为编写这通用驱动 Makefile ...