Ajax应用
1、 ajax 是什么？有什么作用？
-
含义：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
-
作用：实现网页的异步加载，局部刷新网页。当在向服务器获取新数据时不需要刷新整个网页，提高用户体验。
直白地说，就是没用AJAX的网页，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新。用了AJAX之后，你点击，然后页面上的一行字就变化了，页面本身不用刷。AJAX只是一种技术，不是某种具体的东西。不同的浏览器有自己实现AJAX的组件。
ajax的全称是AsynchronousJavascriptAndXML。异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。（当然，在其他语境下这个解释可能就不对了）这个很重要，如果不是这样的话，我们点完按钮，页面就会死在那里，其他的数据请求不会往下走了。这样比等待刷新似乎更加讨厌。（虽然提供异步通讯功能的组件默认情况下都是异步的，但它们也提供了同步选项，如果你好奇把那个选项改为false的话，你的页面就会死在那里）xml只是一种数据格式，在这件事里并不重要，我们在更新一行字的时候理论上说不需要这个格式，但如果我们更新很多内容，那么格式化的数据可以使我们有条理地去实现更新。现在大部分人其实是用JSON这种格式来代替XML的，因为前者更加简洁，解析速度也更快。
总结：只要是JS调用异步通讯组件并使用格式化的数据来更新web页面上的内容或操作过程，那么我们用的方法就可算是AJAX。
2、 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端开发联调需要注意事项：
- 约定数据：有哪些需要传输的数据，数据类型是什么；
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
- 根据这些约定整理成接口文档
后端接口完成前如何 mock 数据：
- mock数据指的是在后端开发没有完成时，前端可以通过mock方法搭建本地服务器，模拟后台数据来实现数据交互的效果。
- 可安装xampp在本地搭建(php等)服务器，也可以安装server-mock，这样不需要特地去写一个后台的处理页面文件来访问数据。
3、点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
- 首先我这里用的不是 server-mock；
- 把 AJAX 的 URL 设置为 "#" + "..."，向自身请求；
- 请求也可以成功响应，因为提交的地址是自身，所以 responseText 是本身的 html 的文档
下边看代码
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testAJAX</title>
</head>
<body>
<input type="text" name="username" value="jirengu">
<input type="button" value="提交">
<!-- 引入 AJAX 函数包 -->
<script type="text/javascript" src="myAJAX.js"></script>
<!-- 引入页面 JS -->
<script type="text/javascript" src="index.js"></script>
</body>
</html>
- myAJAX.js
//函数参数1.提交方法2.提交地址3.成功函数4.失败函数(可选)
function myAJAX(method, url, fnSucc, fnFail) {
//1.创建XHR对象
var xhr = new XMLHttpRequest()
//2.设置method,url,true/false
xhr.open(method, url, true)
//3.发送请求
xhr.send()
//4.监听请求
xhr.onreadystatechange = function() {
if (!(xhr.readyState === 4)) {
return
}
//返回请求后作出判定
//如果成功
if (xhr.status === 200 || xhr.status === 304) {
console.log(xhr.status)
//因为提交的地址是自身，所以 responseText 是 index.html 的文档
fnSucc(xhr.responseText)
} else {
//如果失败,存在失败函数则调用
if (fnFail) {
fnFail(xhr.statusText)
}
}
}
}
- index.js
//封装 DOM API
function $$(items) {
return document.querySelectorAll(items)
}
var int1 = $$('input')[0],
btn1 = $$('input')[1],
//统计提交次数
index = 1,
//设置防重复点击开关
lock = false
btn1.onclick = function() {
//如果一次请求未完成，lock =t rue ，就不执行后续代码
if (lock) {
return
}
//如果当前没有请求，改变 lock 为 true ，并执行后续代码
lock = true
//设置提交按钮不可点击，不设置也没关系，作用和lock重复了
btn1.setAttribute('disabled', 'true')
//定时器模仿网速差等情况
setTimeout(function() {
//时间函数执行完才会执行下边的
ajax()
//请求OK了，把 lock 改为 false
lock = false
//恢复按钮
btn1.removeAttribute('disabled')
}, 3000)
}
//调用AJAX、封装事件函数
function ajax() {
myAJAX('GET', '?' + int1.name + '=' + int1.value, succ, fail)
//成功函数，因为返回的responseText 是 index.html 的文档，就不输出它了
function succ(e) {
console.log('success' + index)
index += 1
}
//失败函数
function fail() {
console.log('fail')
}
}
4、实现加载更多的功能，效果范例416，后端在本地使用server-mock来模拟数据
代码：github code
