美文网首页
关于JSONP技术

关于JSONP技术

作者: 印第安老斑鸠_333 | 来源:发表于2019-03-13 23:55 被阅读0次

0,什么是数据库?文件系统是数据库,MYSQL是数据库,MYSQL是一个软件,用来做数据库。

1.先简单了解一下后端代码(nodejs)供自己理解后端代码的含义

xxx.readFileSync('①', '②')           读取文件内容 ①路径  ②编码格式

xxx.writeFileSync('①', '②')          写入文档内容 ①路径  ②写入内容

response.setHeader('①', '②')      设置响应头 ①key ②value

response.write('①')                       返回给浏览器的响应内容

2.JSONP技术的历史

①,在以前,网页加载完成后,使用form表单给服务器发送请求来更改数据库数据,但这样做用户体验不佳,因为这样总会打开一个新页面或者刷新当前页面。虽然可以form+iframe这样操作,但是用户体验并不能得到很高的提升。

②,怎样才能既不跳转页面又能自动(也能局部)刷新呢?于是乎动态创建img标签的技术就出来了,用JS 动态创建img标签并监听load事件,再通过img的src属性来发送请求就把这件事情给办了,服务器虽然可以通过这样的请求方式来更改数据库的数据,但是服务器端返回的数据却不能被前端操作,因为是img标签发起的请求,只能通过img标签来获取响应内容,最终不过得到一张图而已。

③,那么可以让服务器端响应的内容当做脚本运行吗?于是乎动态创建script标签的技术就出来了,因为它也有src属性,也能发送请求,所以完全可以用它来替代img标签,这样既能局部刷新页面,又能执行响应的JS代码,太棒了。这种技术叫做SRJ(Server Rendered JavaScript)。

④,类似<a>,<link>,<img>,<script>等标签的src属性不一定要请求与所属页面相同的域名和路径的,它们完全可以请求另外的域名和路径。所以动态动态script技术是可以跨域名的。这种就叫做跨域SRJ。就是A网站的前端去请求B网站的后端服务器数据,就是跨域SRJ。

PS:关于耦合与解耦

        耦合:后端程序员掌握了前端代码(掌握你代码中的变量,对象等等),完美的知道前端想用做些什么,响应内容与前端代码完美契合。

        解耦:耦合是不现实的,因为后端程序员不会闲的蛋疼去了解前端代码,所以要避免这种情况。前端程序员只需要把需要得到的响应内容封装成函数,然后通过查询参数告诉后端。后端要做的只是把需要返回的数据当做参数传入这个函数并以调用函数的形式当做响应内容让前端获取就行了。

⑤,JSONP属于跨域SRJ。具体细节操作见下例:

        A网站的动态创建的script标签的src属性指向B网站的后端服务器(请求数据),并且路径后面加上查询参数?callback=函数名

        服务器根据查询参数,以调用函数的形式响应给浏览器:函数名(需要返回的数据)或者用call方法。

        浏览器接收到响应,就会执行 yyy.call(undefined, '你要的数据')

        那么请求方就知道了他要的数据

这就是JSONP,具体代码如下:

前端代码 后端代码

⑥,为了协调前后端的交互,有了以下约定,这也是上面代码的规范:

    1,给后端的参数:callback=函数名

    2,函数名用随机数:

            var fun ='haha'+parseInt(Math.random()*100000,10)

            window[fun] = function(){}

⑦,上述为原生JS,jQuery写法如下:

jQuery的JSONP写法

⑧,必须注意JSONP不是ajax。

⑨,一道面试题:JSONP 为什么不支持 POST?

        答:JSONP技术是通过动态创建script标签实现的,

                script标签不能发送POST请求

相关文章

  • 关于JSONP技术

    0,什么是数据库?文件系统是数据库,MYSQL是数据库,MYSQL是一个软件,用来做数据库。 1.先简单了解一下后...

  • 常见跨域解决方案

    跨域 JSONP 使用 标签不受同源策略影响的特性,作为Ajax传输技术称为JSONP。 使用JSONP时,需要服...

  • AJAX原理和实现方式

    JSONP发展 了解了JSONP技术栈后,知道了JSONP是AJAX出现之前后端交互最好的解决方案,但它依然没解决...

  • 前端 JSONP 原理及 Node 模拟 JSONP

    1、关于 JSONP 请求的注意项 a、JSONP 请求只支持 GET 形式 b、JSONP 请求返回的是一个自定...

  • JSONP的劫持

    关于 JSONP JSONP 全称是 JSON with Padding ,是基于 JSON 格式的为解决跨域请求...

  • 关于jsonp劫持

    关于jsonp JSONP 全称是 JSON with Padding ,是基于 JSON 格式的为解决跨域请求资...

  • 关于JSONP

    用 img 发送请求 只能用 get 方法,只能以图片的形式展示 后台 用 script 方法请求 script ...

  • JSONP技术栈

    简单的前后端交互 前面学习了这么多,都是在和页面打交道,不管是HTML、CSS、JavaScript,DOM,都没...

  • 正则 jsonp 本地存储 jqueryui

    jsonp ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,jsonp可...

  • 正则 jsonp 本地存储 jqueryui

    jsonp ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,jsonp可...

网友评论

      本文标题:关于JSONP技术

      本文链接:https://www.haomeiwen.com/subject/ybixmqtx.html