问答
1.ajax 是什么？有什么作用？
ajax即“Asynchronous Javascript And XML”（ 异步 JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的局部更新。
2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
需要注意的事情
- 约定前后端联调的事件。
- 约定双方需要传输的数据和接口，在接口问盎中确定好参数的名称、格式等。
- 约定请求和响应的格式和内容。
MOCK数据段方法
- 使用server-mock 或者 mock.js搭建模拟服务器，进行模拟测试；
- 使用XAMMPP等工具，编写PHP文件来进行测试。
3.点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var onload = false; //设置锁变量；
document.querySelector(".btn").addEventListener("click",function () {
if(onload){ //如果有锁存在，则不执行AJAX；
return;
}
onload = true; //上锁
ajax({
url:"2.php",
type:"get",
data:{},
success:function(ret){
// TO DO
onload = false; //解锁
},
error:function () {
console.log("error.....")
}
});
});
代码
1.封装一个 ajax 函数，能通过如下方式调用
function ajax(opts){
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var json = JSON.parse(xmhttp.responseText);
opts.success(json);
}
if(xmlhttp.status == 404){
opts.error();
}
}
var dataStr = '';
for(var key in opts.data){
dataStr += key + '=' +opts.data[key] + '&';
}
dataStr = dataStr.substr(0,dataStr.length-1);
if(opts.type.toLowerCase() === 'post'){
xmlhttp.open(opts.type,opts.url, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urllencoded");
xmlhttp.send(dataStr);
}
if(opts.type.toLowerCase() === 'get'){
xmlhttp.open(opts.type, opts.url + '?' +dataStr, true);
xmlhttp.send();
}
}
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('出错了')
}
})
});
2.实现如下加载更多的功能。效果如下： 加载更多的功能
3.实现注册表单验证功能效果如下：注册表单验证功能
本文版权归作者饥人谷_Josh和饥人谷所有，转载请注明来源