這篇文章主要介紹原生JS如何發(fā)送異步數(shù)據(jù)請(qǐng)求,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)公司成立與2013年,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目成都網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元哈爾濱做網(wǎng)站,已為上家服務(wù),為哈爾濱各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792
在做項(xiàng)目的時(shí)候,有時(shí)候需要用到異步數(shù)據(jù)請(qǐng)求,但是如果這個(gè)時(shí)候沒有框架的依賴,就需要用到原生JS進(jìn)行異步數(shù)據(jù)請(qǐng)求。這時(shí)候無非有兩種請(qǐng)求方式,一種是AJAX,另一個(gè)是JSONP。通過原生JS對(duì)異步請(qǐng)求進(jìn)行簡(jiǎn)單的封裝。
AJAX
AJAX是一種數(shù)據(jù)請(qǐng)求方式,不需要刷新整個(gè)頁(yè)面就能夠更新局部頁(yè)面的數(shù)據(jù)。AJAX的技術(shù)核心是XMLHttpRequest對(duì)象,主要請(qǐng)求過程如下:
創(chuàng)建XMLHttpRequest對(duì)象(new)
連接服務(wù)器(open)
發(fā)送請(qǐng)求(send)
接收響應(yīng)數(shù)據(jù)(onreadystatechange)
不說話直接貼代碼
/** * 通過JSON的方式請(qǐng)求 * @param {[type]} params [description] * @return {[type]} [description] */ ajaxJSON(params) { params.type = (params.type || 'GET').toUpperCase(); params.data = params.data || {}; var formatedParams = this.formateParams(params.data, params.cache); var xhr; //創(chuàng)建XMLHttpRequest對(duì)象 if (window.XMLHttpRequest) { //非IE6 xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //異步狀態(tài)發(fā)生改變,接收響應(yīng)數(shù)據(jù) xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { if (!!params.success) { if (typeof xhr.responseText == 'string') { params.success(JSON.parse(xhr.responseText)); } else { params.success(xhr.responseText); } } } else { params.error && params.error(status); } } if (params.type == 'GET') { //連接服務(wù)器 xhr.open('GET', (!!formatedParams ? params.url + '?' + formatedParams : params.url), true); //發(fā)送請(qǐng)求 xhr.send(); } else { //連接服務(wù)器 xhr.open('POST', params.url, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //發(fā)送請(qǐng)求 xhr.send(formatedParams); } }, /** * 格式化數(shù)據(jù) * @param {Obj} data 需要格式化的數(shù)據(jù) * @param {Boolean} isCache 是否加入隨機(jī)參數(shù) * @return {String} 返回的字符串 */ formateParams: function(data, isCache) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name])); } if (isCache) { arr.push('v=' + (new Date()).getTime()); } return arr.join('&'); }
IE7及其以上版本中支持原生的 XHR 對(duì)象,因此可以直接用:var oAjax = new XMLHttpRequest();。IE6及其之前的版本中,XHR對(duì)象是通過MSXML庫(kù)中的一個(gè)ActiveXObject對(duì)象實(shí)現(xiàn)的。
通過xhr的open函數(shù)來連接服務(wù)器,主要接收三個(gè)參數(shù):請(qǐng)求方式、請(qǐng)求地址和是否異步請(qǐng)求(一般都是異步請(qǐng)求)。請(qǐng)求方式有兩種,GET和POST,GET是通過URL將數(shù)據(jù)提交到服務(wù)器的,POST則是通過將數(shù)據(jù)作為send方法的參數(shù)發(fā)送到服務(wù)器。
給xhr綁定狀態(tài)改變函數(shù)onreadystatechange,主要用來檢測(cè)xhr的readyState的變化,當(dāng)異步發(fā)送成功后,readyState的數(shù)值會(huì)由0變成4,同時(shí)觸發(fā)onreadystatechange事件。readyState的屬性及對(duì)應(yīng)狀態(tài)如下:
0 (未初始化) 對(duì)象已建立,但是尚未初始化(尚未調(diào)用open方法)
1 (初始化) 對(duì)象已建立,尚未調(diào)用send方法
2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用,但是當(dāng)前的狀態(tài)及http頭未知
3 (數(shù)據(jù)傳送中) 已接收部分?jǐn)?shù)據(jù),因?yàn)轫憫?yīng)及http頭不全,這時(shí)通過responseBody和responseText獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤
4 (完成) 數(shù)據(jù)接收完畢,此時(shí)可以通過通過responseBody和responseText獲取完整的回應(yīng)數(shù)據(jù)
在readystatechange事件中,先判斷響應(yīng)是否接收完成,然后判斷服務(wù)器是否成功處理請(qǐng)求,xhr.status 是狀態(tài)碼,狀態(tài)碼以2開頭的都是成功,304表示從緩存中獲取,上面的代碼在每次請(qǐng)求的時(shí)候都加入了隨機(jī)數(shù),所以不會(huì)從緩存中取值,故該狀態(tài)不需判斷。
JSONP
如果還是用上面的XMLHttpRequest對(duì)象來發(fā)送需要跨域的請(qǐng)求,雖然調(diào)用了send函數(shù),但是xhr的狀態(tài)一直都是0,也不會(huì)觸發(fā)onreadystatechange事件,這個(gè)時(shí)候就要用到JSONP的請(qǐng)求方式了。
JSONP(JSON with Padding) 是一種跨域請(qǐng)求方式。主要原理是利用了script標(biāo)簽可以跨域請(qǐng)求的特點(diǎn),由其src屬性發(fā)送請(qǐng)求到服務(wù)器,服務(wù)器返回js代碼,網(wǎng)頁(yè)端接受響應(yīng),然后就直接執(zhí)行了,這和通過script標(biāo)簽引用外部文件的原理是一樣的。
JSONP由兩部分組成:回調(diào)函數(shù)和數(shù)據(jù),回調(diào)函數(shù)一般是由網(wǎng)頁(yè)端控制,作為參數(shù)發(fā)往服務(wù)器端,服務(wù)器端把該函數(shù)和數(shù)據(jù)拼成字符串返回。
比如網(wǎng)頁(yè)端創(chuàng)建一個(gè)script標(biāo)簽,并給其src賦值為http://www.test.com/json/?callback=process, 此時(shí)網(wǎng)頁(yè)端就發(fā)起一個(gè)請(qǐng)求。服務(wù)端將要返回的數(shù)據(jù)拼作為函數(shù)的參數(shù)傳入,服務(wù)端返回的數(shù)據(jù)格式類似”process({‘name:'xieyufei'})”,網(wǎng)頁(yè)端接收到了響應(yīng)值,因?yàn)檎?qǐng)求者是 script,所以相當(dāng)于直接調(diào)用process方法,并且傳入了一個(gè)參數(shù)。
不說話直接貼代碼。
/** * 通過JSONP的方式請(qǐng)求 * @param {[type]} params [description] * @return {[type]} [description] */ ajaxJSONP(params) { params.data = params.data || {}; params.jsonp = params.jsonp || 'callback'; // 設(shè)置傳遞給后臺(tái)的回調(diào)參數(shù)名和參數(shù)值 var callbackName = 'jsonp_' + (new Date()).getTime(); params.data[params.jsonp] = callbackName; var formatedParams = this.formateParams(params.data, params.cache); //創(chuàng)建script標(biāo)簽并插入到頁(yè)面中 var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); head.appendChild(script); //創(chuàng)建jsonp回調(diào)函數(shù) window[callbackName] = function(json) { head.removeChild(script); clearTimeout(script.timer); window[callbackName] = null; params.success && params.success(json); }; //發(fā)送請(qǐng)求 script.src = (!!formatedParams ? params.url + '?' + formatedParams : params.url); //為了得知此次請(qǐng)求是否成功,設(shè)置超時(shí)處理 if (params.time) { script.timer = setTimeout(function() { window[callbackName] = null; head.removeChild(script); params.error && params.error({ message: '超時(shí)' }); }, params.time); } }
給script標(biāo)簽設(shè)置src屬性時(shí)瀏覽器就會(huì)去發(fā)送請(qǐng)求,但是只能發(fā)送一次請(qǐng)求,導(dǎo)致script標(biāo)簽不能復(fù)用,因此每次操作完都需要把script標(biāo)簽移除。在瀏覽器發(fā)送請(qǐng)求之前給全局綁定一個(gè)回調(diào)函數(shù),當(dāng)數(shù)據(jù)請(qǐng)求成功時(shí)就會(huì)調(diào)用這個(gè)回調(diào)函數(shù)。
總結(jié)
將兩種發(fā)送異步數(shù)據(jù)的方式整合起來,根據(jù)dataType來進(jìn)行判斷選用哪種方式。貼上完整的代碼
var xyfAjax = { ajax: function(params) { params = params || {}; params.cache = params.cache || false; if (!params.url) { throw new Error('參數(shù)不合法'); } params.dataType = (params.dataType || 'json').toLowerCase(); if (params.dataType == 'jsonp') { this.ajaxJSONP(params); } else if (params.dataType == 'json') { this.ajaxJSON(params); } }, /** * 通過JSONP的方式請(qǐng)求 * @param {[type]} params [description] * @return {[type]} [description] */ ajaxJSONP(params) { params.data = params.data || {}; params.jsonp = params.jsonp || 'callback'; // 設(shè)置傳遞給后臺(tái)的回調(diào)參數(shù)名和參數(shù)值 var callbackName = 'jsonp_' + (new Date()).getTime(); params.data[params.jsonp] = callbackName; var formatedParams = this.formateParams(params.data, params.cache); //創(chuàng)建script標(biāo)簽并插入到頁(yè)面中 var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); head.appendChild(script); //創(chuàng)建jsonp回調(diào)函數(shù) window[callbackName] = function(json) { head.removeChild(script); clearTimeout(script.timer); window[callbackName] = null; params.success && params.success(json); }; //發(fā)送請(qǐng)求 script.src = (!!formatedParams ? params.url + '?' + formatedParams : params.url); //為了得知此次請(qǐng)求是否成功,設(shè)置超時(shí)處理 if (params.time) { script.timer = setTimeout(function() { window[callbackName] = null; head.removeChild(script); params.error && params.error({ message: '超時(shí)' }); }, params.time); } }, /** * 通過JSON的方式請(qǐng)求 * @param {[type]} params [description] * @return {[type]} [description] */ ajaxJSON(params) { params.type = (params.type || 'GET').toUpperCase(); params.data = params.data || {}; var formatedParams = this.formateParams(params.data, params.cache); var xhr; //創(chuàng)建XMLHttpRequest對(duì)象 if (window.XMLHttpRequest) { //非IE6 xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //異步狀態(tài)發(fā)生改變,接收響應(yīng)數(shù)據(jù) xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { if (!!params.success) { if (typeof xhr.responseText == 'string') { params.success(JSON.parse(xhr.responseText)); } else { params.success(xhr.responseText); } } } else { params.error && params.error(status); } } if (params.type == 'GET') { //連接服務(wù)器 xhr.open('GET', (!!formatedParams ? params.url + '?' + formatedParams : params.url), true); //發(fā)送請(qǐng)求 xhr.send(null); } else { //連接服務(wù)器 xhr.open('POST', params.url, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //發(fā)送請(qǐng)求 xhr.send(formatedParams); } }, /** * 格式化數(shù)據(jù) * @param {Obj} data 需要格式化的數(shù)據(jù) * @param {Boolean} isCache 是否加入隨機(jī)參數(shù) * @return {String} 返回的字符串 */ formateParams: function(data, isCache) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name])); } if (isCache) { arr.push('v=' + (new Date()).getTime()); } return arr.join('&'); } } xyfAjax.ajax({ url:'http://www.xieyufei.com', type:'get', //or post dataType:'json', //or jsonp data:{ name:'xyf' }, success: function(data){ console.log(data) } })
以上是“原生JS如何發(fā)送異步數(shù)據(jù)請(qǐng)求”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站標(biāo)題:原生JS如何發(fā)送異步數(shù)據(jù)請(qǐng)求
文章來源:http://bm7419.com/article14/gossge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、手機(jī)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、全網(wǎng)營(yíng)銷推廣、品牌網(wǎng)站建設(shè)、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)