1 <script> 2 /* 3 jsonp({ 4 url: 'http://localhost:3000/', 5 data: '', 6 success: function(data){ 7 console.log(data); 8 } 9 }) 10 */ 11 12 (function (w) { 13 /** 14 * jsonp的实现 15 * @param {Object}option 16 */ 17 function jsonp(option) { 18 // 1. 函数挂载在全局 19 w.getData = option.success; 20 // 2. 处理url链接 21 option.url = option.url + '?callback=getData'; 22 // 3. 创建script标签插入body 23 var scriptEle = document.createElement('script'); 24 scriptEle.src = option.url; 25 document.body.appendChild(scriptEle); 26 } 27 w.jsonp = jsonp; 28 })(window); 29 </script> 30 <script> 31 jsonp({ 32 url: 'http://localhost:3000/', 33 success: function (data) { 34 console.log(data); 35 alert('111'); 36 } 37 }); 38 39 jsonp({ 40 url: 'http://localhost:3000/', 41 success: function (data) { 42 console.log(data); 43 alert('222'); 44 } 45 }); 46 47 jsonp({ 48 url: 'http://localhost:3000/', 49 success: function (data) { 50 console.log(data); 51 alert('333'); 52 } 53 }); 54 </script>
多次调用会发生结果覆盖
1 <script> 2 (function (w) { 3 /** 4 * jsonp的实现 5 * @param {Object}option 6 */ 7 function jsonp(option) { 8 // 0. 产生不同的函数名 9 var callBackName = 'itLike' + Math.random().toString().substr(2) + Math.random().toString().substr(2); 10 // console.log(callBackName); 11 // 1. 函数挂载在全局 12 w[callBackName] = option.success; 13 // 2. 处理url链接 14 option.url = option.url + '?callback=' + callBackName; 15 // 3. 创建script标签插入body 16 var scriptEle = document.createElement('script'); 17 scriptEle.src = option.url; 18 document.body.appendChild(scriptEle); 19 } 20 w.jsonp = jsonp; 21 })(window); 22 </script> 23 <script> 24 jsonp({ 25 url: 'http://localhost:3000/', 26 success: function (data) { 27 console.log(data); 28 alert('111'); 29 } 30 }); 31 32 jsonp({ 33 url: 'http://localhost:3000/', 34 success: function (data) { 35 console.log(data); 36 alert('222'); 37 } 38 }); 39 40 jsonp({ 41 url: 'http://localhost:3000/', 42 success: function (data) { 43 console.log(data); 44 alert('333'); 45 } 46 }); 47 </script>
1 <script> 2 (function (w) { 3 /** 4 * jsonp的实现 5 * @param {Object}option 6 */ 7 function jsonp(option) { 8 // 0. 产生不同的函数名 9 var callBackName = 'itLike' + Math.random().toString().substr(2) + Math.random().toString().substr(2); 10 // console.log(callBackName); 11 // 1. 函数挂载在全局 12 w[callBackName] = function (data) { 13 option.success(data); 14 // 删除script标签 15 document.body.removeChild(scriptEle); 16 }; 17 // 2. 处理url链接 18 option.url = option.url + '?callback=' + callBackName; 19 // 3. 创建script标签插入body 20 var scriptEle = document.createElement('script'); 21 scriptEle.src = option.url; 22 document.body.appendChild(scriptEle); 23 } 24 w.jsonp = jsonp; 25 })(window); 26 </script> 27 <script> 28 jsonp({ 29 url: 'http://localhost:3000/', 30 success: function (data) { 31 console.log(data); 32 alert('111'); 33 } 34 }); 35 36 jsonp({ 37 url: 'http://localhost:3000/', 38 success: function (data) { 39 console.log(data); 40 alert('222'); 41 } 42 }); 43 44 jsonp({ 45 url: 'http://localhost:3000/', 46 success: function (data) { 47 console.log(data); 48 alert('333'); 49 } 50 }); 51 </script>