跨域请求之jsonp的实现方式

 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=zhangsan26 ????????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=sdfsfdg34 ????????querystring+=‘callback=‘+cbFuncName;35 ????????//querystring=?id=1&name=zhangsan&cb=my_json_cb_023124136 ????????//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);