微信開發(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