今天接著我們上篇博文的栗子,現在我來擴大一下需求,之前是點選按鈕取出新聞,現在要實現每隔一段事件進行新聞的更新。這個時候,肯定是加乙個定時器,然後每隔一段事件,再進行一次ajax請求,既然要經常用到ajax請求,封裝函式就很必要了,先來看一下上個栗子的js**,我們來進行封裝。
window.onload =function()else
xhr.open(
'get
','getnews.php
',true
); xhr.send();
xhr.onreadystatechange =function()
oul.innerhtml = html; //把內容放在頁面裡
} else}}
}}
封裝函式的要點就是把重複使用的部分提取取來,同時一些變化的東西作為引數,無法作為引數的進行判斷處理。
所以這四個就做為函式的引數:ajax(method,url,data,success);
2 因為不同的請求方式,我們傳資料的方式不一樣,所以對於這些,需要進行條件判斷。
3 還有乙個問題就是關於 xhr.responsetext ,變數xhr是在封裝函式中宣告的,所以這個東西屬於ajax函式的,我們在success函式中是用不到的, 但是success這個函式裡面需要用這個資料。所以辦法就是在封裝函式中呼叫success函式的時候,把xhr.responsetext當作引數傳出去。success(xhr.responsetext)。
其實這是一種**,**就是乙個函式作為另乙個函式的引數,並在另乙個函式裡面被呼叫,這個栗子就是success作為ajax函式的引數,並在ajax裡面被呼叫。 (其實個人感覺就是函式在用引數,函式的引數,就是拿來用的,只是現在引數是函式,所以就呼叫唄)。
所以封裝後就是這樣:
functionajax(method, url, data, success)
catch
(e)
if (method == 'get' &&data)
xhr.open(method,url,
true
);
if (method == 'get')
else
xhr.onreadystatechange = function
()
else}}
}
呼叫就是這樣
ajax('get','getnews.php','',function(data)
oul.innerhtml =html;
});
其實這個封裝,還不是那麼好,比如上面的data沒有資料,我們還是得佔位,像jquery裡面用json格式傳參,就方便一些,目前還未總結好,後期補充。
Js之AJAX簡易封裝
提供對原生ajax的簡易封裝 封裝ajax庫 author wenqian email 843462167 qq.com function 提供path query選項 getparamswhere query 傳送請求 url 請求位址 method 請求方式 params 引數 headers ...
js之ajax的封裝
上節講了ajax的作用好處即流程為的就是去封裝ajax,那.那該怎麼封裝ajax呢?封裝方法,傳參是個很大的問題!在這裡,我們應該傳幾個引數呢?首先我們肯定要傳乙個請求方式get或post method 然而json資料也是必不可少的,其次就是需要傳入乙個url路徑了,在者就需要乙個成功的 和乙個失...
ajax基本封裝
建立乙個基本的ajax應用不需要太多的 大概三個步驟,幾十行 即可。1,建立ajax的核心物件xmlhttprequest 因為瀏覽器之間的不相容,ie7之前的版本並沒有原生的xmlhttprequest物件卻實現為activex物件。網際網路及各種書籍中有著多種建立方式,有的複雜很多行 有的則簡潔...