這篇文章主要為大家詳細介紹了原生JS封裝AJAX的方法,文中示例代碼介紹的非常詳細,圖文詳解容易學習,非常適合初學者入門。
按需求定制網(wǎng)站可以根據(jù)自己的需求進行定制,網(wǎng)站制作、成都網(wǎng)站設計構思過程中功能建設理應排到主要部位公司網(wǎng)站制作、成都網(wǎng)站設計的運用實際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實際意義
一、原理
原生Ajax的發(fā)送需要四步:
1) 創(chuàng)建Ajax對象: XMLHttpRequest
2) 設置請求參數(shù): open(請求參數(shù)[get/post],url地址, 是否異步[true/false] )
3) 設置回調函數(shù): onreadystateChange 用于處理返回的數(shù)據(jù)
4) 發(fā)送請求: send()
//TODO step1: 創(chuàng)建ajax對象 var xhr = new XMLHttpRequest(); //TODO step2: 設置請求參數(shù) xhr.open('get','01.php',true); //TODO step3: 設置回調 xhr.onreadystatechange = function () { //接收返回數(shù)據(jù) console.log(xhr.responseText);//responseText 用于接收后臺響應的文本 } //TODO step4: 發(fā)送請求 xhr.send();
二、封裝
封裝的核心思想就是把需要動態(tài)變化的部分當成參數(shù),不變的部分就留在那里,在上面的代碼中請求方式(get、post)、請求地址url、請求參數(shù)data、成功的回調success、失敗回調error等,這些參數(shù)都是動態(tài)變化的;而創(chuàng)建Ajax對象 XMLHttprequest、事件監(jiān)聽onreadystatechange等是固定的,所以第一步我們要確定好封裝的參數(shù):
v url 請求地址
v data 請求數(shù)據(jù)
v type 請求類型
v success 成功回調
v error 失敗回調
v beforeSend 發(fā)送前調用 return false 阻止發(fā)送
v complete ajax請求成功的回調, 無論什么時候都會執(zhí)行
function ajax(option){ //用戶配置option 默認配置init var init = { type:'get', async:true, url:'', success: function () { }, error: function () { }, data:{}, beforeSend: function () { console.log('發(fā)送前...'); return false; } }; //TODO step1: 合并參數(shù) for(k in option){ init[k] = option[k]; } //TODO step2: 參數(shù)轉換 var params = ''; for(k in init.data){ params += '&'+k+'='+init.data[k]; } var xhr = new XMLHttpRequest(); // type url //TODO step3: 區(qū)分get和post,進行傳參 var url = init.url+'?__='+new Date().getTime(); //TODO step4: 發(fā)送前 var flag = init.beforeSend(); if(!flag){ return; } if(init.type.toLowerCase() == 'get'){ url += params; xhr.open(init.type,url,init.async); xhr.send(); }else{ xhr.open(init.type,url,init.async); xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.send(params.substr(1)); } xhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status == 200){ init.success(xhr.responseText); }else{ //error init.error(); } } } }
這里我們要注意的是get和post的傳參方式位置不一樣,get請求需要直接拼接在url地址后邊,post請求需要在send方法里面?zhèn)鲄?,而且需要這是請求頭setRequestHeader('content-type','application/x-www-form-urlencoded'),所以封裝時要進行區(qū)分。
由于參數(shù)過多,用戶不需要每次都傳入很多參數(shù),否則用起來會非常繁瑣。所以我們采取默認參數(shù)的形式,用戶不傳入就是用默認值,傳入就是用用戶的參數(shù)。
三、使用示例
ajax({ url: 'test.json', data:{test:123,age:456}, //type:'post', success: function (res) { console.log(res); } });
以上就是原生JS封裝AJAX方法的具體操作,代碼應該是足夠清楚的,而且我也相信有相當?shù)囊恍├涌赡苁俏覀內粘9ぷ骺赡軙姷玫降?。通過這篇文章,希望你能收獲更多。
新聞名稱:原生JS封裝AJAX的方法
URL鏈接:http://muchs.cn/article26/pidccg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供服務器托管、營銷型網(wǎng)站建設、品牌網(wǎng)站設計、定制開發(fā)、移動網(wǎng)站建設、網(wǎng)站設計公司
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)