jsonp手写1

 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>