1、 ajax 是什么？有什么作用？
ajax即asynchronous javascript and xml(异步javascript和xml)
作用：
- 实现网页的异步加载，局部刷新网页
- 向服务器获取新数据时不需要刷新整个网页，提高用户体验
2、前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端开发联调需要注意事项：
- 约定数据：有哪些需要传输的数据，数据类型是什么；
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
- 根据这些约定整理成接口文档
如何mock数据：
- 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
- 可以用xampp进行模拟
- 也可使用server-mock
3、点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var btn = document.querySelector('.btn')
var lock = true
btn.addEventListener('click',function(){
if (!lock) {
return
}
var xhr. = new XMLHttpRequest()
xhr.onreadystatechange = function(opts){
if (xhr.readyState === 4 && xhr.status ===200) {
var data = JSON.parse(xhr.responseText)
opts.success(data)
}else if (xhr.readyState === 4) {
opts.error()
}
lock = true
}
xhr.open()
xhr.send()
lock = false
})
4、封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
// todo ...
}
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('出错了')
}
})
});
代码
<input class="username" type="text" name="username" placeholder="请输入用户名">
<input class="password" type="password" name="password" placeholder="请输入密码">
<input class="btn" type="submit" name="submit" value="提交">
<ul class="ct"></ul>
<script type="text/javascript">
function ajax(opts) {
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
var results = JSON.parse(xhr.responseText)
opts.success(results)
} else if (xhr.readyState === 4 && xhr.status ===404) {
opts.error()
}
}
var dataStr = ''
for (var key in opts.data) {
dataStr += key + '=' + opts.data[key] + '&'
}
dataStr = dataStr.substr(0,dataStr.length-1)
/*
var dataArr = []
for (var key in opts.data) {
dataArr.push(key + '=' + opts.data[key])
}
dataStr = dataArr.join('&')
*/
var urlStr = ''
if (opts.type === 'get') {
urlStr += opts.url + '?' + dataStr
xhr.open(opts.type,urlStr,true)
xhr.send(null)
}else if (opts.type === 'post') {
xhr.open(opts.type,opts.url,true)
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send(dataStr)
}
}
var username = document.querySelector('.username')
var password = document.querySelector('.password')
var ct = document.querySelector('.ct')
var btn = document.querySelector('.btn')
btn.addEventListener('click', function(){
ajax({
url: '/login', //接口地址
type: 'post', // 类型， post 或者 get,
data: {
username: username.value,
password: password.value
},
restype: 'json',
success: function(ret){
ct.innerText = ret
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
</script>
mock.js
app.get('/login', function(req, res) {
var username = req.query.username
var password = req.query.password
console.log('有请求来了');
console.log(username,password);
if (username === 'xiaoming' && password === 'abcd1234') {
var friends = ['xiaoming','abcd1234']
res.send(friends);
}else{
var friends = ['请重新输入']
res.send(friends);
}
});
app.post('/login', function(req, res) {
var username = req.body.username
var password = req.body.password
console.log('有请求来了');
console.log(username,password);
if (username === 'xiaoming' && password === 'abcd1234') {
var friends = ['xiaoming','abcd1234']
res.send(friends);
}else{
var friends = ['请重新输入']
res.send(friends);
}
});
5、实现加载更多的功能，后端在本地使用server-mock来模拟数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载更多</title>
<style type="text/css">
ul,li {
list-style: none;
padding: 0;
}
li {
display: block;
margin: 10px auto;
border: 1px solid #ccc;
padding: 5px;
/*
width: 600px;
height: 30px;
box-sizing: border-box;
*/
}
.ct li:hover {
background-color: green;
cursor: pointer;
}
.btn {
cursor: pointer;
width: 100px;
height: 40px;
border-radius: 3px;
font-size: 16px;
margin: 20px auto;
display: block;
outline: none;
}
.btn:hover {
background-color: pink;
color: green;
}
</style>
</head>
<body>
<ul class="ct"></ul>
<button class="btn">加载更多</button>
<script type="text/javascript">
var ct = $('.ct')
var btn = $('.btn')
var lock = true
var index = 0
btn.addEventListener('click', function(){
if (!lock) {
return
}
ajax({
url: '/loadMore', //接口地址
type: 'post', // 类型， post 或者 get,
data: {
index: index,
length: 5
},
restype: 'json',
success: function(ret){
var fragment = document.createDocumentFragment()
for (var i = 0; i < ret.length; i++) {
var li = document.createElement('li')
li.innerText = ret[i]
fragment.appendChild(li)
}
ct.appendChild(fragment)
index += 5 // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
function ajax(opts){
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
var data
if (opts.restype.toLowerCase() === 'text') {
data = xhr.responseText
} else if (opts.restype.toLowerCase() === 'json') {
data = JSON.parse(xhr.responseText)
} else if (opts.restype.toLowerCase() === 'xml') {
data = xhr.responseXML
}
opts.success(data)
}else if(xhr.readyState === 4){
opts.error();
}
lock = true
}
var dataStr = ''
for (var key in opts.data) {
dataStr += key + '=' + opts.data[key] + '&'
}
dataStr = dataStr.substr(0,dataStr.length-1)
/*
var dataArr = []
for (var key in opts.data) {
dataArr.push(key + '=' + opts.data[key])
}
dataStr = dataArr.join('&')
*/
var urlStr = ''
if (opts.type === 'get') {
urlStr += opts.url + '?' + dataStr
xhr.open(opts.type,urlStr,true)
xhr.send(null)
}else if (opts.type === 'post') {
xhr.open(opts.type,opts.url,true)
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send(dataStr)
}
lock = false
}
function $(cls){
return document.querySelector(cls)
}
</script>
</body>
</html>
mock数据
app.get('/loadMore',function(req,res) {
var index = req.query.index
var length = req.query.length
var data = []
for (var i = 0; i < length; i++) {
data.push('内容' + (parseInt(index) + i+1))
}
setTimeout(send,1000)
function send(){
res.send(data)
}
// body...
})
app.post('/loadMore',function(req,res) {
var index = req.body.index
var length = req.body.length
var data = []
for (var i = 0; i < length; i++) {
data.push('内容' + (parseInt(index) + i+1))
}
setTimeout(send,1000)
function send(){
res.send(data)
}
// body...
})
网友评论