J12 J12 - 锐客网

AJAX 是什么？有什么作用？ AJAX是什么 【J12】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

JS Bin - 锐客网

#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;
}