ajax實例&封裝

1、ajax 是什么?有什么作用?

ajax全稱是Asynchrous JavaScript XML的縮寫。
作用:與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁,在不重新加載整個頁面的情況下。
具體來說,AJAX包括以下步驟
創(chuàng)建AJAX對象;
發(fā)出HTTP請求;
接受服務(wù)器傳回的數(shù)據(jù);
更新網(wǎng)頁數(shù)據(jù)。

2、前后端開發(fā)聯(lián)調(diào)需要注意哪些事情?后端接口完成前如何 mock 數(shù)據(jù)?(npm install -g server-mock) 知識點視頻-如何 mock 數(shù)據(jù)?

前后端開發(fā)聯(lián)調(diào)需要注意事項:
約定數(shù)據(jù):有哪些需要傳輸?shù)臄?shù)據(jù),數(shù)據(jù)類型是什么;
約定接口:確定接口名稱及請求和響應(yīng)的格式,請求的參數(shù)名稱、響應(yīng)的數(shù)據(jù)格式;
根據(jù)這些約定整理成接口文檔

  • 后端接口完成前mock數(shù)據(jù):
    可以根據(jù)接口文檔,使用假數(shù)據(jù)來驗證我們制作的頁面響應(yīng)和接口是否正常。
    可以搭建php本地服務(wù)器用,php寫腳本提供臨時數(shù)據(jù);
    也可使用Mock.js,它能攔截ajax請求并根據(jù)請求中的內(nèi)容來隨機生成符合你要求的假數(shù)據(jù),模擬后端環(huán)境讓你完成對頁面和接口的測試.

3、點擊按鈕,使用 ajax 獲取數(shù)據(jù),如何在數(shù)據(jù)到來之前防止重復(fù)點擊?

var lock = false;
btn.addEventListener("click",function(){
if(!lock){
lock = true;
ajax(XXXX);
lock = false;
}
});
更多方法參考

代碼題
代碼預(yù)覽
代碼一

0_1484138685439_1.png

本地mock成功

代碼二


0_1484138710405_2.png

本地mock成功

代碼三


0_1484138732659_3.png

本地mock成功

XML

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,323評論 25 708
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,692評論 19 139
  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 12,513評論 6 13
  • 在Google上用自私做關(guān)鍵詞搜索,可以得到約 32,800,000 條結(jié)果,其中多數(shù)是這樣的: 從搜索的結(jié)果看,...
    王曉龍的學(xué)習(xí)史閱讀 594評論 0 1
  • 在午后3點的陽光里,突然想到,再過三十年,閨女是現(xiàn)在的我,我是現(xiàn)在的媽媽。突然驚覺人生雖已過半,可還有一半尚在...
    陽光在我心閱讀 257評論 0 0

友情鏈接更多精彩內(nèi)容