1、 ajax 是什么？有什么作用？
含義：AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML 通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
作用：實現網頁的異步加載，局部刷新網頁。當在向服務器獲取新數據時不需要刷新整個網頁，提高用戶體驗。
直白地說，就是沒用AJAX的網頁，你點一個按鈕就要刷新一下頁面，盡管新頁面上只有一行字和當前頁面不一樣，但你還是要無聊地等待頁面刷新。用了AJAX之后，你點擊，然后頁面上的一行字就變化了，頁面本身不用刷。AJAX只是一種技術，不是某種具體的東西。不同的瀏覽器有自己實現AJAX的組件。
ajax的全稱是AsynchronousJavascriptAndXML。異步傳輸+js+xml。
所謂異步，在這里簡單地解釋就是：向服務器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果我們可以再來處理這個事。（當然，在其他語境下這個解釋可能就不對了）這個很重要，如果不是這樣的話，我們點完按鈕，頁面就會死在那里，其他的數據請求不會往下走了。這樣比等待刷新似乎更加討厭。（雖然提供異步通訊功能的組件默認情況下都是異步的，但它們也提供了同步選項，如果你好奇把那個選項改為false的話，你的頁面就會死在那里）xml只是一種數據格式，在這件事里并不重要，我們在更新一行字的時候理論上說不需要這個格式，但如果我們更新很多內容，那么格式化的數據可以使我們有條理地去實現更新。現在大部分人其實是用JSON這種格式來代替XML的，因為前者更加簡潔，解析速度也更快。
總結：只要是JS調用異步通訊組件并使用格式化的數據來更新web頁面上的內容或操作過程，那么我們用的方法就可算是AJAX。
2、 前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？
前后端開發聯調需要注意事項：
- 約定數據：有哪些需要傳輸的數據，數據類型是什么；
- 約定接口：確定接口名稱及請求和響應的格式，請求的參數名稱、響應的數據格式；
- 根據這些約定整理成接口文檔
后端接口完成前如何 mock 數據：
- mock數據指的是在后端開發沒有完成時，前端可以通過mock方法搭建本地服務器，模擬后臺數據來實現數據交互的效果。
- 可安裝xampp在本地搭建(php等)服務器，也可以安裝server-mock，這樣不需要特地去寫一個后臺的處理頁面文件來訪問數據。
3、點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?
- 首先我這里用的不是 server-mock；
- 把 AJAX 的 URL 設置為 "#" + "..."，向自身請求；
- 請求也可以成功響應，因為提交的地址是自身，所以 responseText 是本身的 html 的文檔
下邊看代碼
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testAJAX</title>
</head>
<body>
<input type="text" name="username" value="jirengu">
<input type="button" value="提交">
<!-- 引入 AJAX 函數包 -->
<script type="text/javascript" src="myAJAX.js"></script>
<!-- 引入頁面 JS -->
<script type="text/javascript" src="index.js"></script>
</body>
</html>
- myAJAX.js
//函數參數1.提交方法2.提交地址3.成功函數4.失敗函數(可選)
function myAJAX(method, url, fnSucc, fnFail) {
//1.創建XHR對象
var xhr = new XMLHttpRequest()
//2.設置method,url,true/false
xhr.open(method, url, true)
//3.發送請求
xhr.send()
//4.監聽請求
xhr.onreadystatechange = function() {
if (!(xhr.readyState === 4)) {
return
}
//返回請求后作出判定
//如果成功
if (xhr.status === 200 || xhr.status === 304) {
console.log(xhr.status)
//因為提交的地址是自身，所以 responseText 是 index.html 的文檔
fnSucc(xhr.responseText)
} else {
//如果失敗,存在失敗函數則調用
if (fnFail) {
fnFail(xhr.statusText)
}
}
}
}
- index.js
//封裝 DOM API
function $$(items) {
return document.querySelectorAll(items)
}
var int1 = $$('input')[0],
btn1 = $$('input')[1],
//統計提交次數
index = 1,
//設置防重復點擊開關
lock = false
btn1.onclick = function() {
//如果一次請求未完成，lock =t rue ，就不執行后續代碼
if (lock) {
return
}
//如果當前沒有請求，改變 lock 為 true ，并執行后續代碼
lock = true
//設置提交按鈕不可點擊，不設置也沒關系，作用和lock重復了
btn1.setAttribute('disabled', 'true')
//定時器模仿網速差等情況
setTimeout(function() {
//時間函數執行完才會執行下邊的
ajax()
//請求OK了，把 lock 改為 false
lock = false
//恢復按鈕
btn1.removeAttribute('disabled')
}, 3000)
}
//調用AJAX、封裝事件函數
function ajax() {
myAJAX('GET', '?' + int1.name + '=' + int1.value, succ, fail)
//成功函數，因為返回的responseText 是 index.html 的文檔，就不輸出它了
function succ(e) {
console.log('success' + index)
index += 1
}
//失敗函數
function fail() {
console.log('fail')
}
}
4、實現加載更多的功能，效果范例416，后端在本地使用server-mock來模擬數據
代碼：github code
