AJAX是微軟發(fā)明
用js發(fā)一個請求啊
ajax是不刷新頁面請求的唯一方法
get在req.query里面
post在req.body里面
瀏覽器發(fā)出請求：
1.地址欄輸入網(wǎng)址url
2.link css
3.img src = xxx
4.script = xxx
5.form表單也可以發(fā)請求（當用戶點擊提交時）
面試
onreadystatuchange
statu === 4 才是完成
readystatu
題目1： ajax 是什么？有什么作用？
AJAX = 異步 JavaScript 和 XML。描述了一種將新的現(xiàn)有技術(shù)一起使用的“新”方法， 包括: HTML或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 最重要的是 XMLHttpRequest 對象。
通過在后臺與服務器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。
題目2： 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？
前后端開發(fā)聯(lián)調(diào)需要注意的事情：
- 約定數(shù)據(jù)：需要傳輸?shù)臄?shù)據(jù)以及數(shù)據(jù)類型；
- 約定接口：接口名稱，請求和響應的格式，請求的參數(shù)名稱，響應的數(shù)據(jù)格式；
- 根據(jù)這些約定整理成接口文檔。
后端接口完成前如何 mock 數(shù)據(jù)：
- 可以根據(jù)接口文檔，使用假數(shù)據(jù)來驗證我們制作的頁面響應和接口是否正常。
- 可以搭建php本地服務器用，php寫腳本提供臨時數(shù)據(jù)；
- 也可使用Mock.js，它能攔截ajax請求并根據(jù)請求中的內(nèi)容來隨機生成符合你要求的假數(shù)據(jù)，模擬后端環(huán)境讓你完成對頁面和接口的測試。
題目3：點擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復點擊?
添加一個狀態(tài)鎖，在觸發(fā)ajax前先上鎖，之后用戶再怎么點擊都不會觸發(fā)ajax，直到ajax代碼執(zhí)行完才會觸發(fā)。
var btn = document.querySelector('.btn');
var lock = false;
btn.addEventListener('click',function(e){
e.preventDefault();
if(lock){
return;
}else{
lock = true;
ajax({
...
},
success: function(){
...
lock = false;
},
error: function(){
...
lock = false;
}
});
}
})
題目4：封裝一個 ajax 函數(shù)，能通過如下方式調(diào)用。后端在本地使用server-mock來 mock 數(shù)據(jù)
function ajax(opts){
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.status === 304){
var results = JSON.parse(xhr.responseText)
opts.success('results')
}else{
opts.error()
}
}
}
var query = '?'
for (key in opts.data){
query += key + '=' + opts.data[key] + '&'
}
query = query.substr(0, query.length-1)
xhr.open(opts.type, opts.url+query, true)
xhr.send()
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: '/login', //接口地址
type: 'get', // 類型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出錯了')
}
})
});
題目5：實現(xiàn)加載更多的功能，效果范例149，后端在本地使用server-mock來模擬數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
ul,li{
margin: 0;
padding: 0;
}
#ct li{
list-style: none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
cursor: pointer;
}
#load-more{
display: block;
margin: 10px auto;
}
.btn{
display: inline-block;
text-decoration: none;
color: #E27272;
border: 1px solid #E27272;
border-radius: 3px;
text-align: center;
height: 40px;
width: 80px;
line-height: 40px;
}
.hover{
background: green;
color: #fff;
}
</style>
</head>
<body>
<ul id='ct'>
<li>內(nèi)容1</li>
<li>內(nèi)容2</li>
</ul>
<a href="#" class='btn' id='load-more'>加載更多</a>
<script>
var ct = document.querySelector('#ct');
var loadMoreBtn = document.querySelector('#load-more');
ct.addEventListener('mouseover',function(e){
if(e.target.tagName.toLowerCase() === 'li'){
e.target.classList.add('hover');
}
});
ct.addEventListener('mouseout',function(e){
if(e.target.tagName.toLowerCase() === 'li'){
e.target.classList.remove('hover');
}
});
var lock = false;
var count = 3;
loadMoreBtn.addEventListener('click',function(e){
e.preventDefault();
if(lock){
return;
}else{
lock = true;
ajax({
url: 'loading...',
type: 'get',
data: {
start: count,
length: 6
},
success: function(json){
if(json.status === 1){
append(json.data);
count += 6;
}else{
console.log('失敗');
}
lock = false;
},
error: function(){
alert('出現(xiàn)錯誤');
lock = false;
}
});
}
});
function append(arr){
for(var i=0; i<arr.length; i++){
var li = document.createElement('li');
li.innerHTML = '內(nèi)容'+arr[i];
ct.appendChild(li);
}
}
function ajax(opts){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.status === 304){
var results = JSON.parse(xhr.responseText);
opts.success(json);
}else{
opts.error();
}
}
};
var query = '';
for (var key in opts.data){
query += key + '=' + opts.data[key] + '&';
}
query = query.substr(0, query.length-1);
xhr.open(opts.type, opts.url+query, true);
xhr.send();
}
</script>
</body>
</html>
直播課：
關(guān)鍵概念
服務器
網(wǎng)站
