Ajax 是什么?有什么作用?##
Ajax(Asynchronous JavaScript and XML),异步JavaScript和XML。可以实现在不刷新页面的前提下与后端交互数据并更新页面。
前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?##
前后端开发联调需要注意:1请求类型(get/post);2请求参数(key/value);3发送的数据格式;4响应的数据格式
mock 数据可以通过在本地模拟后端服务器,并且建立符合约定规范的数据.
点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?##
var isLocked=false;
document.querySelector("#id").addEventListener("click",function(){
if(isLocked===true){ //使用状态所状态判断
return;
}
isLocked=true; //ajax之前先上锁
var xhr = new XMLHttpRequest();
xhr.open('get', '/xxxx?key=value', true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
isLocked=false;//请求完成解锁
if(xhr.status === 200){
console.log('hello')
}
}
}
})
封装一个 ajax 函数,能通过如下方式调用##
function ajax(opts) {
var url = opts.url,
type = opts.type,
dataType = opts.dataType,
success = opts.success,
error = opts.error,
dataStr = "";
for (var key in opts.data) {
dataStr += key + '=' + opts.data[key] + '&';
}
var xhr = new XMLHttpRequest();
if (type.toLowerCase() === 'post') {
xhr.open(type, url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(dataStr);
}
if (type.toLowerCase() === 'get') {
xhr.open(type, url + '?' + dataStr, true);
xhr.send();
}
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if (dataType.toLowerCase() === 'text') {
success(xhr.responseText);
}
if (dataType.toLowerCase() === 'json') {
var json = JSON.parse(xhr.responseText);
success(json);
}
} else {
error();
}
}
}
};
document.querySelector('#btn').addEventListener('click', function() {
ajax({
url: 'http://a.test.com:8080/user', //接口地址
type: 'get', // 类型, post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
dataType: 'text',
success: function(ret) {
console.log(ret); // {status: 0}
},
error: function() {
console.log('出错了')
}
})
});