原生js實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)
上一篇文章寫到原生js取代jquery的一些常用函數(shù):原生js仿jquery一些常用方法,那么,ajax如何實(shí)現(xiàn)呢?如下是一個(gè)比較完整的ajax()
function ajax(){ var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].async || "true", data:arguments[0].data || null, dataType:arguments[0].dataType || "text", contentType:arguments[0].contentType || "application/x-www-form-urlencoded", beforeSend:arguments[0].beforeSend || function(){}, success:arguments[0].success || function(){}, error:arguments[0].error || function(){} } ajaxData.beforeSend() var xhr = createxmlHttpRequest(); xhr.responseType=ajaxData.dataType; xhr.open(ajaxData.type,ajaxData.url,ajaxData.async); xhr.setRequestHeader("Content-Type",ajaxData.contentType); xhr.send(convertData(ajaxData.data)); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if(xhr.status == 200){ ajaxData.success(xhr.response) }else{ ajaxData.error() } } } } function createxmlHttpRequest() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } } function convertData(data){ if( typeof data === 'object' ){ var convertResult = "" ; for(var c in data){ convertResult+= c + "=" + data[c] + "&"; } convertResult=convertResult.substring(0,convertResult.length-1) return convertResult; }else{ return data; } }
使用格式跟jquery的ajax差不多:
ajax({ type:"POST", url:"ajax.php", dataType:"json", data:{"val1":"abc","val2":123,"val3":"456"}, beforeSend:function(){ //some js code }, success:function(msg){ console.log(msg) }, error:function(){ console.log("error") } })
以上就是小編為大家?guī)淼脑鷍s實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)的全部?jī)?nèi)容了,希望對(duì)大家有所幫助,多多支持腳本之家~
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
- JQuery處理json與ajax返回JSON實(shí)例代碼
- $.ajax json數(shù)據(jù)傳遞方法
- jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- javascript jQuery $.post $.ajax用法
- 淺析ajax請(qǐng)求json數(shù)據(jù)并用js解析(示例分析)
- node.js+Ajax實(shí)現(xiàn)獲取HTTP服務(wù)器返回?cái)?shù)據(jù)
- jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼
- jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實(shí)現(xiàn)方法
- 一個(gè)簡(jiǎn)單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
- jsp中利用jquery+ajax在前后臺(tái)之間傳遞json格式參數(shù)
- javascript實(shí)現(xiàn)原生ajax的幾種方法介紹
- jquery用ajax方式從后臺(tái)獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- 跨域請(qǐng)求之jQuery的ajax jsonp的使用解惑
- 分享5個(gè)頂級(jí)的JavaScript Ajax組件庫(kù)
相關(guān)文章
向當(dāng)前style sheet中插入一個(gè)新的style實(shí)現(xiàn)方法
今天為了臨時(shí)解決頁(yè)面樣式問題,為了方便,直接在這個(gè)公共的js里面向style sheet插入新的style rule,感興趣的朋友可以出納卡下哈2013-04-04js 實(shí)現(xiàn)圖片預(yù)加載(js操作 Image對(duì)象屬性complete ,事件onload 異步加載圖片)
通過js操縱DOM很多情況下都是為了實(shí)現(xiàn)和當(dāng)前頁(yè)html元素的異步載入,我談?wù)剬?duì)Image對(duì)象的一些認(rèn)識(shí)。2011-03-03jQuery實(shí)現(xiàn)鼠標(biāo)放置名字上顯示詳細(xì)內(nèi)容氣泡提示框效果的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)放置名字上顯示詳細(xì)內(nèi)容氣泡提示框效果的方法,結(jié)合實(shí)例形式分析了jQuery結(jié)合bootstrap插件實(shí)現(xiàn)的鼠標(biāo)響應(yīng)式提示框相關(guān)操作技巧,需要的朋友可以參考下2020-04-04js實(shí)現(xiàn)二級(jí)導(dǎo)航功能
本文主要介紹了js實(shí)現(xiàn)二級(jí)導(dǎo)航功能的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03javascript動(dòng)態(tài)創(chuàng)建表格及添加數(shù)據(jù)實(shí)例詳解
這篇文章主要介紹了javascript動(dòng)態(tài)創(chuàng)建表格及添加數(shù)據(jù),以實(shí)例形式分析了javascript動(dòng)態(tài)創(chuàng)建表格的常用方法,包括不兼容IE6與兼容IE6的實(shí)現(xiàn)方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05RGB轉(zhuǎn)換實(shí)現(xiàn)代碼,淘寶前端開發(fā)工程師筆試題
寫一個(gè)轉(zhuǎn)換RGB的值的函數(shù),實(shí)現(xiàn)以下效果。2010-11-11JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能,結(jié)合實(shí)例形式總結(jié)分析了javascript獲取數(shù)組最大值與最小值的三種常見操作技巧,需要的朋友可以參考下2019-03-03