最近在學(xué)ajax和跨域,于是就自己封裝了一個(gè),雖然有點(diǎn)粗糙但還是可以用的。其實(shí)jsonp的本質(zhì)就是:動(dòng)態(tài)創(chuàng)建script標(biāo)簽,然后通過src屬性發(fā)送跨域請(qǐng)求,然后服務(wù)器端響應(yīng)的數(shù)據(jù)格式為【函數(shù)調(diào)用(foo(實(shí)參))】,所以在發(fā)送請(qǐng)求之前必須先聲明一個(gè)函數(shù),并且函數(shù)的名字與參數(shù)中傳遞的名字要一致。這里聲明的函數(shù)是由服務(wù)器響應(yīng)的內(nèi)容(實(shí)際就是一段js代碼-函數(shù)調(diào)用)來調(diào)用。
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),姚安網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:姚安等地區(qū)。姚安做網(wǎng)站價(jià)格咨詢:18982081108
其他的就不多說了,直接上代碼。
'use strict'; function ajax(obj){ var defaults = { type:'get', url:'#', dataType:'text', jsonp:'callback', data:{}, async:true, success:function(data){console.log(data);} }; for(var k in obj){ defaults[k] = obj[k]; } if(defaults.dataType == 'jsonp') { //調(diào)用jsonp ajaxForJsonp(defaults); } else { //調(diào)用ajax json ajaxForJson(defaults); } } //json數(shù)據(jù)格式 function ajaxForJson(defaults){ //1、創(chuàng)建XMLHttpRequset對(duì)象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } var param = ''; for(var key in defaults.data) { param += key + '='+ defaults.data[key] + '&'; } if(param){ param = param.slice(0, param.length-1); } // 處理get請(qǐng)求參數(shù)并且處理中文亂碼問題 if(defaults.type == 'get') { defaults.url += '?' + encodeURI(param); } //2、準(zhǔn)備發(fā)送(設(shè)置發(fā)送的參數(shù)) xhr.open(defaults.type,defaults.url,defaults.async); // 處理post請(qǐng)求參數(shù)并且設(shè)置請(qǐng)求頭信息(必須設(shè)置) var data = null; if(defaults.type == 'post') { data = param; //設(shè)置請(qǐng)求頭 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } // 3、執(zhí)行發(fā)送動(dòng)作 xhr.send(data); //處理同步請(qǐng)求,不會(huì)調(diào)用回調(diào)函數(shù) if(!defaults.async) { if(defaults.dataType == 'json'){ return JSON.parse(xhr.responseText); } else { return xhr.responseText; } } //// 4、指定回調(diào)函數(shù)(處理服務(wù)器響應(yīng)數(shù)據(jù)) xhr.onreadystatechange = function() { if(xhr.readyState == 4){ if(xhr.status == 200){ var data = xhr.responseText; if(defaults.dataType == 'json'){ data = JSON.parse(data); } defaults.success(data); } } } } //跨域jsonp function ajaxForJsonp(defaults){ //cbName默認(rèn)的是回調(diào)函數(shù)名稱 var cbName = 'jQuery' + ('1.12.2' + Math.random()).replace(/\D/g,'') + '_' + (new Date().getTime()); if(defaults.jsonpCallback) { cbName = defaults.jsonpCallback; } //這里就是回調(diào)函數(shù),調(diào)用方式:服務(wù)器響應(yīng)內(nèi)容來調(diào)用 //向window對(duì)象中添加一個(gè)方法,方法名是變量cname的值 window[cbName] = function(data) { defaults.success(data);//這里success的data是實(shí)參 } var param = ''; for(var key in defaults.data){ param += key + '=' + defaults.data[key] + '&'; } if(param){ param = param.slice(0, param.length-1); param = '&' + param; } var script = document.createElement('script'); script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param; var head = document.getElementsByTagName('head')[0]; head.appendChild(script); }
以上這篇基于ajax和jsonp的原生封裝(實(shí)例)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前標(biāo)題:基于ajax和jsonp的原生封裝(實(shí)例)
分享地址:http://chinadenli.net/article28/jggecp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、定制開發(fā)、用戶體驗(yàn)、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)