Ajax 實踐

一豁生、ajax 是什么判导?有什么作用嫉父?

Ajax(Asynchronous JavaScript and XML),異步 JS 和 XML眼刃。通過使用 Ajax 绕辖, 網(wǎng)頁程序能夠快速地將漸步更新呈現(xiàn)在用戶界面上,不需要重載(刷新)整個頁面擂红。這使得程序能夠更快地回應(yīng)用戶的操作仪际。而所謂異步,就是在數(shù)據(jù)請求過程中昵骤,需要等待結(jié)果树碱,為了不浪費這部分時間(也是為了又更好的交互),而采取先執(zhí)行后續(xù)代碼变秦,直到請求返回收到后成榜,再處理結(jié)果的策略。

剛開始的時候以 XML 格式傳輸數(shù)據(jù)為主蹦玫,但由于 JSON 格式又諸多優(yōu)勢赎婚,使得用 JSON 格式傳輸數(shù)據(jù)變得更加流行。因此樱溉, Ajax 的主要作用就是可以在異步且不刷新當(dāng)前頁面的前提下挣输,更新數(shù)據(jù)。

二福贞、前后端開發(fā)聯(lián)調(diào)需要注意哪些事情撩嚼?后端接口完成前如何 mock 數(shù)據(jù)?

前后端開發(fā)聯(lián)調(diào)挖帘,其實就是對接口完丽,因此,需要處理的事情就有:

  1. 約定接口名稱拇舀、請求類型
  2. 約定接口參數(shù)舰涌、數(shù)據(jù)類型
  3. 整合文檔

那么如何 mock (模擬真實數(shù)據(jù))數(shù)據(jù)呢?

  1. 直接寫假數(shù)據(jù)在靜態(tài)頁面你稚,簡單粗暴瓷耙。缺點:耦合程度高,解耦影響大刁赖。
  2. 使用別人線上提供的接口服務(wù)搁痛,如 easy-mock。
  3. 自己搭建后端環(huán)境宇弛,制作 mock-server鸡典,如 Node.js 提供路由,再用工具生成隨機 JSON 數(shù)據(jù)枪芒。這樣后端接口來時彻况,直接更換 host 就行了谁尸,零成本。

參考:你是如何構(gòu)建 Web 前端的 Mock Server | 知乎

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

  1. 點擊按鈕后悍赢,disabled 按鈕决瞳,直到 ajax 數(shù)據(jù)返回,或者其他條件達成后左权,取消限制皮胡。
  2. 函數(shù)節(jié)流,利用定時器延遲請求發(fā)送赏迟,再利用定時器清除來防止短時間內(nèi)的多次點擊屡贺。

參考:怎樣防止重復(fù)發(fā)送 Ajax 請求? | 知乎

四锌杀、實現(xiàn)加載更多的功能甩栈,效果范例

在線預(yù)覽 | GitHub

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抛丽,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子饰豺,更是在濱河造成了極大的恐慌亿鲜,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件冤吨,死亡現(xiàn)場離奇詭異蒿柳,居然都是意外死亡,警方通過查閱死者的電腦和手機漩蟆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門垒探,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人怠李,你說我怎么就攤上這事圾叼。” “怎么了捺癞?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵夷蚊,是天一觀的道長。 經(jīng)常有香客問我髓介,道長惕鼓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任唐础,我火速辦了婚禮箱歧,結(jié)果婚禮上矾飞,老公的妹妹穿的比我還像新娘。我一直安慰自己呀邢,他們只是感情好洒沦,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著驼鹅,像睡著了一般微谓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上输钩,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天豺型,我揣著相機與錄音,去河邊找鬼买乃。 笑死姻氨,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的剪验。 我是一名探鬼主播肴焊,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼功戚!你這毒婦竟也來了娶眷?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤啸臀,失蹤者是張志新(化名)和其女友劉穎届宠,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體乘粒,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡豌注,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了灯萍。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片轧铁。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖旦棉,靈堂內(nèi)的尸體忽然破棺而出齿风,到底是詐尸還是另有隱情,我是刑警寧澤绑洛,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布聂宾,位于F島的核電站,受9級特大地震影響诊笤,放射性物質(zhì)發(fā)生泄漏系谐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望纪他。 院中可真熱鬧鄙煤,春花似錦、人聲如沸茶袒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽薪寓。三九已至亡资,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間向叉,已是汗流浹背锥腻。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留母谎,地道東北人瘦黑。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像奇唤,于是被迫代替她去往敵國和親幸斥。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361

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

  • 1: ajax 是什么咬扇?有什么作用甲葬? ajax(synchronous JavaScript and XML),是...
    高進哥哥閱讀 326評論 0 0
  • ajax 是什么?有什么作用懈贺? AJAX的全稱是Asynchronous JavaScript and XML(異...
    cross_王閱讀 334評論 0 0
  • 1. ajax 是什么经窖?有什么作用? AJAX是對Asynchronous JavaScript and XML的...
    Rising_suns閱讀 258評論 0 0
  • 1. ajax 是什么隅居?有什么作用钠至? Ajax(['eid??ks])是Asynchronous JavaScri...
    曉風(fēng)殘月1994閱讀 387評論 0 0
  • 1: ajax 是什么葛虐?有什么作用胎源? Ajax是Asynchronous JavaScript and XML的縮...
    好奇而已閱讀 337評論 0 0