問答
1.ajax 是什么？有什么作用？
-
ajax 全稱叫做Asynchronous JavaScript and XML；
- 是一種基于現(xiàn)有標準的更新部分網(wǎng)頁的新方法；
- Asynchronous指的是資源加載方式是異步的；
- JavaScript指的是使用JS的語言去實現(xiàn)請求的接發(fā)功能；
- XML指的是一開始的數(shù)據(jù)交換的格式是XML,現(xiàn)在常用的格式是json；
-
ajax的作用
- 異步加載資源以提高用戶體驗
- 降低數(shù)據(jù)流量傳輸以節(jié)省成本
2.前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？
-
前后端開發(fā)聯(lián)調(diào)注意事項
- 開發(fā)前約定好接口文檔并指定負責人進行后續(xù)撰寫和維護
- 約定接口使用的數(shù)據(jù)類型，json/xml還是text等
- 約定頁面渲染時用到的數(shù)據(jù)
-
mock數(shù)據(jù)
- 使用server-mock或者mock.js等數(shù)據(jù)模擬工具
- 自己搭建服務器，并使用后端語言（php、java）等去模擬數(shù)據(jù)
3.點擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復點擊?
可以通過設(shè)置狀態(tài)鎖來防止重復點擊
$('button').on('click',function(e){
e.preventDefault();
if($(this).data(isLoading,false)){
return;
}
$(this).data(isLoading,true)
.html('<p>努力加載中</p>')
})
代碼
1.封裝一個 ajax 函數(shù)，能通過如下方式調(diào)用
function ajax(opts){ // todo ...}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: 'getData.php', //接口地址
type: 'get', // 類型， post 或者 get,
data: { username: 'xiaoming', password: 'abcd1234' },
success: function(ret){ console.log(ret); // {status: 0} },
error: function(){ console.log('出錯了') }
})
});
