【方案】JSONP跨域原理及最优解决方案.docx

精品word学习资料可编辑 名师归纳总结——欢迎下载 关于 JSONP 跨域恳求数据的原理及最优解决方案 什么是 JSONP ？它的实现原理？ JSONP即 JSON with Padding ；由于同源策略的限制， XmlHttpRequest 只答应恳求当前源（域名，协议，端口）的资源；假如要进行跨域恳求，我们可以通过使用 html 的script 标记来进行跨域恳求，并在响应中返回要执行的 script 代码，其中可以直接使用JSON传递 javascript 对象；这种跨域的通讯方式称为 JSONP； 其实说白了，就是利用 script 标签这种不受跨域的限制向服务器发送一个恳求，服务器端返回的为一个可执行的 javascript 文件，如下代码示例： script src =response_jsonp.html.user_id=1230 /script div id =data /div 3. script ( function ( doc ) { var data = doc . getElementById ( data ); data . innerHTML = id: + jsonp . id + br/name: + jsonp . name ; } )( document ); /script 第一向服务器端发起一个恳求并传入参数 user_id ，服务器端返回的数据如下： 1. window [ jsonp ] = { 2. id : 12 , 3. name : jsonp 4. } 优化方案 服务器端返回的 JSON 格式的数据直接赋值给 window 下的 jsonp 变量，这样在页面中就可以通过 jsonp 这个变量取得数据了； 不过上面的代码看起来并不文雅，我们把 script 标签直接写在了恳求的页面中，这样存在一个风险，假如我们在没有拿到数据前就用了 jsonp 这个变量， js 就会报错，堵塞后面脚本的执行； 之前一篇中提到过无堵塞式加载 js，我们可以通过动态创建 script 标签，异步向服务器端发送恳求，代码如下： 1. div id =data /div 2. script 精品word学习资料可编辑 名师归纳总结——欢迎下载 function loadScript ( url , callback ) { var script = document . createElement ( script ); script . type = text/javascript ; 7. if ( script . readyState ) { script . onreadystatechange = function () { if ( script . readyState == loaded || script . readyState == complete ) { script . onreadystatechange = null ; if ( callback ) { callback (); 14. } 15. } 16. } } else { script . onload = function () { if ( callback ) { callback (); 21. } 22. } 23. } 24. script . src = url ; document . getElementsByTagName ( head )[ 0 ]. appendChild ( script ); 27. } 28. /script 29. 30. script 31. ( function ( doc ) { 32. loadScript ( response_jsonp.html.user_id=1230 , function () { 33. var data = doc . getElementById ( data ); 34. data . innerHTML = id: + jsonp . id + br/name: + jsonp . name ; 35. } ); 36. } )( document ); 37. /script 我们把动态创建 script 标签的方法封装在 loadScript() 方法中，接受两个参数，一个是恳求的 url ，另外一个是恳求胜利后的回调函数，这样就可以保证我们执行的代码是在恳求 胜利之后执行的，这样就不会造成先执行，但仍没有恳求胜利的问题； 但是我们仍发觉一个问题，服务器端返回的 JSON 格式的数据是直接赋值给了 window 下的全局变量，这样对全局造成了污染，并不好；更好的解决方法是