原生js封裝Ajax
ajax封裝
function ajax(options) {
var defaults={
type:'get',
url:'',
data:{},
dataType:'json',
success:function (result) {
console.log(result);
},
async:true
}
//覆蓋原物件的預設值
object.assign(defaults,options);
//建立一個ajax物件 (相容)
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執行程式碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var params="";
//拼接字串 url其後緊跟
for(var attr in defaults.data){
params+=attr+'='+defaults.data[attr]+'&';
}
if(params){
//擷取字串
params=params.substring(0,params.length-1);
}
//判斷get/post型別
if (defaults.type=='get'){
defaults.url += '?' +params;
}
xhr.open(defaults.type,defaults.url,defaults.async);
if(defaults.type == 'get') {
xhr.send();
}else if(defaults.type=='post'){
//post像伺服器傳送請求
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(params);
}
if(defaults.async){
xhr.onreadystatechange=function () {
if(xhr.readyState==4 && xhr.status==200){
var result=null;
if(defaults.dataType=='json'){
result=xhr.responseText;
result=json.parse(result);
}else if(defaults.dataType='xml'){
result=xhr.responseXML;
}else{
result=xhr.responseText;
}
//輸出
defaults.success(result);
}
}
}else{
xhr.οnlοad=function () {
if(xhr.readyState==4 && xhr.status==200){
var result=null;
if(defaults.dataType=='json'){
result=xhr.responseText;
result=json.parse(result);
}else if(defaults.dataType='xml'){
result=xhr.responseXML;
}else{
result=xhr.responseText;
}
//輸出
defaults.success(result);
}
}
}
}
相關文章
- ajax原生js封裝JS封裝
- 用原生js封裝一個ajax請求方法JS封裝
- 原生js—ajax的封裝外掛.js—(對get和post做了相容)JS封裝
- 原生js---ajax的封裝外掛.js---(對get和post做了兼JS封裝
- ajax 封裝封裝
- js封裝 Ajax ——常用工具函式JS封裝函式
- 前端ajax介面配置封裝前端封裝
- 封裝ajax、axios請求封裝iOS
- 分享:用promise封裝ajaxPromise封裝
- 用原生JS封裝外掛的方式有哪些?JS封裝
- 使用ts封裝一個ajax封裝
- rxjs入門之ajax封裝JS封裝
- 為何要再封裝 AJAX?封裝
- 用promise封裝一個ajaxPromise封裝
- 原生JS 一定要學會自己封裝函式,不然還怎麼‘原生’?JS封裝函式
- 刨根問底ajax原理與封裝封裝
- 基於jq封裝ajax請求封裝
- 應用Promise封裝Ajax實踐Promise封裝
- JS — websocket封裝JSWeb封裝
- JS功能封裝JS封裝
- js ajax請求封裝及解決node請求跨域問題JS封裝跨域
- 什麼!你想要封裝好的ajax封裝
- 六九、ajax,fetch,axios,wx.request封裝iOS封裝
- Dapper的封裝、二次封裝、官方擴充套件包封裝,以及ADO.NET原生封裝APP封裝套件
- 原生js實現Ajax請求,包含get和postJS
- 封裝springmvc處理ajax請求結果封裝SpringMVC
- JS物件之封裝(二)JS物件封裝
- 原生幻燈片封裝學習封裝
- JS21. 使用原生JS封裝一個公共的Alert外掛(HTML5: Shadow Dom)JS封裝HTML
- 原生Ajax書寫
- 原生es5封裝的Promise物件封裝Promise物件
- 基於Promise實現對Ajax的簡單封裝Promise封裝
- 重學前端(8)封裝ajax,http,跨域問題前端封裝HTTP跨域
- 封裝一個簡易版的ajax操作物件封裝物件
- [ 造輪子 ] 手動封裝 AJAX (三) —— 最終版封裝
- [ 造輪子 ] 手動封裝 AJAX (一) —— 基礎版封裝
- 原生ajax請求&JSONPJSON
- 原生ajax的步驟?