原生js實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)
上一篇文章寫(xiě)到原生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ī)?lái)的原生js實(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è)面樣式問(wèn)題,為了方便,直接在這個(gè)公共的js里面向style sheet插入新的style rule,感興趣的朋友可以出納卡下哈2013-04-04
js 實(shí)現(xiàn)圖片預(yù)加載(js操作 Image對(duì)象屬性complete ,事件onload 異步加載圖片)
通過(guò)js操縱DOM很多情況下都是為了實(shí)現(xiàn)和當(dāng)前頁(yè)html元素的異步載入,我談?wù)剬?duì)Image對(duì)象的一些認(rèn)識(shí)。2011-03-03
jQuery實(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-04
js實(shí)現(xiàn)二級(jí)導(dǎo)航功能
本文主要介紹了js實(shí)現(xiàn)二級(jí)導(dǎo)航功能的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
javascript動(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-05
RGB轉(zhuǎn)換實(shí)現(xiàn)代碼,淘寶前端開(kāi)發(fā)工程師筆試題
寫(xiě)一個(gè)轉(zhuǎn)換RGB的值的函數(shù),實(shí)現(xiàn)以下效果。2010-11-11
JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能,結(jié)合實(shí)例形式總結(jié)分析了javascript獲取數(shù)組最大值與最小值的三種常見(jiàn)操作技巧,需要的朋友可以參考下2019-03-03

