1. ajax 是什么？有什么作用？
AJAX即Asynchronous Javascript And XML（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS、HTML、Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
- readyState的五种状态
UNSENT
XMLHttpRequest 代理已被创建， 但尚未调用 open() 方法。
OPENED
open() 方法已经被触发。在这个状态中，可以通过 setRequestHeader()方法来设置请求的头部， 可以调用send()方法来发起请求。
HEADERS_RECEIVED
send() 方法已经被调用，响应头也已经被接收。
LOADING
响应体部分正在被接收。如果responseType
属性是“text”或空字符串，responseText
将会在载入的过程中拥有部分响应数据。
DONE
请求操作已经完成。这意味着数据传输已经彻底完成或失败。
2. 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
1.约定数据：约定好页面需要的数据和数据类型
2.约定接口：约定接口的名称、请求的参数、相应的格式（成功或失败分别返回什么）
3.将约定好的内容整理成接口文档和规范
如何 mock 数据：
1.使用假数据来验证我们制作的页面响应和接口是否正常。
2.可以使用server-mock搭建模拟服务器，进行模拟测试。
3. 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var isDataArrive = true; //初始化状态锁，解决用户重复点击按钮
btn.addEventListener("click",function(e){ //给链接点击绑定事件
if (isDataArrive) {
return; //第二次点击时，如果第一次点击获取的数据未到，isDataArrive为true，点击无效。
}
isDataArrive = true;
ajax({
....
isDataArrive = false; //获取数据之后isDataArrive为false，解锁
})
});
4. 封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 &&(xhr.status === 200 || xhr.status === 304)) {
var result = JSON.parse(xhr.responseText);
opts.success(result);
}else{
opts.error();
}
};
var dataString = "?";
for (key in opts.data) {
dataString += key + "=" + opts.data[key] + "&";
}
dataString = dataString.substr(0,dataString.length-1); //去掉末尾
xhr.open(opts.type,opts.url + dataString,true);
xhr.send();
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: '/login', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
5. 实现加载更多的功能，效果范例133，后端在本地使用server-mock来模拟数据
封装过功能的代码：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body {
margin: 0;
padding: 0;
}
.container>div{
margin: 10px 10px;
padding: 10px 10px;
border: 1px solid #ccc;
}
.btn{
display: block;
text-decoration: none;
color: #E27272;
width: 100px;
margin: 10px auto;
text-align: center;
border: 1px solid #E27272;
padding: 15px 10px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
<a href="javascript:void(0)" class="btn" id="load-more">加载更多↓</a><!--javascript:void(0)点击链接不会跳转至顶部-->
</body>
<script>
var btn = document.querySelector("#load-more");
var container = document.querySelector(".container");
var pageIndex = 4;//记录发送的下标
var isDataArrive = true; //初始化状态锁，解决用户重复点击按钮
btn.addEventListener("click",function(e){
e.preventDefault(); //与javascript:void(0)作用相同，取消a链接的跳转
if (isDataArrive) {
return; //如果正在请求数据，那这次点击什么都不做
}
loadData(function(news){ //加载数据
renderPage(news) //把函数作为参数callback传递
pageIndex = pageIndex + 4;
isDataArrive = true;
})
isDataArrive = false;
});
function loadData(callback){ //封装请求数据功能
// ajax("get",url,data,isSuccess,isError)
//或写成JSON格式
ajax({
type: "get",
url: "/loadMore",
data: {
index: pageIndex,
length: 4
},
isSuccess: callback,
isError: function(){
console.log("error")
}
}) //要传递的参数
}
function renderPage(news){ //封装渲染功能
var fragment = document.createDocumentFragment(); //创建DOM片段，添加数据
for (var i = 0; i < news.length; i++) {
var node = document.createElement("div");
node.innerText = news[i];// 用innerHTML有安全隐患
fragment.appendChild(node);
}
container.appendChild(fragment);
}
function ajax(options){ //封装ajax功能
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 &&(xhr.status ===200 || xhr.status ===304)) {
var result = JSON.parse(xhr.responseText);
options.isSuccess(result);
}
}
var query = "?";
for(key in options.data){
query += key + "=" + options.data[key] + "&";
}
query = query.substr(0,query.length-1); //去掉末尾
xhr.open(options.type, options.url + query ,true) //拼成"/loadMore?index="+pageIndex+"&length=5"
xhr.send();
}
</script>
</html>
后端代码：
app.get("/loadMore", function(req,res){
var currentIndex = req.query.index;
var length = req.query.length;
var data = [];
for (var i = 0; i < length; i++) {
data.push("内容" + (parseInt(currentIndex) + i))
}
res.send(data);
});
未封装过的代码：
<script>
var btn = document.querySelector("#load-more");
var container = document.querySelector(".container");
var pageIndex = 4;
btn.addEventListener("click",function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 &&(xhr.status ===200 || xhr.status == 304)){
var result = JSON.parse(xhr.responseText);
console.log(result);
var fragment = document.createDocumentFragment(); //创建DOM片段，添加数据
for (var i = 0; i < result.length; i++) {
var node = document.createElement("div");
node.innerText = result[i];//innerHTML有安全隐患
fragment.appendChild(node);
}
container.appendChild(fragment);
pageIndex = pageIndex + 4;
}
}
xhr.open("get","/loadMore?index="+pageIndex+"&length=4",true)
xhr.send()
})
</script>
网友评论