js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装
生活随笔
收集整理的這篇文章主要介紹了
js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
function ajax(obj){ // 默認參數 var defaults = { type : 'get',data : {}, url : '#', dataType : 'text', async : true, success : function(data){console.log(data)}} // 處理形參,傳遞參數的時候就覆蓋默認參數,不傳遞就使用默認參數 for(var key in obj){//把輸入的參數與設置的默認數據進行覆蓋更新 defaults[key] = obj[key]; } // 1、創建XMLHttpRequest對象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP');// 兼容ie的早期版本 } // 把對象形式的參數轉化為字符串形式的參數 /* {username:'zhangsan','password':123} 轉換為 username=zhangsan&password=123 */ var param = ''; for(var attr in obj.data){ param += attr + '=' + obj.data[attr] + '&'; } if(param){//substring(start, end)截取字符串去掉最后的&符號 param = param.substring(0,param.length - 1); } // 處理get請求參數并且處理中文亂碼問題 if(defaults.type == 'get'){ defaults.url += '?' + encodeURI(param); } // 2、準備發送(設置發送的參數) xhr.open(defaults.type,defaults.url,defaults.async); // 處理post請求參數并且設置請求頭信息(必須設置) var data = null; if(defaults.type == 'post'){ data = param; xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post模式下必須加的請求頭,這個請求頭是告訴服務器怎么去解析請求的正文部分。 } // 3、執行發送動作 xhr.send(data); // 處理同步請求,不會調用回調函數 if(!defaults.async){ if(defaults.dataType == 'json'){ return JSON.parse(xhr.responseText); }else{ return xhr.responseText; } } // 4、指定回調函數(處理服務器響應數據) xhr.onreadystatechange = function(){ if(xhr.readyState == 4){//4 獲取數據成功 if(xhr.status == 200){//200 獲取的數據格式正確 var data = xhr.responseText; if(defaults.dataType == 'json'){ // data = eval("("+ data +")"); data = JSON.parse(data);//JSON.parse把獲取帶的json格式的數據轉化為js的對象形式可以使用 } defaults.success(data);//回調函數 }} } }
?
轉載于:https://www.cnblogs.com/yongege/p/7103784.html
總結
以上是生活随笔為你收集整理的js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JS组件系列——自己动手扩展Bootst
- 下一篇: lable标签的妙用