ajax實踐

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

ajax(Asynchronous JavaScript and XML 異步的JavaScript與XML技術)通過在后臺與服務器進行少量數據交換,可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。

具體流程:
創建AJAX對象
發出HTTP請求
接受服務器傳回的數據
更新網頁數據

2、 前后端開發聯調需要注意事項

  1. 約定數據:有哪些需要傳輸的數據,數據類型是什么
  2. 約定接口:確定接口名稱及請求和響應的格式,請求的參數名稱、響應的數據格式
  3. 根據這些約定整理成接口文檔
舉例
{
"status":0,
"data":["新聞0","新聞1","新聞2","新聞3","新聞4"]
}

3、后端接口完成前如何 mock 數據

  1. 可以根據接口文檔,使用假數據來驗證我們制作的頁面響應和接口是否正常。
  2. 可以搭建php本地服務器用,php寫腳本提供臨時數據
  3. 可使用Mock.js,它能攔截ajax請求并根據請求中的內容來隨機生成符合你要求的假數據,模擬后端環境讓你完成對頁面和接口的測試。

4、點擊按鈕,使用 ajax 獲取數據,如何在數據到來之前防止重復點擊?

var ajaxLock = true    //1.設置一個狀態鎖,默認狀態不會被return
button.addEventListener('click',function(){
  if(!ajaxLock){
    return    //服務器還未返回數據,鎖未打開點擊無效直接return
  }

  ajax({
    ...
    ajaxLock = true   //3.得到數據后,恢復狀態,可以繼續點擊發送請求
  })

  ajaxLock = false   //2.請求發送完成,在數據到來之前設為false,會被上面的驗證直接return      
})

5、你真的會使用XMLHttpRequest嗎?

ajax是一種技術方案,但并不是一種新技術。它依賴的是現有的CSS/HTML/Javascript,而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象,是這個對象使得瀏覽器可以發出HTTP請求與接收HTTP響應。
用一句話來總結兩者的關系:我們使用XMLHttpRequest對象來發送一個Ajax請求

xhr提供了3個屬性來獲取請求返回的數據,分別是:xhr.response、xhr.responseText、xhr.responseXML

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • ajax 是什么?有什么作用? AJAX的全稱是Asynchronous JavaScript and XML(異...
    cross_王閱讀 340評論 0 0
  • 題目1: ajax 是什么?有什么作用? ajax全稱Asynchronous Javascript And XM...
    漂于行閱讀 393評論 0 1
  • 題目1: ajax 是什么?有什么作用? ajax是一種技術方案,但并不是一種新技術。它依賴的是現有的CSS/HT...
    蕭雪圣閱讀 291評論 0 0
  • 1. ajax 是什么?有什么作用? Ajax(Asynchronous JavaScript + XML)是一種...
    madpluto閱讀 177評論 0 0
  • 創業班跟莫教授走訪東莞剛上市的智能制造企業“匯興制造” 總結:“文化氛圍很濃,遵從的意識形態,均是書籍上傳承已久的...
    Yolanda_yang閱讀 171評論 0 0