JSONP跨域原理及最优解决方案

1、关于JSONP跨域请求数据的原理及最优解决方案什么是JSONP ?它的实现原理？JSONP即卩JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当 前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。其实说白了，就是利用script标签这种不受跨域的限制向服务器发送一个请求，服务器端返回的为一个可执行的javascript文件，如下代码示例：.5.(fu

2、nction( doc )6.var data = doc.getElementByld(data);7.data. innerHTML=id: + jsonp.id +name:+jsonp . name ;8. )( document );9.首先向服务器端发起一个请求并传入参数user_id，服务器端返回的数据如下:1.window jsonp:=2.id : 12,3.name : jsonp4.优化方案服务器端返回的 JSON格式的数据直接赋值给 window下的jsonp变量，这样在页面中 就可以通过jsonp这个变量取得数据了。不过上面的代码看起来并不优雅，我们把script标签

3、直接写在了请求的页面中，这样存在一个风险，如果我们在没有拿到数据前就用了jsonp这个变量，js就会报错，阻塞后面脚本的执行。之前一篇中提到过无阻塞式加载js，我们可以通过动态创建script标签，异步向服务器端发送请求，代码如下：1. 2.3. 4.functionloadScript( url , callback) 5.var script=document . createElement(script);6.scripttype = text/javascript;7.8.if ( script.readyState) 9.script.onreadystatechange= func

4、tion()10.if(script . readyState=loaded|script.readyState=complete) 11.script.onreadystatechange=null ;12.if ( callback) 13.callback();7. else18.script.onload = function()19.if(callback) 20.callback();4.25.scriptsrc = url ;26.document.getElementsByTagName( head)0 appendChild ( scr

5、ipt27.h1.(function(doc ) 32.loadScript(response_jsonp.html?user_id=1230,function() 33.vardata = doc . getElementByld(data);34.datainnerHTML = id: + jsonp.id+ name:+jsonp . name ;35.);36. )( document);37.我们把动态创建 script标签的方法封装在loadScript()方法中，接受两个参数，一个是 请求的url，另外一个是请求成功后的回调函数，这样就可以保证我们执行的代码是

6、在请求 成功之后执行的，这样就不会造成先执行，但还没有请求成功的问题。但是我们还发现一个问题，服务器端返回的JSON格式的数据是直接赋值给了 window下的全局变量，这样对全局造成了污染，并不好。更好的解决办法是在请求的url后加一个回调函数的参数，如下代码所示：.functionloadScript( url , callback)5.var script=document . createElement(script1);6.script. type=text/javascript;7.8.if ( script.readyState) 9.script.on readys

7、tatecha nge= function()10.if ( script. readyState=loadedIIscript. readyState= complete) 11.script.onreadystatechange=null ;12.if ( callback) 13.callback();7. else18.script.onload= function()19.if ( callback) 20.callback();4.25.script.src = url ;26.docume nt.getElementsByTagName(h

8、ead)0.appendChild ( script);0.31.(function(doc ) 32.wi ndowjson Parse = fun ctio n(data)33.vardata = doc . getElementByld(data);34.data.inn erHTML= id: + data.id +n ame:+data . name;35.;36.37.loadScript(response_jsonp.html?user_id=1230&callback=js on Parse);38. )( document);39.此时服务器端返回的数据为

9、，如后端语言为php，则返回的代码为：1. echo $_GET callback . ( id :12, name: jsonp )这样就可以解决变量全局污染的问题，同时也让我们的接口变得更加通用，而不是写 死的。JSONP的不足之处及安全问题JSONP的好处就是能够很好的解决跨域请求的问题，但是也有一些不足之处：? 请求的状态不够丰富，我们只能侦听请求成功时的状态，如果请求失败，我们无法通 过一个状态码知晓，所以如果请求失败的话，没有任何反馈给用户，可能会造成用户 的困惑。? 由于script标签不受同源的限制，同时也造成了一些安全性的问题 使用远端网站的script标签会让远端网站得以注入任何的内容至网站里。如果远端的网站