微信開發(fā)之a(chǎn)jax學(xué)習(xí)

微信開發(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ū)域的更新效果。

  1. 無刷新留言,優(yōu)酷觀看電影的時候,需要對優(yōu)酷電影進(jìn)行影評。(ajax無刷新留言)


    image.png
  2. 網(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)行處理。)

場景:講課(口渴)
問題:喝水

解決:

  1. 停下課、買水、喝水、上課(上課過程打斷)
  2. 同事買水(繼續(xù)上課)沒有被中斷
    相當(dāng)于上面說的ajax對象。

ajax具體實(shí)操

ajax的使用,分為四個步驟

  1. 創(chuàng)建ajax對象
  2. 設(shè)置請求的方式和請求的地址
  3. 設(shè)置請求的回調(diào)函數(shù),在成功請求后,如何去處理服務(wù)器響應(yīng)的數(shù)據(jù)
  4. 發(fā)送請求


    image.png

實(shí)現(xiàn)一個無刷新的今天頭條功能

接口:
http://v.juhe.cn/toutiao/index?type=caijing&key=d0c418c9d5324a8ddf197e85c3dc9c5a

接口文檔:


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容