原生js封装ajax(兼容jsonp) 使用原生js封装的ajax实例(兼容jsonp)
mapbar_front 人气:0想了解使用原生js封装的ajax实例(兼容jsonp)的相关内容吗,mapbar_front在本文为您仔细讲解原生js封装ajax(兼容jsonp)的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:原生js封装ajax,下面大家一起来学习吧。
实例如下:
/* 封装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)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
加载全部内容