ajax 是什么?有什么作用?
AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
ajax不是新的编程语言,而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页面。
ajax的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。
ajax前景非常乐观,可以提高系统性能,优化用户界面。AJAX现有直接框架AjaxPro,可以引入AjaxPro.2.dll文件,可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组建,需要添加AjaxControlToolkit.dll文件,可以在控件列表中出现相关控件。
ajax的优点:
- 最大的一点是页面无刷新,用户的体验非常好。
- 使用异步方式与服务器通信,具有更加迅速的响应能力。。
- 可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
- 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
- ajax可使因特网应用程序更小、更快,更友好。
ajax的缺点:
- ajax不支持浏览器back按钮。
- 安全问题 AJAX暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。
- 不容易调试。
前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?
- 前后端开发联调需要注意的事情:1、get方法或post方法;2、约定数据接口和格式,前端提供参数,后台响应时返回什么格式;3、约定每次请求数据数量。
- 如何mock数据:使用server mock搭建本地服务器,模拟网站后端,使用server-mock首先得下载nodejs,然后下载server-mock(npm install -g server-mock),下载完成后,在目标文件文件夹创建一个router.js文件夹,用来接收和处理后端的请求文件(mock init可创建范例);最后mock start启动一个web服务器
点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
- 通过对数据是否接受完毕的状态来进行判断,当数据接收完毕时则允许下一次请求,否则不处理用户点击按钮的事件;状态锁初始状态为true,当用户点击按钮时开始请求数据,并将状态锁置为false,表示当前正在请求数据,此时再去点击按钮时,点击事件不会被处理也就不会再去发送数据请求,当数据接收完毕后,将状态锁置为true,此时用户可继续点击按钮请求数据。
var isDataArrive = true;//声明状态锁,默认打开
btn.addEventListener("click",function(){
if (!isDataArrive) {
return;//如果正在请求数据,那这次点击什么都不做
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readystate === 4) {
if (xhr.readystate === 200||xhr.readystate ===304) {
//dosomething
}
isDataArrive = true;//拿到数据,打开锁
}
}
xhr.open('get','/index?length',true)
xhr.send()
isDataArrive = false;//上锁,禁止在请求完成前发请求
})
</script>
实现加载更多的功能,实现加载更多,后端在本地使用server-mock来模拟数据
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
#ct li{
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
}
.btn{
width: 80px;
height: 40px;
margin: 20px auto;
padding: 10px auto;
border: 1px solid #E27272;
border-radius: 2px;
text-align: center;
text-decoration: none;
color: #E27272;
display: block;
line-height: 36px;
}
.btn:hover{
background-color: green;
color: white;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<a href="javascript:void(0)" id="load-more" class="btn">加载更多</a>
<script>
var btn = document.querySelector('#load-more');
var ct = document.querySelector('#ct');
var pageIndex = 0;
var isDataArrive = true;
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)
var fragment = document.createDocumentFragment()
for (var i = 0; i < results.length; i++) {
var node = document.createElement('li');
node.innerText = results[i];
fragment.appendChild(node);
}
ct.appendChild(fragment);
pageIndex += 5;
}else{
console.log('It's wrong!)
}
isDataArrive = false;
}
}
xhr.open('get','/load-more?index=' + pageIndex + '$length = 7',true)
xhr.send()
isDataArrive = true
})
</script>
</body>
</html>
服务器端
app.get('/load-more',function(req,res){
var idx = req.query.index;
var len = req.query.length;
var data = [];
for(var i = 0;i < len;i++){
data.push('new'+(parseInt(idx)+i))
}
setTimeout(function(){
res.send(data);
},1000)
});