本文是在了解了浏览器的同源划定规矩以后,进修了破解这个划定规矩的一个简朴有用的要领->JSONP。重要经由过程阮一峰先生的
博客进修
浏览器的同源划定规矩
- 有如许一个背景,假如你经由过程银行的网站举行的取钱的生意业务,而其他用户能够经由过程某个渠道取得你在银行网站的信息,那将是很恐怖的。
所以,1995年NetScape公司(火狐的前身),提出了浏览器的同源政策,目标是庇护运用网站的用户的信息平安。那末何谓同源呢
- 协定雷同
- 域名雷同
- 端口号雷同
不过,跟着互联网的生长,有些时刻我们须要破解同源,所以要先进修一下,陈旧而有用的JSONP要领。
浏览器怎样向服务器提交数据
- 有一天,程序员小白在自学,看到JSONP很牛,就向大神程序员小黑讨教。小黑,小黑,这个JSONP是啥啊,觉得很牛( ⊙ o ⊙ )!。
- 小黑扶了扶500度的眼镜,摸了一下头顶的几根头发,若有所思的问小白。
- 小白啊,你说,浏览器怎样向服务器提交数据啊,比如说,你要付款这个情况。
- form表单啊,我划定
<form method="POST" action="/..."></form>
,我不必get要求。
<h5>您的账户余额是<span id="amount">200</span></h5>
<button id="button">付款1块钱</button>
<form action="/pay" method="post">
<input type="text" name="number" value="1">
<input type="submit" value="付款">
</form>
- 恩,照样不错的啊,晓得用
POST
提议要求。那你这提交完了以后,是否是还要在当前页面革新一下,才看到余额啊。 - ……哎,是啊,不过我能够给你加一个
iframe
,就在当前页面革新
<form action="/pay" method="post" target="result">
<input type="text" name="number" value="1">
<input type="submit" value="付款">
</form>
<iframe name="result" src="about:blank" frameborder="0"></iframe>
有什么反应信息都在iframe显现。
- 恩,也还行,不过你为啥要把总额200写死在页面呢,不应该动态从数据库中取得吗
- ╮(╯▽╰)╭,稍等我改一哈
<h5>您的账户余额是<span id="amount">&&&amount&&&</span></h5>
<button id="button">付款1块钱</button>
...
button.addEventListener('click', (e) => {
let n = amount.innerText
let number = parseInt(n, 10)
let newNumber = number - 1
amount.innerText = newNumber
}
我用&&&amount&&&
占位符示意总额,服务器端能够以下处置惩罚
var amount = fs.readFileSync('./db', 'utf-8') //从db中读取
string = string.replace('&&&amount&&&', amount) //把占位的数据换成真的数据
...
response.write(string)
- 恩,不错,你再想想有没有其他的体式格局也能够发送数据到服务器端啊,不必革新页面的那种
- ……另有其他的( ⊙ o ⊙ )啊!
- 那我老黑我给你讲讲先辈程序员们试过的要领吧
//用图片提议get要求
let image = document.createElement('img')
image.src = '/pay'
image.onload = function() {
alert('打钱胜利')
amount.innerText = amount.innerText - 1
}
image.onerror = function() {
alert('打钱失利')
}
这类也是能够的,而且也会用提醒给用户,交互性还能够,不过只能提议GET
要求,哈哈,我就是秀一下黑科技,很罕用啦……
- (@ο@) 哇~这也能够,小黑,你好棒,又长见地啦,不过照样没给我讲JSONP啊,你是否是忘了……
- 没忘啦,不要焦急,接下来,就给你好好讲讲这个JSONP
动态建立JS剧本发数据
- 小白啊,你平经常使用的最多的是哪门言语啊
- 中文啊,英语不大好。
- ……我说编程的时刻
- 呃呃,谁人用的JavaScript多啊
- 好,那我们就用js剧本发数据呗
//用js剧本提议要求
let script = document.createElement('script')
script.src = '/pay'
document.body.appendChild(script)
script.onerror = function() {
alert('failed')
}
...
//服务器端平常这么干
if(path === '/pay') {
var amount = fs.readFileSync('./db', 'utf8')
var newAmount = amount - 1
fs.writeFileSync('./db', newAmount)
response.setHeader('Content-Type', 'application/javascript')
response.statusCode = 200
response.write(`
amount.innerText = amount.innerText - 1
`)
response.end()
}
以上是js剧本的大抵意义,细节不要穷究,邃晓就行。注重一下,增加script
后,要记得document.body.appendChild(script)
- 不过,小黑啊,你这动态加上了
script
没错,但是你每次都往我的html底部加js,这损坏我的html啊 - 恩,小白啊,你思索才能照样能够的,现在确切有这个弊病,我给你处置惩罚一下
//用js剧本提议要求
let script = document.createElement('script')
script.src = '/pay'
document.body.appendChild(script)
script.onload = function(e) {
e.currentTarget.remove() //加载完了,就移除
}
script.onerror = function(e) {
alert('failed')
e.currentTarget.remove() //加载完了,就移除
}
- 能够能够,小黑你这波操纵能够的。快让我见地见地JSONP吧
- 好,这就给你变出来
button.addEventListener('click', (e) => {
//用js剧本提议要求
let script = document.createElement('script')
let functionName = 'wushao' + parseInt((Math.random()*100000), 10)
window[functionName] = function (result) {
if (result === 'success') {
amount.innerText = amount.innerText - 1
} else {
}
}
script.src = 'http://想接见的另一个网站:端口号/pay?callback=' + functionName
document.body.appendChild(script)
script.onload = function(e) {
e.currentTarget.remove()
}
script.onerror = function(e) {
alert('failed')
e.currentTarget.remove()
}
})
- ヾ(。`Д´。)黑神,你这跨度有点大,咋变了个大把戏。
O(∩_∩)O哈哈~,你让我给你快点讲的……,我给你讲讲细节吧
- let functionName = ‘wushao’ + parseInt((Math.random()*100000), 10) 运用一个随机函数构建本身的函数名字,能够与服务器端代码圆满解耦,服务器端只须要,取得查询参数
?callback=functionName
内里的functionName就能够了。 -
window[functionName] = function (result) { }
在window全局对象上增加functionName
属性,它的值是一个函数,当服务器端相应返来后,浏览器端的写的函数的参数就是服务器端的success
,我们就晓得我的数据胜利了。
- let functionName = ‘wushao’ + parseInt((Math.random()*100000), 10) 运用一个随机函数构建本身的函数名字,能够与服务器端代码圆满解耦,服务器端只须要,取得查询参数
//服务器端只须要如许就能够了,不关心你写的是什么函数名字
response.write(`
${query.callback}.call(undefined, 'success')
`)
- 哇,凶猛啊,不过你又犯了一个雷同的毛病啦,哈哈,每次要把增加的全局对象的属性去掉哦~
script.onload = function(e) {
e.currentTarget.remove()
delete window[functionName]
}
script.onerror = function(e) {
alert('failed')
e.currentTarget.remove()
delete window[functionName]
}
- O(∩_∩)O哈!,如许子就对了,小白啊,既然你学过jQuery,你试一试jQuery的写法吧
- (^o^)/~行,小黑,我也给你变一个
$.ajax({
url: "http://想接见的另一个网站:端口号/pay",
// The name of the callback parameter, as specified by the YQL service
jsonp: "callback",
// Tell jQuery we're expecting JSONP
dataType: "jsonp",
// Work with the response
success: function (response) {
if(response === 'success') {
amount.innerText = amount.innerText - 1
}
}
})
- 哎呦,不错呦,小白~
- O(∩_∩)O哈哈~,我就是Google的
jquery jsonp
- 不过,这个可和ajax,没啥关联啊,不邃晓为啥jquery为啥这么写。
详细的代码链接在============>传送门
什么是JSONP呢
要求方是一个网站(浏览器端),相应方是另一个网站(服务器端)
- 要求方动态的建立一个script剧本,src属性是相应方的地点,同时通报一个查询查参数
?callback=functionName
,平常functionName运用随机函数组织。 - 相应方依据收到的查询参数callback=functionName,去组织形如
2.1
functionName.call(undefined, 'success')
2.2 或许直接
functionName.('success')
如许的相应。
- 浏览器收到相应以后,就会实行
functionName.call(undefined, 'success')
或许functionName.('success')
- 然后,要求方就晓得了他想要取得的数据怎样了。
这就是JSONP的道理
为何JSONP不支持POST要求呢
答曰:JSONP是动态建立的js剧本,这个要领只能提议GET要求,不能提议POST要求。
其他要求的话,用AJAX
做喽☺