面试题-探索JSONP

有这样一个面试题： 什么是jsonp，jsonp为何没有post。那么，咱们先看看什么是jsonp，了解了在看这个问题。

什么是JSONP

---

JSONP是JSON with Padding的略称。它是一个非官方的协议，它容许在服务器集成JavaScript返回至 客户端，经过javascript callback形式实现跨域访问。

为何会有跨域这个说法呢？

---

由于同源策略！浏览器安全是来自于同源策略。什么是同源策略呢？咱们知道在网络中安全很是重要，否则你的密码，帐号，重要数据都会被别人窃取，别人能够在网上获取到这些数据，模仿成你，骗过浏览器，随心所欲，这样的状况是不容许发生的。因而就有了同源策略一说。 规定以下：

协议相同
域名相同
端口相同
复制代码

知足以上要求的网页称为同源下的网页。

例如：
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不一样源（域名不一样）
http://v2.www.example.com/dir/other.html：不一样源（域名不一样）
http://www.example.com:81/dir/other.html：不一样源（端口不一样
复制代码

不一样源的网页共有三种行为会受到限制：

1. Cookie、LocalStorage、IndexDB没法读取。
2. DOM没法得到。
3. AJAX请求不能发送。
复制代码

这样一来，就很安全了！那么这么作有好处，为何还须要跨域呢？由于不方便，由于同源策略一棒子打死了一片，有人用着不舒服，因而就有了jsonp跨域。说的这么高大上，能够说就是一个script小技巧。

说了这么铺垫知识，下面开始一段Long story简洁版 jsonp (多图预警！！！)

Long Story

---

小Po今天要作一个付钱的页面，页面显示帐户余额，还要有一个付款的按钮。蹬蹬蹬。。搞定了:

而后他须要一个数据库，否则用户刷新一下,蹬蹬蹬。。又搞定了！

接下来给按钮加一个事件，加哪个？个人DOM事件流有讲事件处理程序哟！，因而小Po愉快的加上了DOM2级事件处理程序，接下来向后端发一个请求吧！

• 那就用form表单提交一个post这样没问题吧？蹬蹬蹬。。。。

成功的完成了，但是有个问题我必须的刷新一下才会显示，这样是否是体验很不畅。

那么还有什么能够发送请求的，a标签？不行，那个须要点击一下呢？并且a标签看起来很奇怪不是吗？那img标签怎么样？好像可行哦，试试，蹬蹬蹬。。。

• 那就试试<img>来发送请求吧

不错，不错，我在 <img>标签里面加了自动刷新，这样弹窗出来后不就能够自动刷新了吗？并且还有一个狗狗图片传过来，多有意思！简直太棒！

因而A同志高兴的提交了代码，没过多久，就被打回来了，你这个请求还不错，怎么总是给传个狗子过来，劳资不要狗，我要钱！你懂吗？钱！

因而，为了这个低俗的需求，小Po又得从新找，这回找到了<script>,这回别处岔子了。蹬蹬蹬。。。

• 最后尝试下<script>，ORZ

因而小Po将img换成script,打出一个弹窗，嗯，有两个弹窗，一个是HTML的，一个是服务器中的，看会发生什么。

而后付款，怎么没扣钱？？？

虚惊一场~~~原来是没添加进body！！为啥？不为啥！记住吧。

居然能在服务器端可使用js，小Po仿佛发现了新大陆！，因而悄悄的在服务器返回的JS中操做了HTML，这样就能扣钱而不用刷新页面，一箭双雕，一石二鸟，一举两得。。。。完美！！！！

因而小Po自信的提交了代码，然而，并板凳还没坐热，意见又来了。

“小Po啊，你酱紫我后端很难作啊（点根烟），你看看，我还要知道你页面写的是啥，我才能写响应，这样我均可以作前端，要你何用？！（弹了烟头，踩灭）你在好好想一想吧！还有哦，你这个<script>付一次钱就在页面添加一个script标签，真的麻烦。这么烂的代码，是要我带20米的砍刀么？（吐出烟雾，一脸gaygay）”。

小Po心惊胆颤的捡起键盘，颤巍巍的删除了response里面的代码，怀疑人生。算了，先ka掉重复script！再想解决办法。

搞定！小Po重拾信心，还有什么办法解决代码太过于耦合呢？既然我不能放在后端，那我放在页面里面怎么样，但是这个代码怎么执行呢？诶？放函数里面，让后端段响应的同时执行我页面的函数不就OK啦。

“喂，解决没？”

“大哥这样怎么样？”

“不行！代码仍是太多了，爷没时间写你那个什么函数名字，你等会，我去找个人刀”

“(T T)ORZ”

• 抓紧时间，再看看问题怎么解决

我带个参数过去，让后端可以截取函数名，响应的时候调用这个函数名对应的函数就行了，这样就不会让他知道我要执行什么代码。耦合不就降下来了吗？简直是一举。。。 =。= 先提交看看吧。

“来！头伸过来。。”

“ 已经提交上去了。”

“是吗？给你一次机会，嗯？！数据怎么传过去呢？”

“用json什么放在‘我要传输的数据’ 的那个位置就行了。”

“嗯。。。还行，过得去，今天就不砍你啦。给你个红包领着你的狗子回家吧。

“收工！”

jsonp为何没有post

---

由于是动态建立script标签呀，script不能发post请求呀。完！