跨域请求之jsonp的实现方式
ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
1 (function(){ 2 $jsonp(//地址 3 'http://api.douban.com/v2/movie/in_theaters', 4 //传递的参数 5 { 6 count:10,start:5 7 }, 8 //回调函数 9 function(data){ 10 document.getElementById('result').innerHTML=JSON.stringify(data); 11 } 12 ); 13 })(); 14 15 16 (function(window,document){ 17 'use strict'; 18 var jsonp=function(url,data,callback){ 19 //1 挂载回调函数 20 var fnSuffix=Math.random().toString().replace('.',''); 21 var cbFuncName='my_json_cb_'+fnSuffix; 22 //将函数挂载在全局环境的方式不推荐 使用cbs.my_json_cb_ 23 window[cbFuncName]=callback; 24 //2 将data转化成url字符串的形式 25 // {id:1,name:'zhangsan'} =>id=1&name=zhangsan 26 var querystring=url.indexOf('?')==-1?'?':'&'; 27 for(var key in data){ 28 querystring+=key+'='+data[key]+'&'; 29 // id= 1 & 30 } 31 //querystring=?id=1&name=zhangsan& 32 //3 处理url地址中的回调参数 33 //url+=callback=sdfsfdg 34 querystring+='callback='+cbFuncName; 35 //querystring=?id=1&name=zhangsan&cb=my_json_cb_0231241 36 //4 创建一个script的标签 37 var scriptElement=document.createElement('script'); 38 scriptElement.src=url+querystring; 39 // 此时还不能将其append到页面上 40 //5 将script标签放到页面中 41 document.body.appendChild(scriptElement); 42 //append过后页面会自动对这个地址发送请求,请求完成以后自动执行脚本 43 44 }; 45 /*把jsonp放到全局*/ 46 window.$jsonp=jsonp; 47 })(window,document);
缺点:只能支持GET请求而不能支持POST等其他http请求方式;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
优点:支持跨域,兼容性好。。。