一、 ajax 是什么？有什么作用？
AJAX全称是“Asynchronous JavaScript and XML”(异步JavaScript和XML)，是一种创建快速动态网页的开发技术。
AJAX不是新的编程语言，而是一种使用现有标准的新方法。通过在后台与服务器进行少量数据交换，可以使网页实现异步更新，即在不重新加载整个页面的时候，可以对网页的某部分进行更新。传统的网页（不使用AJAX）如需要更新内容，必须重载整个页面。
AJAX可以提高系统性能，优化用户界面。
优点;
1、页面无刷新，用户的体验较好；
2、使用异步方式与服务器通信，具有迅速的响应能力；
3、ajax的原则是按需取数据，可以最大限度的减少冗余请求和响应对服务器造成的负担；
4、基于xml标准化的并被广泛支持的技术，不需要下载插件或者小程序；
5、ajax可使应用程序更小、更快、更友好。
缺点;
1、ajax只是局部刷新，不支持浏览器back按钮；
2、安全问题 AJAX 暴露了与服务器交互的细节；
3、对搜索引擎的支持比较弱；
4、破坏了程序的异常机制。
** 二、前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？**
前后端开发联通需要注意的事项：
接口:确定接口名称
接口的参数：服务器、端口、请求和响应的格式
接口传递内容：需要传输的数据，及数据类型、长度等的限制
根据这些约定整理成文档
mock数据
在node.js下安装sever-mock
打开终端执行npm install -g sever-mock
打开文件所在的文件夹 执行 cd 文件夹名
在当前文件夹下创建router.js文件
mock init 可创建范例文件
在当前文件夹下，在终端执行mock start ， 启动服务器
三、点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var isDataArrive=true;//设置状态锁，初始为true
var btn=document.querySelector('#load-more')
btn.addEventListener('click',function () {
if(!isDataArrive){
return;//当数据未返回时，直接跳出循环，不管用户点击多少次
}
//当数据返回时，执行以下内容
var xhr=new XMLHttpResquest();
xhr.onreadystatechange=function(){
if (xhr.readyState===4) {
//dosomething
isDataArrive=true;
};
}
xhr.open()
xhr.send()
isDataArrive=false//当用户获得数据后，在设置成false防止重复点击
})
四、封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
var xmlhttp= new XMLHttpRequest();
var dataStr='';
for (var key in opts.data) {
dataStr += key + '=' + opts.data[key] + '&';
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState===4) {
if (opts.dataType==='tetx') {
opts.success(xmlhttp.responseText);
}
if (opts.dataType==='json') {
var json=Json.parse(xmlhttp.responseText);
opts.success(json);
}
}else{
opts.error();
}
}
dataStr=dataStr.substr(0,dataStr.length-1);
if (opts.type.toLowerCase()==='post') {
xmlhttp.open(opts.type,opts.url,true);
xmlhttp,setRequestHeader('content-type','application/x-ww-form-urlenconder')
xmlhttp.send(dataStr);
};
if (opts.type.toLowerCase()==='get') {
xmlhttp.open(opts.type,opts.url+'?'+dataStr,true)
xmlhttp.send();
};
}
var btn=document.querySelector('#btn');
document.querySelector('#btn').addEventListener('click', function(){
ajax({ url: '/login',
type: 'get',
data: {
username: 'xiaoming',
password: 'abcd1234' },
success: function(ret){
console.log(ret);
},
error: function(){
console.log('出错了')
}
})
});
五、实现加载更多的功能，效果范例83，后端在本地使用server-mock来模拟数据
html代码
<!DOCTYPE html>
<html>
<head>
<title>实现加载更多功能</title>
<meta charset="UTF-8">
<style type="text/css">
a{
text-decoration: none;
}
li{
list-style: none;
}
#ct li {
border: 1px solid #333;
padding: 10px;
margin-top: 10px;
}
#ct li:hover{
cursor: pointer;
background-color: #0f0;
}
#load-more{
display: block;
margin: 10px auto;
}
.btn{
width: 80px;
height: 40px;
line-height: 40px;
display: inline-block;
color: #f11;
border: 1px solid #f11;
border-radius: 4px;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<ul id="ct">
<li>内容1</li>
<li>内容2</li>
</ul>
<a href="javaScript:void(0)" id="load-more" class="btn" >加载更多</a>
</div>
<script type="text/javascript">
var ct=document.querySelector('#ct')
var loadMore=document.querySelector('#load-more');
var btn=document.querySelector('.btn');
var isDataArrive=true;
var pageIndex=2;
btn.addEventListener('click',function () {
if(!isDataArrive){
return;
}
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState===4) {
if (xhr.status===200 || xhr.status===304) {
var results=JSON.parse(xhr.responseText);
console.log(results);
var fragment=document.createDocumentFragment();
for (var i = 0; i<results.length; i++) {
var node=document.createElement('li');
node.innerText=results[i];
fragment.appendChild(node);
console.log(pageIndex);
}
ct.appendChild(fragment);
pageIndex=pageIndex+5;
}else{
console.log('出错了');
}
isDataArrive=true;
};
}
xhr.open('get','/loadMore?index='+ pageIndex + '&length=5',true)
xhr.send()
isDataArrive=false
})
</script>
</body>
</html>
后端代码
app.get('/loadMore', function(req, res) {
var curIdx=req.query.index;
var len =req.query.length;
var data=[];
for(var i=0;i<len;i++){
data.push('内容' +i));
}
setTimeout(function(){
res.send(data)
},2000);
})
Paste_Image.png
网友评论