Ajax基礎之封裝3

2022-05-03 20:39:06 字數 1434 閱讀 7862

今天接著我們上篇博文的栗子,現在我來擴大一下需求,之前是點選按鈕取出新聞,現在要實現每隔一段事件進行新聞的更新。這個時候,肯定是加乙個定時器,然後每隔一段事件,再進行一次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裡面被呼叫。   (其實個人感覺就是函式在用引數,函式的引數,就是拿來用的,只是現在引數是函式,所以就呼叫唄)。

所以封裝後就是這樣:

function

ajax(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物件。網際網路及各種書籍中有著多種建立方式,有的複雜很多行 有的則簡潔...