| 标题 | 浅析JSONP技术原理及实现 |
| 范文 | 这篇文章主要介绍了浅析JSONP技术原理及实现 的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下 跨域问题一直是前端中常见的问题，每当说到跨域，第一浮现的技术必然就是JSONP JSONP在我的理解，它并不是ajax，它是在文档中插入一个script标签，创建_callback方法，通过服务器配合执行_callback方法，并传入一些参数 JSONP的局限就在于，因为是通过插入script标签，所以参数只能通过url传入，因此只能满足get请求，特别jQuery的ajax方法时，即使设置type: 'POST'，但是只要设置了dataType: 'jsonp'，在请求时，都会自动使用GET请求 实现逻辑 step1: 创建_callback方法 (_callback中可以删除script标签和_callback方法) step2: 插入script标签 step3: 服务器输出js 实现: var requestJsonp = function (opt) { var funName, script; /* * step1 创建_callback方法 */ //_callback函数名 funName = '_cb' + (Math.random() * 1000000); //创建_callback方法 window[funName] = function (data) { if (typeof opt.success == 'function') { opt.success(data); } window[funName] = null; delete window[funName]; document.body.removeChild(script); script = null; }; /* * step2 插入script标签 */ script = document.createElement('script'); script.type = 'text/javascript'; script.src = opt.url + (opt.url.indexOf('?') > -1 ? '&' : '?') + '_callback=' + funName; document.body.appendChild(script); /* * step3 服务器输出js * 服务器应接受url参数中_callback的值,作为函数名执行输出js * 类似输出 * _callback({"name":"jsonp","description":"jsonp test"}); */ /* * 处理error */ script.addEventListener('error', function () { window[funName] = null; delete window[funName]; if (typeof opt.error == 'function') { opt.error(); } document.body.removeChild(script); script = null; }); }; requestJsonp({ url: 'http://www.url.org?tid=Jsx2', success: function (data) { console.log(data); }, error: function () { console.log('request error!'); } }); 对于浏览器的行为就是插入script标签，执行js代码， 删除script标签 实现代码并没有考虑兼容以及传入data后生成url的问题。 下面给大家说下jsonp的优缺点： JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。 JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。 以上所述是小编给大家介绍的浅析JSONP技术原理及实现的相关知识，希望对大家有所帮助 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。