位置: 编程技术 - 正文
基于JSONP原理解析(推荐)(jsoncpp rapidjson)
编辑：rootadmin推荐整理分享基于JSONP原理解析(推荐)(jsoncpp rapidjson)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jsoncpp使用,jsonp实现原理解析,jsonp实现原理解析,jsonp工作原理,jsonp实现原理解析,jsonp实现原理解析,json原理及简单实现,jsonp实现原理解析,内容如对您有帮助，希望把文章链接给更多的朋友！
前言
我工作以来接触的第一个项目就是前后端分离的，前端静态文件有自己独立域名，通过接口来获取数据进行渲染等操作。
跨域的方法不需要多言，随便一搜，就有很多，但最常用不外乎jsonp和CORS。jsonp着重于前端，也算是前端Hack技巧，CORS重于后端，服务端需要配置的地方会较多。
这篇解析一下jsonp的实现原理。
基本原理
基本原理很容易说明白，在html页面中有一些标签是不受跨域限制的，比如img，script，link等。如果把我们需要的数据，放在一个js文件里面，这时，我们就能突破浏览器同源的限制。
创建script标签
《高性能JavaScript》中提到了动态脚本元素，作者写道：
1、文件在该元素被添加到页面时开始下载。这种技术的重点在于：无论何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。
2、使用动态脚本节点下载文件时，返回的代码通常会立刻执行（除了Firefox和Oprea，它们会等待此前所有动态脚本节点执行完毕。）当脚本自执行时，这种机制运行正常。
引用1保证了JSONP请求的时候不会阻塞主线程，引用2保证了JSONP代码在加载完成后，立刻自执行时不会出错。
callback
服务端在接收到GET请求之后，通常要判断是否有callback参数，如果有，则需要在返回的数据外面加上一个方法名和括号。例如，发起如下请求：
那么服务端就会返回如下内容：
很明显，由于这是在动态加载的Script标签中包含的内容，那么这就是一段自执行代码，这段代码只有一个函数被调用———jsonp0。
当然，有执行，则必须先创建，否则就会报错。创建这一步，就需要在调用前执行。
具体实现如下：
上面基本上完成了一个jsonp方法的核心，此时，jsonp0是我们声明好的一个函数，如果服务端正常回传的时候，就会执行jsonp0函数，里面的successCallback回调也会执行。
完善一下
在实际情况下，通常会有许多个jsonp的请求同时调用，
那么既然jsonp0就能满足我们的需要，为什么常常看到jsonp1，jsonp2等等依次累加的代码呢？
这是因为，请求可能是很多个异步进行。在第一次执行jsonp方法时，window.jsonp0是函数A，此时去加载js文件，在js未加载完毕的情况下，又调用了一次jsonp方法，此时，window.jsonp0指向了函数B。那么等到两次的js加载完毕以后，都会执行第二次的回调。
所以，我们需要对callback的名字做一个区别处理，累加就能满足需要。
修改一下代码：
加入了累加和清理之后，还有一个重要的地方需要处理，就是错误回调。正常来说，我们通常请求jsonp时，会设定一个超时时间，如果超过这个时间以后，就抛出超时异常。
实现如下：
这样，基本上就完成了jsonp的全部功能，剩下的可能需要做一些兼容的修改，才算是一个完整的jsonp方法。
REFER
《高性能JavaScript》
npm上的一个jsonp实现，JSONP
以上这篇基于JSONP原理解析(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持积木网。
基于JavaScript中字符串的match与replace方法(详解) 1、match方法match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。match()方法的返回值为：存放匹配结果的数组。2、replace方法repl
深入浅出webpack之externals的使用 我们通常在做项目时可能会把第三方库打包到bundle中，比如下面这张图如果不想把第三方库打包到bundle中，这就有了externals。官方的使用externals比较简
bootstrap3中container与container_fluid外层容器的区别讲解 .container与.container_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是：.container类用于固定宽度并支持响应式布局的容器。.c
上一篇：利用Javascript获取选择文本所在的句子详解(js 获取ua)
下一篇：基于JavaScript中字符串的match与replace方法(详解)(javascript例子)
