AJAX 是什么？有什么作用？
AJAX是什么
ajax全称是“Asynchronous JavaScript and XML”,是指一种创建交互网页应用的网页开发技术，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个页面的情况下，对网页的某部分进行更新。
同时，ajax也是一种技术方案，但并不是一种新的编程语言新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequesta对象，是这个对象使得浏览器可以发出HTTP请求和接受HTTP响应。实现在页面不刷新的情况下和服务器进行数据交互。总结：我们使用XMLHttpRequest对象来发送一个Ajax请求。
AJAX作用
传统的WEB应用程序模型是这样工作的：用户的界面操作触发HTTP请求，服务器在接收到请求之后进行一些业务逻辑处理，如保存数据等，然后想客户端返回一个HTML页面。但这种法师并没有给与客户很好的应用体验，当服务器在处理数据的时候，用户则处于等待的状态，每一步操作都需要等待，太多的等待会使用户越来越没有耐心。而AJAX则大不相同，它通过AJAX引擎，使得应用过程很自然，操作流畅，因为其只和服务器交换有用的数据，而页面显示等不必要的数据则不再重新加载。AJAX引擎其实就是JavaScript、XML、XMLHttpRequest等等各项技术的综合应用。通过AJXA，我们可以使得客户端得到丰富的应用体验以及交换操作，而用户不会感觉到有网页提交或者刷新的过程，页面也不需要被重新加载，应用的数据交换都被隐藏。
前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
在开发之前，前后端需要协作商定数据和接口的各项细节，后端负责提供数据，前端负责展示数据（根据数据负责页面的开发）
-
前后端开发的注意事项
1 URL：接口名称
2 发送请求的参数和格式（get/post）
3 数据响应的数据格式（数组/对象）
4 根据前后端约定，整理接口文档 -
如何mock数据
1 搭建web服务器
2 根据接口文档仿造假数据
3 关联前后端文件，开启web服务器
4 验证前端页面功能及展示是否正确
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var requesting = false //默认没有请求
x.onclick = function(){
if(requesting){return}//如果现在正在请求，直接return,不让请求
requesting = ture
var xhr = new XMLHttpRequest()
xhr.open('GET','./page' + page + '.json')
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
requesting = false//请求回了之后就设置请求为false
var object = JSON.parse(xhr.responseText)
console.log(array)
}
}
}
xhr.send()
}
4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#ct li{
list-style: none;
border: 1px solid #ccc;
border-radius: 3px;
margin-top: 10px;
padding: 10px;
cursor: pointer;
}
.hover{
background-color: green;
color: #fff;
}
#button{
cursor: pointer;
line-height: 40px;
font-size: 14px;
width: 80px;
color: #e27272;
border: 1px solid #e27272;
border-radius: 3px;
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<ul class="ct">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
<button id="button">加载更多</button>
<script>
var ul = document.querySelector('#ct');
var button = document.querySelector('#button');
ul.addEventListener('mouseover', function(e){
var target = e.target;
if(target.tagName.toLowerCase() === 'li'){
target.classList.add('hover');
}
})
ul.addEventListener('mouseout', function(e){
var target = e.target;
if(target.tagName.toLowerCase() === 'li'){
target.classList.remove('hover');
}
})
var index = 3;
var len = 3;
var isResquesting = false;
button.addEventListener('click', function(){
if(isRequesting){
return;
}
isRequesting = true;
var url = '/loadmore?'+"index=" + index +"&" + "len=" + len;
index += len;
xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readystate === 4){
if((xhr.status >=200 && xhr.status <= 300) || (xhr.status === 304)){
var string = JSON.parse(xhr.responseText);
console.log(string);
isRequesting = false;
for(let i=0; i<string.length; i++){
var child = document.createElement('li');
child.innerText = string[i];
ul.appendChild(child)
}
}
}
}
})
</script>
</body>
</html>
网友评论