這篇文章主要為大家展示了“如何使用原生js封裝的ajax實例”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用原生js封裝的ajax實例”這篇文章吧。
十多年專業(yè)網(wǎng)站建設(shè)公司歷程,堅持以創(chuàng)新為先導(dǎo)的網(wǎng)站服務(wù),服務(wù)超過數(shù)千家企業(yè)及個人,涉及網(wǎng)站設(shè)計、重慶APP開發(fā)、微信開發(fā)、平面設(shè)計、互聯(lián)網(wǎng)整合營銷等多個領(lǐng)域。在不同行業(yè)和領(lǐng)域給人們的工作和生活帶來美好變化。
實例如下:
/* 封裝ajax函數(shù) * @param {string}opt.type http連接的方式,包括POST和GET兩種方式 * @param {string}opt.url 發(fā)送請求的url * @param {boolean}opt.async 是否為異步請求,true為異步的,false為同步的 * @param {object}opt.data 發(fā)送的參數(shù),格式為對象類型 * @param {function}opt.success ajax發(fā)送并接收成功調(diào)用的回調(diào)函數(shù) */ 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實例”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!