微信開發(fā)之a(chǎn)jax學(xué)習(xí) h1
ajax簡介 h2
在我們做網(wǎng)頁開發(fā)的時候,有的時候不可避免的需要和后端進(jìn)行無刷新的交互模式。
傳統(tǒng)的交互模式:通過a鏈接進(jìn)行跳轉(zhuǎn)。(頁面肯定要刷新)
現(xiàn)在的開發(fā)需要:在頁面沒有刷新的情況下,需要做頁面局部區(qū)域的更新效果。
-
無刷新留言,優(yōu)酷觀看電影的時候,需要對優(yōu)酷電影進(jìn)行影評。(ajax無刷新留言)
image.png -
網(wǎng)易云音樂聽歌的時候,可能需要進(jìn)行其他歌曲的搜索,保證當(dāng)前正在聽的歌曲不能中斷。
image.png
通過上面的兩個案例的引入,我們發(fā)現(xiàn)現(xiàn)在需要在頁面不刷新的情況下,還可以實(shí)現(xiàn)頁面局部的數(shù)據(jù)進(jìn)行改變。傳統(tǒng)的網(wǎng)頁開發(fā)技術(shù)沒辦法實(shí)現(xiàn)(HTML里面的a鏈接、表單提交搜索)需要學(xué)習(xí)一門技術(shù),叫做ajax技術(shù)。(其實(shí)ajax技術(shù)底層就是js里面的一個對象,該對象充當(dāng)一個代理的角色可以幫我們?nèi)グl(fā)送網(wǎng)絡(luò)請求,幫我們把請求數(shù)據(jù)拿回來,然后瀏覽器進(jìn)行處理。)
場景:講課(口渴)
問題:喝水
解決:
- 停下課、買水、喝水、上課(上課過程打斷)
- 同事買水(繼續(xù)上課)沒有被中斷
相當(dāng)于上面說的ajax對象。
ajax具體實(shí)操
ajax的使用,分為四個步驟
- 創(chuàng)建ajax對象
- 設(shè)置請求的方式和請求的地址
- 設(shè)置請求的回調(diào)函數(shù),在成功請求后,如何去處理服務(wù)器響應(yīng)的數(shù)據(jù)
-
發(fā)送請求
image.png
實(shí)現(xiàn)一個無刷新的今天頭條功能
接口:
http://v.juhe.cn/toutiao/index?type=caijing&key=d0c418c9d5324a8ddf197e85c3dc9c5a
接口文檔:
image.png