用原生JS對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼
更新時(shí)間：2016年07月13日 10:21:28 投稿：jingxian
下面小編就為大家?guī)?lái)一篇用原生JS對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
首先，我們需要xhr對(duì)象。這對(duì)我們來(lái)說(shuō)不難，封裝成一個(gè)函數(shù)。
var createAjax = function() { var xhr = null; try { //IE系列瀏覽器 xhr = new ActiveXObject("microsoft.xmlhttp");
} catch (e1) { try { //非IE瀏覽器 xhr = new XMLHttpRequest();
} catch (e2) { window.alert("您的瀏覽器不支持ajax，請(qǐng)更換！");
}
} return xhr;
};
然后，我們來(lái)寫核心函數(shù)。
var ajax = function(conf) { // 初始化 //type參數(shù),可選 var type = conf.type; //url參數(shù)，必填 var url = conf.url; //data參數(shù)可選，只有在post請(qǐng)求時(shí)需要 var data = conf.data; //datatype參數(shù)可選 var dataType = conf.dataType; //回調(diào)函數(shù)可選 var success = conf.success; if (type == null){ //type參數(shù)可選，默認(rèn)為get type = "get";
} if (dataType == null){ //dataType參數(shù)可選，默認(rèn)為text dataType = "text";
} // 創(chuàng)建ajax引擎對(duì)象 var xhr = createAjax(); // 打開 xhr.open(type, url, true); // 發(fā)送 if (type == "GET" || type == "get") {
xhr.send(null);
} else if (type == "POST" || type == "post") {
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { if(dataType == "text"||dataType=="TEXT") { if (success != null){ //普通文本 success(xhr.responseText);
}
}else if(dataType=="xml"||dataType=="XML") { if (success != null){ //接收xml文檔 success(xhr.responseXML);
}
}else if(dataType=="json"||dataType=="JSON") { if (success != null){ //將json字符串轉(zhuǎn)換為js對(duì)象 success(eval("("+xhr.responseText+")"));
}
}
}
};
};
最后，說(shuō)明一下此函數(shù)的用法。
ajax({ type:"post",
url:"test.jsp",
data:"name=dipoo&info=good",
dataType:"json",
success:function(data){ alert(data.name); } });
以上這篇用原生JS對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。接下來(lái)通過(guò)本文給大家分享Bootstrap一款超好用的前端框架，感興趣的朋友一起看看吧2017-09-09
AlertBox 彈出層信息提示框效果實(shí)現(xiàn)步驟
彈出層就是相對(duì)文檔或窗口定位的一個(gè)層，一般用來(lái)顯示提示信息、廣告等內(nèi)容，還可以配合覆蓋層來(lái)鎖定頁(yè)面。2010-10-10
JavaScript中數(shù)組遍歷的7種方法小結(jié)
作為JavaScript開發(fā)人員,熟悉數(shù)組的遍歷和操作是非常重要的,數(shù)組遍歷是處理和操作數(shù)組元素的基本需求之一,本文將介紹JavaScript中的7種常見(jiàn)數(shù)組遍歷方法,幫助你成為數(shù)組操作的達(dá)人2023-11-11
詳解小程序原生使用ES7 async/await語(yǔ)法
這篇文章主要介紹了詳解小程序原生使用ES7 async/await語(yǔ)法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
通過(guò)url傳遞參數(shù)是我們?cè)陂_發(fā)中經(jīng)常用到的一種傳參方法,下面這篇文章主要給大家介紹了關(guān)于前端JS獲取URL參數(shù)的4種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
詳解weex默認(rèn)webpack.config.js改造
本篇文章主要介紹了詳解weex默認(rèn)webpack.config.js改造，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
TypeScript?mixin提升代碼復(fù)用性的方法和原理
在前端開發(fā)中，我們經(jīng)常需要在不同的組件或類之間共享功能代碼，Mixin提供了一種非常靈活的方式，可以讓我們?cè)诓黄茐睦^承關(guān)系的前提下，將功能代碼復(fù)用到多個(gè)對(duì)象中，文章通過(guò)代碼示例介紹mixin提升代碼復(fù)用性的方法和好處,需要的朋友可以參考下2023-06-06
jquery自定義插件結(jié)合baiduTemplate.js實(shí)現(xiàn)異步刷新（附源碼）
本文主要介紹了jquery自定義插件結(jié)合baiduTemplate.js實(shí)現(xiàn)異步刷新的具體實(shí)例，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
javascript每日必學(xué)之多態(tài)，介紹了有關(guān)多態(tài)的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下2016-02-02
今天小編就為大家分享一篇關(guān)于js中的reduce()函數(shù)講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01