keywords: Ajax。
-
Ajax是什么？有什么用？
Ajax = Asynchronous JavaScript and XML 。这一技术能够向服务器请求数据而无需重载页面，会带来良好的用户体验。
Ajax在浏览器与WEB服务器之间使用异步数据传输（HTTP请求），从服务器获取数据。
异步是指脱离当前浏览器页面的请求、加载等单独执行。因此，Ajax可以在不重载页面的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新。
图解AJAX
-
前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)
注意：
1、详细了解产品需求；
2、约定数据接口，包括约定数据格式、请求方法、返回数据格式等；
mock数据：
1、使用模拟数据生成器；
2、写简单的php文件模拟。
-
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
设置flag变量计数,初始值为0，点击一次变为1，ajax执行完毕后将flag恢复成0，并且设置当flag为1时return，因此当前一次ajax请求未完成就重复点击按钮，会直接return出事件处理程序：
var flag = 0;
el.addEventListener('click',function(){
if (flag === 1) return;
flag = 1;
ajax({
...
success:function() {
flag = 0
...
}
error:function() {
flag = 0
...
}
...
})
...
})
代码
-
封装一个 ajax 函数，能通过如下方式调用
function ajax(opts) {
var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4) {
if ((xmlhttp.status >= 200 && xmlhttp.status <300) || xmlhttp.status === 304) {
var json = JSON.parse(xmlhttp.responseText)
opts.success(json)
} else {
opts.error(xmlhttp.statusText)
}
}
}
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)
} else {
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('出错了')
}
})
});
-
实现如下加载更多的功能。
-
实现注册表单验证功能
