使用原生js寫ajax實(shí)例(推薦)
實(shí)例如下:
// 使用原生js 封裝ajax
// 兼容xhr對(duì)象
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){ // 非IE6瀏覽器
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){ // IE6瀏覽器
var version = [
"MSXML2.XMLHttp.6.0",
"MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp",
];
for(var i = 0; i < version.length; i++){
try{
return new ActiveXObject(version[i]);
}catch(e){
//跳過(guò)
}
}
}else{
throw new Error("您的系統(tǒng)或?yàn)g覽器不支持XHR對(duì)象!");
}
}
// 轉(zhuǎn)義字符
function params(data){
var arr = [];
for(var i in data){
arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
}
return arr.join("&");
}
// 封裝ajax
function ga_ajax(obj){
var xhr = createXHR();
obj.url = obj.url + "?rand=" + Math.random(); // 清除緩存
obj.data = params(obj.data); // 轉(zhuǎn)義字符串
if(obj.method === "get"){ // 判斷使用的是否是get方式發(fā)送
obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
}
// 異步
if(obj.async === true){
// 異步的時(shí)候需要觸發(fā)onreadystatechange事件
xhr.onreadystatechange = function(){
// 執(zhí)行完成
if(xhr.readyState == 4){
callBack();
}
}
}
xhr.open(obj.method,obj.url,obj.async); // false是同步 true是異步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
if(obj.method === "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(obj.data);
}else{
xhr.send(null);
}
// xhr.abort(); // 取消異步請(qǐng)求
// 同步
if(obj.async === false){
callBack();
}
// 返回?cái)?shù)據(jù)
function callBack(){
// 判斷是否返回正確
if(xhr.status == 200){
obj.success(xhr.responseText);
}else{
obj.Error("獲取數(shù)據(jù)失敗,錯(cuò)誤代號(hào)為:"+xhr.status+"錯(cuò)誤信息為:"+xhr.statusText);
}
}
}
var html = document.getElementsByTagName("html")[0];
html.onclick = function(){
ga_ajax({
"method" : "post",
"url" : "demo.php",
"data" : {
"name" : "gao",
"age" : 100,
"num" : "12346&598"
},
"success" : function(data){
alert(data);
},
"Error" : function(text){
alert(text);
},
"async" : false
});
}
以上這篇使用原生js寫ajax實(shí)例(推薦)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
js下拉框二級(jí)關(guān)聯(lián)菜單效果代碼具體實(shí)現(xiàn)
這篇文章介紹了js下拉框二級(jí)關(guān)聯(lián)菜單效果代碼具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-08-08
js中合并對(duì)象的幾種實(shí)現(xiàn)方法
"js 合并對(duì)象"是一種在JavaScript編程中常見(jiàn)的操作,用于將多個(gè)對(duì)象的屬性合并到一起,通常,我們會(huì)使用ES6的擴(kuò)展運(yùn)算符或者Object.assign()函數(shù)來(lái)實(shí)現(xiàn)這個(gè)功能,感興趣的可以了解一下2023-08-08
1分鐘快速了解js實(shí)現(xiàn)下載文件功能的4種方式
在前端開(kāi)發(fā)中,我們經(jīng)常需要實(shí)現(xiàn)文件下載功能,例如下載用戶上傳的圖片、用戶生成的文件等,這篇文章主要給大家介紹了關(guān)于如何通過(guò)1分鐘快速了解js實(shí)現(xiàn)下載文件功能的4種方式,需要的朋友可以參考下2024-03-03
Bootstrap模態(tài)對(duì)話框中顯示動(dòng)態(tài)內(nèi)容的方法
今天小編就為大家分享一篇Bootstrap模態(tài)對(duì)話框中顯示動(dòng)態(tài)內(nèi)容的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
js前端頁(yè)面用插件docx-preview展示docx文件
這篇文章主要給大家介紹了如何使用docx-preview.min.js插件在頁(yè)面上展示.docx文件,并說(shuō)明了該插件依賴于jszip.min.js插件,通過(guò)實(shí)例展示了如何實(shí)現(xiàn)這一功能,需要的朋友可以參考下2024-11-11
js超時(shí)調(diào)用setTimeout和間歇調(diào)用setInterval實(shí)例分析
這篇文章主要介紹了js超時(shí)調(diào)用setTimeout和間歇調(diào)用setInterval,以實(shí)例形式對(duì)比分析了setTimeout與setInterval的具體使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
E3 tree 1.6在Firefox下顯示問(wèn)題的修復(fù)方法
tree 在Firefox下只顯示一句話,用firebug查看頁(yè)面元素觀察發(fā)現(xiàn),兩個(gè)script導(dǎo)入被一個(gè)<script>分隔開(kāi)了,顯然是document.write的問(wèn)題.由于Firefox對(duì)js規(guī)范的檢查比較嚴(yán)格,肯定一些字符輸出的的時(shí)候沒(méi)有轉(zhuǎn)義2013-01-01
EasyUI彈出框行編輯如何通過(guò)下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動(dòng)
本文介紹了如何使用EasyUI彈出框和下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動(dòng),并詳細(xì)描述了當(dāng)用戶選擇下拉框時(shí)如何更新當(dāng)前行數(shù)據(jù),通過(guò)解決datagrid的onClickRow和onClickCell事件不觸發(fā)的問(wèn)題,實(shí)現(xiàn)了下拉框選擇后數(shù)據(jù)的自動(dòng)填充2024-11-11

