关键词：
关于JSONP
今天学习到了JSONP，关于JSONP的定义和用法在阮一峰阮老师的博客里讲解得很清楚了，这里只是记录一些关于JSONP的点。
回调函数的命名
在阮老师的博客中举的例子是回调函数命名为foo，在实际使用环境中回调函数一般是搭配着随机数使用，使用时实时生成，使用过后销毁此函数。
如：
//客户端（浏览器）
button.addEventListener(‘click‘,(e)=>
let script = document.createElement(‘script‘)
//生成随机函数名
let functionName = ‘no1harm‘ + parseInt((Math.random()*1000000),10)
window[functionName] = function(result)
alert(result)
script.src = ‘http://xxx.com:8002/xx?callback=‘ + functionName
document.body.appendChild(script)
script.onload = function(e)
e.currentTarget.remove()
// 销毁函数
delete window[functionName]
script.onerror = function(e)
alert(‘fail‘)
e.currentTarget.remove()
delete window[functionName]
)
// 服务器
...
if( path === ‘/xx‘)
response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
response.statusCode = 200
response.write(`
$query.callback.call(undefined,‘success‘)
`)
response.end()
...JSONP 为什么不支持 POST
因为JSONP是通过动态创建script实现的，而动态创建script只能使用GET，不能使用POST。
JSONP的jQuery使用方式
首先在项目引入jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>然后：
//客户端
button.addEventListener(‘click‘,(e)=>
$.ajax(
//要请求的域名
url: "http://xxx.com:8002/xx",
dataType: "jsonp",
//回调函数
success: function( response )
if(response === ‘success‘)
...
)
//服务器
...
if( path === ‘/xx‘)
response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
response.statusCode = 200
response.write(`
$query.callback.call(undefined,‘success‘)
`)
response.end()
...值得注意的是，虽然这个命名为$ajax，但是他和ajax没有关系，他是jQuery的方法。
关于jsonp
网上查的内容显示，一、$.ajax()的jsonp原理可以用下面的代码展示：varscript=document.createElement("script");script.type="text/javascript";script.src="url";document.getElementsByTagName("HEAD")[0].appendChild(script);不过，我发现了一个现象 查看详情
跨域的几种方法(代码片段)
1、jsonp最常见的一种跨域方式，其背后原理就是利用了script标签不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，后端在响应请求时... 查看详情
[javascript]记录完成轮播过程中的几个点(代码片段)
记录几个坑之前的轮播：完整代码：GitHub效果预览：GitHub最近完成的轮播：完整代码：GitHub效果预览：GitHub在完成轮播中解决两个问题：1.setInterval()会和按钮绑定的事件发生冲突。表现为：setInterval()设置了每3S轮播一次，在没有... 查看详情
关于jsonp
一、JSONP的诞生1.首先，因为AJAX无法跨域，其次开发者发现，<script>标签的src属性是可以跨域的。2.把跨域服务器写成调用本地的函数，回调数据回来不就好了。3.JSON刚好被JS支持（object）,调用跨域服务器上的动态生成的JS格... 查看详情
对 JSONP 请求的工作方式感到困惑
...请求如何工作的细节。我已经阅读了包括jsonp上的wiki在内的几个来源，但对于在进行jsonp调用时回调如何实际获取从服务器返回的函数时仍然感到非常困惑。比如在wiki中，请求的来源设置为：src="http://server2.exampl 查看详情
关于跨域方面的问题(代码片段)
js_Cross_domainJsonp与CORS跨域方式的区别CORS方法更好一些，但是需要对服务器有自主权。JSONP则不需要对服务器有自主权，可以通过script、img等标签可以发送GET请求的特点，通过回调函数执行已有的JS函数。在函数内获取返回值。CORS... 查看详情
markdownjs，jsonp(代码片段)
项目中常遇到的几种跨域方案(代码片段)
1.jsonp jsonp属于最老的一种跨域方案了，我在现在的项目中已经很少见到$(‘#btn‘).click(function()varframe=document.createElement(‘script‘);frame.src=‘http://localhost:3000/article-list?name=leo&age=30&callback=func‘;$(‘bo 查看详情
kotlin委托必须重视的几个点(代码片段)
委托模式是实现继承的一个很好的替代方式，也是Kotlin语言的一种特性，可以很优雅的实现委托模式。在开发过程中也少不了使用它，但常常都会被低估。所以今天就让它得到重视，去充分的掌握kotlin委托特性以... 查看详情
谈csrf与jsonp设置header问题(代码片段)
关于前端发起请求问题一JS发起请求的方式方法一JS代码中发起请求的方式普遍为AJAX该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求（XMLHTTP）方法二script标签请求方法三通过HTML的方法通过js自动在jsp中创建一个form表... 查看详情
❤️一个有趣小案例教你如何使用原生js使用和jquery应该如何使用jsonp❤️(代码片段)
...同主机名、同端口。其中有任何一项不同即为不同源。举几个栗子:http://www.baidu.com和http://www.baidu.com:8080, 查看详情
❤️一个有趣小案例教你如何使用原生js使用和jquery应该如何使用jsonp❤️(代码片段)
...同主机名、同端口。其中有任何一项不同即为不同源。举几个栗子:http://www.baidu.com和http://www.baidu.com:8080, 查看详情
jsonp(代码片段)
JSONP(JSONwithPadding)是JSON的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。JSONP本质由于浏览器的同源策略，会阻止Ajax请求，但是不会阻止<scriptsrc=""></script>，因此就可以通... 查看详情
htmlexmaple_jsonp(代码片段)
javascript原生实现jsonp(代码片段)
ajax解决跨域--jsonp原理(代码片段)
1.解决跨域–JSONP1.1JSONP是什么JSONP(JSONwithPadding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求。1.2JSONP怎么工作的？在网页有一些标签天生具有跨域能力，比如：imglin... 查看详情
r用r解析jsonp(代码片段)
gts—-关于gtstetheringtestcases模块的几个失败项(代码片段)
GTS---关于GtsTetheringTestCases模块的几个失败项1.rungts-mGtsTetheringTestCases-tcom.google.android.tethering.gts.ProvisioningTest#testRunSilentWifiTetherProvisioningAndEnable?【问题概述】日志报错：01-2410:06:09I/ModuleLis 查看详情