一、Ajax 是什么？有什么作用？
1.Ajax是Asynchronous JavaScript And XML的缩写，这一技术能够从服务器获取额外的数据而无需刷新整个页面，会带来良好的用户体验；
2.Ajax在浏览器和Web服务器之间使用异步数据传输（HTTP请求）从服务器获取数据；
3.Ajax本质就是用JS创造了一个XMLHttpRequest对象，这个对象可以操作浏览器的接口，不通过页面刷新，而是直接向后台发送请求获取数据，然后浏览器进行展示改变网页；
4.使用Ajax最直观的感受就是向服务器获取数据不需要刷新页面等待了。
Ajax使用的四大步骤
二、前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)
1.需要注意的事情：
- 约定前后端联调的时间。
- 约定双方需要传输的数据和接口，在接口文档中确定好参数的名称、格式等。
- 约定请求和响应的格式和内容。
2.mock数据的方法有：
- 使用server-mock或mock.js搭建模拟服务器，进行模拟测试；
- 使用XAMPP等工具，编写PHP文件来进行测试。
三、点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var isLocked = false;//利用布尔值作为状态锁
btn.addEventListener('click',function(){
if(isLocked == true){
return;
}
isLocked = true;//先上锁
ajax({
...
});
});
function success(){
...
isLocked = false;//解锁
}
function erreo(){
...
isLocked = false;//解锁
}
代码练习
四、封装一个 ajax 函数，能通过如下方式调用
function ajax(opts){
// todo ...
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: 'getData.php', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
代码:
function ajax(opts){
//创建ajax对象
var xmlhttp=new XMLHttpRequest();
//对ajax进行事件监听
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState===4&&xmlhttp.status===200){
//将服务器返回的文本内容转换为JSON格式
var json=JSON.parse(xmlhttp.responseText);
opts.success(json);
}
if(xmlhttp.status===404){
opts.error();
}
}
//创建发送到服务器的数据,为了让数据附加到url上,必须为key/value格式
var dataStr="";
for(var key in opts.data){
dataStr+=key+"="+opts.data[key]+"&";
}
dataStr=dataStr.substr(0,dataStr.length-1);
//判断请求的方式为GET
if(opts.type.toLowerCase()==="GET"){
//连接服务器
xmlhttp.open("GET",opts.url+"?"+dataStr,true);
//发送请求
xmlhttp.send();
}
//判断请求方式为post
if(opts.type.toLowerCase()==="post"){
xmlhttp.open("POST",opts.url,true);
//为了使post请求与提交web表单相同,
//将Content-Type头部信息设置为application/x-www-form-urlencoded来模仿表单提交功能
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send(dataStr);
}
}
