1- 关于 ajax 及其作用
Ajax是Asynchronous JavaScript and XML的缩写。传统的从服务器获取数据都是要会刷新页面。包括了以下几个步骤：
1、浏览器向服务端发送请求，
2、服务器端获取请求信息后处理请求信息生成response，
3、服务器将response发送给浏览器，
4、浏览器刷新整个页面显示最新数据。
这个过程是同步的，按照顺序执行。这就会造成整个页面刷新用户体验差的情况，并且很多情况都只是页面的一部分内容改变，大部分内容是不改变的，这就造成多余的请求。这时候就是发挥ajax的作用了。
ajax利用xmlhttprequest对象脱离浏览器页面向服务器发送请求、加载等单独执行。这就能够不重新加载整个网页的情况下，对部分网页进行更新。
优点：
更新数据而不需要刷新页面： 它能在不刷新整个页面的前提下与服务器通信维护数据，由于ajax是按照需求请求数据，避免发送那些没有改变的数据。
异步通信： 它与服务器使用异步的方式通信，不会打断用户的操作（卡死页面）。
前后端负载平衡： 可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担。
数据与呈现分离： 利于分工，降低前后耦合。
缺点：
浏览器历史记录的遗失： 在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。
AJAX的安全问题： AJAX的出现就像建立起了一直通服务器的另一条通道，容易遭受到一些攻击。
2- 关于前后端开发联调需要注意的事情，后端接口完成前如何 mock 数据
前后端开发联调需要注意哪些事情:
- 约定接口名称
- 约定接口实现使用哪种方式:get/post
- 约定request参数的name,类型(格式)
- 约定response的类型(格式)格式: 字符串/数组/对象...
- 将上述内容写成文档,,开发工作按照文档约定的进行
后端接口完成前如何 mock 数据: - 根据文档,编写符合文档规范的测试用例,使用相关工具模拟服务器来实现对页面和接口的测试
- 相关工具: server-mock
3- 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击
var ajaxLock = false;
if (ajaxLock) {
return
}
xhr = new XMLHttpRequest();
ajaxLock = true;
xhr.onreadystatechange = function () {
if(xhr.readystate == 4) {
ajaxLock = false;
}
}
- 知乎-怎样防止重复发送 Ajax 请求？
- 可以参考这里，其中 html 里是前端点，js 面板里是 router.js的后端代码
4- 实现加载更多的功能，效果范例，后端在本地使用server-mock来模拟数据
//后端
app.get('/getmore', function(req, res) {
var nodeCount = Number(req.query.childCount);
var content = []
for (var i = nodeCount + 1; i <= nodeCount + 5; i++) {
content.push('内容' + i);
}
res.send(content);
});
//前端
<body>
<div class="container">
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>
<div class="box">
<a href="#" id="more">获取更多</a>
</div>
</div>
<script>
var more = document.getElementById("more");
var ul = document.querySelector(".container > ul");
var xhr = new XMLHttpRequest();
function getMoreContent(event) {
var child = ul.childElementCount;
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
insertHTML(JSON.parse(xhr.responseText));
}
}
var url = '/getmore?childCount=' + child;
xhr.open('get', url, true);
xhr.send();
}
function insertHTML(data) {
var i = 0;
for (i = 0; i < data.length; i++) {
var element = document.createElement('li');
element.innerText = data[i];
ul.appendChild(element);
}
}
more.addEventListener('click', getMoreContent);
</script>
- 学习感想：
-
ajax 本身不难，看些资料就能详细了解 XMLHttpRequest 的用法，难的是对服务器和后端的理解。因为不光要写前端，也要能让后端跑起来。多花些精力弄懂前后端相关概念是很必要的
-
这篇文章 对应的参考文章不错，可作为资料对 XMLHttpRequest 对象有个更细致的了解
-
想学习 HTTP，可以做些小练习 HTTP练习
-
关于工具：
- 更方便的 mock 工具，比 server mock 好用多了
- 前端学习指南
- http://www.easy-mock.com/ 注册 打开任意一个项目 创建接口 使用接口（AJAX、JSONP都行，具体看文档） 例如：接口是：http://www.easy-mock.com/mock/599d9294059b9c566dcd6915/example/frank
网友评论