ajax是什么？有什么作用？
Ajax可以把它當做頁面與后端交接的微橋梁，可以實現異步操作，無須刷新整個頁面的情況下實現局部刷新，是前端開發人員必須掌握的一個技能；
大體步驟可以分為以下：
1.createXHR
2.xhr.open(type,url,boolean) //確定請求發送類型、URL、同步/異步
3.xhr.send() //發送到服務器
前后端開發聯調需要注意哪些事情？后端接口完成前如何mock數據？
明確需要測試的數據，邏輯測試需要清晰，前端發送什么數據給后臺，后頭返回什么數據給前臺，雙方約定好；后端接口完成前，搭建服務器，mock數據，確定程序能跑起來。
點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?
<script>
var ct = document.querySelector("#ct");
btn = document.querySelector("#btn");
var lock = true;
function ajax(opts){
lock = false;
var xhr = new XMLHttpRequest();
xhr.onredaystatechange = function(){
if(xhr.readyState===4 && xhr.status===200){
var result = JSON.parse(xhr.responseText);
opts.success(xhr.responseText);
lock = true;
}else if(xhr.readyState===4 && xhr.status!==200) {
opts.error();
lock = true;
}
}
var urlStr ="";
for(var key in opts.data){
urlStr = key +"="+opts.data[key]+"$";
}
urlStr = urlStr.substring(0,urlStr.length-1);
if(opts.type.toLowerCase()==="get"){
xhr.open(opts.type,opts.url+"?"+urlStr,true);
xhr.send();
}
if(opts.type.toLowerCase()==="post"){
xhr.open(opts.type,opts.url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(urlStr)
}
}
btn.addEventListener("click",function(){
if(lock===true){
ajax(
{
url:'/more',
type: 'post',
data: {
len: document.querySelectorAll('li').length
},
success: function(data){
console.log(data);
},
error: function(){
console.log('出錯了')
}
})
}
})
</script>
