首页 > web前端 > js教程 > javascript中ajax和jsonp使用技巧代码详解

javascript中ajax和jsonp使用技巧代码详解

伊谢尔伦
发布: 2017-07-20 10:10:58
原创
1233 人浏览过

Ajax请求

jquery ajax函数

封装了一个ajax的函数,代码如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var Ajax = function(url, type success, error) {

$.ajax({

url: url,

type: type,

dataType: 'json',

timeout: 10000,

success: function(d) {

var data = d.data;

success && success(data);

},

error: function(e) {

error && error(e);

}

});

};

// 使用方法:

Ajax('/data.json', 'get', function(data) {

console.log(data);

});

登录后复制

jsonp方式

有时候我们为了跨域,要使用jsonp的方法,也封装了一个函数:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

function jsonp(config) {

var options = config || {}; // 需要配置url, success, time, fail四个属性

var callbackName = ('jsonp_' + Math.random()).replace(".", "");

var oHead = document.getElementsByTagName('head')[0];

var oScript = document.createElement('script');

oHead.appendChild(oScript);

window[callbackName] = function(json) { //创建jsonp回调函数

oHead.removeChild(oScript);

clearTimeout(oScript.timer);

window[callbackName] = null;

options.success && options.success(json); //先删除script标签,实际上执行的是success函数

};

oScript.src = options.url + '?' + callbackName; //发送请求

if (options.time) { //设置超时处理

oScript.timer = setTimeout(function () {

window[callbackName] = null;

oHead.removeChild(oScript);

options.fail && options.fail({ message: "超时" });

}, options.time);

}

};

// 使用方法:

jsonp({

url: '/b.com/b.json',

success: function(d){

//数据处理

},

time: 5000,

fail: function(){

//错误处理

}

});

登录后复制

以上是javascript中ajax和jsonp使用技巧代码详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
怎么实现 JavaScript点与圆的位置关系
来自于 1970-01-01 08:00:00
0
0
0
JavaScript钩子函数是什么?
来自于 1970-01-01 08:00:00
0
0
0
c++ 调用javascript
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板