1. 程式人生 > >使用原生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為同步的
 * @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;