最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

使用原生js封装的ajax实例(兼容jsonp)

来源:动视网 责编:小采 时间:2020-11-27 22:27:57
文档

使用原生js封装的ajax实例(兼容jsonp)

使用原生js封装的ajax实例(兼容jsonp):实例如下: /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 * @para
推荐度:
导读使用原生js封装的ajax实例(兼容jsonp):实例如下: /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 * @para


实例如下:

/* 封装ajax函数
 * @param {string}opt.type http连接的方式,包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
 * @param {object}opt.data 发送的参数,格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
 function ajax(opt) {
 opt = opt || {};
 opt.method = opt.method.toUpperCase() || 'POST';
 opt.url = opt.url || '';
 opt.async = opt.async || true;
 opt.data = opt.data || null;
 opt.success = opt.success || function () {};
 opt.dataType = opt.dataType || "json";
 var xmlHttp = null;
 if (XMLHttpRequest) {
 xmlHttp = new XMLHttpRequest();
 }
 else {
 xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
 }var params = [];
 for (var key in opt.data){
 params.push(key + '=' + opt.data[key]);
 }
 var postData = params.join('&');
 if (opt.method.toUpperCase() === 'POST') {
 xmlHttp.open(opt.method, opt.url, opt.async);
 xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
 xmlHttp.send(postData);
 }
 else if (opt.method.toUpperCase() === 'GET') {
 xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
 xmlHttp.send(null);
 } 
 xmlHttp.onreadystatechange = function () {
 if(opt.dataType != 'jsonp'){
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
 opt.success(xmlHttp.responseText);
 }
 }else{
 //alert(1); 
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
 var oScript = document.createElement('script');
 document.body.appendChild(oScript);

 var callbackname = 'wangxiao'
 oScript.src = opt.url + "?" + postData+'&callback='+callbackname;

 window['wangxiao'] = function(data) {
 opt.success(data);
 document.body.removeChild(oScript);
 };
 }


 }

 };
 }
 export default ajax;

以上这篇使用原生js封装的ajax实例(兼容jsonp)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

文档

使用原生js封装的ajax实例(兼容jsonp)

使用原生js封装的ajax实例(兼容jsonp):实例如下: /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 * @para
推荐度:
标签: 使用 封装 实例
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top