问答
1.ajax 是什么？有什么作用？
- AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
- 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
- 所谓异步，就是向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。
2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- 联调
约定好需要传输的数据和接口，包括请求的类型get/post，请求url，数据的格式等
- mock数据
- 安装nodejs，在系统终端中输入npm install -g server-mock安装mock
- mock init 初始化数据，mock start开始；
- 生成的三个文件中，index.html为静态页面，router.js为后端接口文件，user.ejs为静态页面分隔的模板文件。
4.点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var isDataArrive=true;
xxx.addEventListener('click',function(){
if(!isDataArrive) return;
yyy.onreadystatechange=function(){
if(){
if(){}
isDataArrive=true;
}
yyy.open();
yyy.send();
isDataArrive=false;
};
}
代码
1.封装一个 ajax 函数，能通过如下方式调用
function ajax(opts){
var xmlhttp = new XMLLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var json = JSON.parse(xmlhttp.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-urlencoded");
xmlhttp.send(dataStr);
}
if(opts.type.toLowerCase() === 'get'){
xmlhttp.open(opts.type, opts.url + '?' + dataStr, true);
xmlhttp.send();
}
}
document.getElementById('btn').addEventListener('click',function(){
ajax({
url:'use_ajax.php',
type:'get',
data:{
username:document.getElementById('username').value
},
success:function(data){
console.log(data);//dealWith(data);
},
error:function(){
console.log("错误");//onError();
}
});
});
2.实现如下加载更多的功能。
任务24-2 代码
新浪云预览
3.实现注册表单验证功能
任务24-3 代码
新浪云预览
