AJAX 請求基本架構(gòu)
AJAX請求基本步驟:
Step01:獲取Ajax 請求對象(由瀏覽器端的Ajax引擎提供)
Step02:設(shè)置Ajax對象的狀態(tài)監(jiān)聽(通訊和響應(yīng)狀態(tài))
Step03:創(chuàng)建Ajax請求連接(與服務(wù)端建立連接)
Step04:發(fā)送Ajax異步請求(發(fā)送到服務(wù)端)
客戶端訪問服務(wù)器過程
1.客戶端通過觸發(fā)dom事件(event)發(fā)起javascript調(diào)用
2.XmlHttpRequest對象發(fā)起http請求訪問服務(wù)器
3.服務(wù)器訪問數(shù)據(jù)庫
4.數(shù)據(jù)庫拿到數(shù)據(jù)返回給服務(wù)器
5.服務(wù)器把數(shù)據(jù)(如json)返回給XmlHttpRequest對象
6.XmlHttpRequest對象上注冊的回調(diào)函數(shù)贫橙,回調(diào)函數(shù)回調(diào)相關(guān)的方法異步地更新數(shù)據(jù)html/css/json...
UserInterface:用戶界面
XmlHttpRequest:AjaxEngine中的一個對象
dom event:dom-(文檔對象模型)事件御吞,點(diǎn)擊按鈕或超鏈接,或光標(biāo)移入移除蛀序,選中纤控、取消選中復(fù)選或單選
update UI:數(shù)據(jù)返回時更新界面挂捻。
WebServer:Web服務(wù)器
頁面由html節(jié)點(diǎn)構(gòu)成,以js的角度看待每個節(jié)點(diǎn)的話船万,這些節(jié)點(diǎn)叫做dom(document object model)刻撒。這個頁面可以看成一個文檔(document)。
用戶界面發(fā)起請求-通過javascript調(diào)用AjaxEngine中的一個對象XmlHttpRequest
通過這個對象向服務(wù)器端發(fā)請求耿导,web服務(wù)器端訪問數(shù)據(jù)庫DB声怔,數(shù)據(jù)庫返回數(shù)據(jù)給web服務(wù)器,web服務(wù)器把這個數(shù)據(jù)返回給Ajax引擎舱呻,Ajax引擎中的XmlHttpRequest注冊的回調(diào)函數(shù)更新用戶界面醋火。