Javascript的jsonp原理
前端代码jsonp.html
<html>
<head>
<meta charset="UTF-8">
<title>Wsscat's jsonp</title>
</head>
<body>
<button onclick="jsonpServer('jsonp.php')">JSONP</button>
</body>
<script>
function jsonpServer(url) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", url);
document.body.appendChild(script);
}
function JSON_CALLBACK(data) {
console.log(data);
}
</script>
</html>
后端代码jsonp.php
<?php
$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>
jQuery的jsonp方法
type：请求方式 GET/POSTurl:请求地址async:布尔类型，默认为true 表示请求是否为异步，如果为false表示为同步。dataType：返回的数据类型jsonp：传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)jsonpCallback：自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据success：调用成功执行的函数error：异常处理函数
$.ajax({
url:'index.php',
type:'get',
dataType:'jsonp',
//jsonp:'JSON_CALLBACK',
jsonpCallback:'JSON_CALLBACK',
success:function(data){
console.log(data)
}
})
<?php
$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>
Javascript的jsonp原理的更多相关文章
-
Ajax跨域：Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
-
javascript笔记——jsonp
上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS. 那这篇博客就介绍JSONP方式. JSONP原理 在同源策略下,在某个服务器下的页面是无法获取到该 ...
-
JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
-
jsonp原理，封装，应用（vue项目）
jsonp原理 JSON是一种轻量级的数据传输格式. JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 ...
-
面试汇总——知道什么是同源策略吗？那怎么解决跨域问题？知道 JSONP 原理吗？
本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...
-
简单透彻理解JSONP原理及使用
首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中.JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进 ...
-
JSONP原理及jQuery中的使用
JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息. JSONP(JSON ...
-
跨域JSONP原理及调用详细演示样例
上篇博客介绍了同源策略和跨域訪问概念,当中提到跨域经常使用的基本方式:JSONP和CORS. 那这篇博客就介绍JSONP方式. JSONP原理 在同源策略下,在某个server下的页面 ...
-
跨域篇--JSONP原理
一篇文章让你明白 jsonp原理详解 什么是JSONP? 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自 ...
随机推荐
-
OAuth2.0相关知识
自己总结的可能有误差. 大致分为6个步骤: 1.注册相关应用,获取client_id,client_secret.2.第三方请求用户授权.用户点击按钮同意授权后,授权服务器将生成一个用户凭证(code ...
-
Google Map API V3开发（5）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
-
poj 1006:Biorhythms（水题，经典题，中国剩余定理）
Biorhythms Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 110991 Accepted: 34541 Des ...
-
BZOJ4260: Codechef REBXOR
Description Input 输入数据的第一行包含一个整数N,表示数组中的元素个数. 第二行包含N个整数A1,A2,…,AN. Output 输出一行包含给定表达式可能的最大值. S ...
-
Request获取url各种信息的方法
1.Request获取url各种信息的方法 测试的url地址:http://www.test.com/testweb/default.aspx, 结果如下: Request.ApplicationPa ...
-
MQTT 单个订阅消息量过大处理
The missing piece between MQTT and a SQL database in a M2M landscape Message Queue Telemetry Transpo ...
-
清除电脑垃圾.bat
echo.title delete cachecolor 0aecho.echo please enter any key start.....@echo offecho execuing delet ...
-
[MySQL]变更数据库字符集
my.cnf [mysqld] character-set-server=utf8 [mysqld_safe] default-character-set=utf8 -- 创建数据库时,设置数据库的编 ...
-
ZOJ1905Power Strings （KMP||后缀数组+RMQ求循环节）
Given two strings a and b we define a*b to be their concatenation. For example, if a = "abc&quo ...
-
2017.8.12 dp课小结
这节课难度超级大啊,基本上都是省选+NOI的题. 例1: 1801: [Ahoi2009]chess 中国象棋 Time Limit: 10 Sec Memory Limit: 64 MB Subm ...