阅读 48

JSONP

了解数据库

1. 文件系统是一种数据库;
2. MySQL是一种数据库。
只要能够长久存数据的就是数据库
比如说,什么是仓库?可以长久堆放东西的就是仓库
复制代码

请求

早年的前端,发请求是通过form表单来提交,但是form表单再提交请求之后会刷新页面,用户体验不好。还有用iframe去刷新页面的,这样给开发人员开发变得繁琐。

后面就在想如何不刷新页面而可以发送请求,人们发现当浏览器发现一个script标签或者img标签的时候,就会去发送请求。

那么我们在点击按钮的时候,可以动态地创建一个img 或者script标签,这样就可以让浏览器去发送请求了。如下代码,我们执行了之后,会发现点击按钮的时候 会向'/pay'发送一个请求

<button id="button"></button>
button.addEventListener('click',(e) => {
    let image = document.createElement('img');
    image.src="/pay"
    image.onload =function() {
        //图片请求成功
    }
    image.onerror = function() {
        //图片请求失败
    }
})
复制代码

这样,前端就可以悄无声息地创建一个请求,而不用去刷新页面获得结果了、

但是这个方法的缺陷就是 只能知道成功或者失败,而不能接收到数据

所以我们又想出了用script的办法:

JSONP

jsonp其实就是动态Html标签实现跨域请求
button.addEventListener('click',(e) => {
    let script = document.createElement('script');
    script.src="/pay"
    
})

jsonp的完整过程:
1.请求方
即一个网站的前端
2.响应方
即另一个网站的后端

首先,
请求方应该创建一个script标签,src的值指向响应方,同时传一个查询参数
:?callbackName=xxx
然后,
响应方根据查询参数callbackName,构造形如 xxx.call(undefined,'你要的数据')(或者xxx('你要的数据'))这样的响应
接着,
浏览器接收到响应之后,就会执行xxx.call(undefined,'你要的数据'),
那么这个时候请求方就知道了他要的数据了
这就是JSONP
复制代码

约定: (即关于JSONP行业内达成共识的)

1.callbackName 就叫做callback

2.xxx 一般就是随机数 比如jquery12434736362746

3. jQuery 用法

 $.ajax({
 url: "http://jack.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })
复制代码

面试题:

JSONP为什么不支持post请求?

因为JSONP是通过动态创建script来实现的,
动态创建script的时候只能用GET没有办法用POST
复制代码