Ajax大家每天都在用，jquery庫對Ajax的封裝也很完善、很好用，下面我們看一下他的內(nèi)部原理，并手動封裝一個自己的Ajax庫。
更多有關(guān)ajax封裝及數(shù)據(jù)處理，請參看上海尚學(xué)堂《
Ajax中replace+Jq封裝的ajax》、《
ajax+json數(shù)據(jù)處理》
一、原理
原生Ajax的發(fā)送需要四步：
1) 創(chuàng)建Ajax對象: XMLHttpRequest
2) 設(shè)置請求參數(shù): open(請求參數(shù)[get/post],url地址, 是否異步[true/false] )
3) 設(shè)置回調(diào)函數(shù): onreadystateChange 用于處理返回的數(shù)據(jù)
4) 發(fā)送請求: send()
- //TODO step1: 創(chuàng)建ajax對象
- var xhr = new XMLHttpRequest();
- //TODO step2: 設(shè)置請求參數(shù)
- xhr.open('get','01.php',true);
- //TODO step3: 設(shè)置回調(diào)
- xhr.onreadystatechange = function () {
- //接收返回數(shù)據(jù)
- console.log(xhr.responseText);//responseText 用于接收后臺響應(yīng)的文本
- }
- //TODO step4: 發(fā)送請求
- xhr.send();
二、封裝
封裝的核心思想就是把需要動態(tài)變化的部分當成參數(shù)，不變的部分就留在那里，在上面的代碼中請求方式（get、post）、請求地址url、請求參數(shù)data、成功的回調(diào)success、失敗回調(diào)error等，這些參數(shù)都是動態(tài)變化的；而創(chuàng)建Ajax對象 XMLHttprequest、事件監(jiān)聽onreadystatechange等是固定的，所以第一步我們要確定好封裝的參數(shù)：
- 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ù)轉(zhuǎn)換
- 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);
- }
- });
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
