Ajax实践
2017-05-17 本文已影响0人
七_五
1、ajax是什么，有什么用？
- AJAX是异步的JavaScript和XML，作用主要是利用js的XMLHttpRequest对象来实现在不重新加载整个页面的情况下更新部分网页，具体包含以下步骤：
var httpRequest = new XMLHttpRequest() // 创建对象->获取实例
httpRequest.open('GET', '/data') // 设置GET 路径
httpRequest.send() //发送HTTP请求
2、前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
-
前后端开发联调需要注意事项
1、约定数据：有哪些需要传输的数据，数据类型是什么
2、约定接口：确定接口的名称及请求和响应的格式，请求的参数、响应的数据格式
3、依据这些约定整理成接口文档 -
如何mock数据
1、可以依据接口文档，使用假数据来验证制作的页面响应和接口是否正常
2、使用xampp模拟
3、使用server-mock(重点掌握)
3、点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
vscode
4、封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
var xhr = new XMLHttpRequest();
//依据状态码来判断数据是否判断如何处理
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status ==200){
var json = JSON.parse(xhr.responseText);
opts.success(json);
}
if(xhr.status == 404){
opts.error();
}
}
var dataStr='';
//取出opts.data内所有数据并以&符号连接
for(var key in opts.data){
dataStr += key + '=' + opts.data[key] + '&'
}
dataStr = dataStr.substr(0,dataStr.length-1);
//xhr.open(method,url,asyn)，asyn设置为bool值，true表示异步；false表示同步
if(opts.type.toLowerCase() == 'get'){
xhr.open(opts.type,opts.url + '?'+dataStr,true);
xhr.send();
}
//get数据一般通过url传递，而post通过body内传递
if(opts.type.toLowerCase() == 'post'){
xhr.open(opts.type,opts.url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send(dataStr);
}
}
5、实现加载更多的功能
- 前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="test5.css">
</head>
<body>
<ul class="content">
<li>内容1</li>
<li>内容2</li>
</ul>
<div id="load-more">
<a href="javascript:void(0)" class="btn">加载更多</a>
</div>
<script>
var btn = document.querySelector('.btn');
var ct = document.querySelector('.content');
var pageIndex = 3;
btn.addEventListener('click',function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var data = JSON.parse(xhr.responseText);
console.log(data)
var fragment = document.createDocumentFragment()
for(var i=0;i<data.length;i++){
var node = document.createElement('li')
node.innerText = data[i]
fragment.appendChild(node)
}
ct.appendChild(fragment)
pageIndex += 5;
}
}
xhr.open('get','/load?index=pageIndex&length',true)
xhr.send()
});
- 后端代码：
app.get('/load?index=pageIndex&length',function(req,res){
var curIdx = req.query.index;
var len = req.query.length
var data =[]
for(var i=3;i<len;i++){
data.push('内容'+i))
}
res.send(data);
});
