获取未执行完的ajax,ajax 未完

问答

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和饥人谷所有，转载请注明来源