about ajax,ajax

1、ajax 是什么？有什么作用？

AJAX代表异步JavaScript和XML。简而言之，它是使用 XMLHttpRequest 对象与服务器端脚本进行通信。它可以发送以及接收各种格式的信息，包括JSON，XML，HTML，甚至文本文件。AJAX最吸引人的特性是，它的“异步”性质，这意味着它可以做所有这一切，而不必刷新页面。这让您可以根据用户事件更新页面的某些部分。

AJAX的两个主要功能允许您执行以下操作：

1、向服务器发出请求，而不重新加载页面

2、接收和处理服务器中的数据

2、前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

注意事项

约定数据：有哪些需要传输的数据，数据类型是什么；

约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；

根据这些约定整理成接口文档

如何mock

1、将 mock 数据写在代码中。

// $.ajax({

// url: ‘https://cntchen.github.io/userInfo’,

// type: 'GET',

// success: function(dt) {

var dt = {

"isSuccess": true,

"errMsg": "This is error.",

"data": {

"userName": "Cntchen",

"about": "FE"

},

};

if (dt.isSuccess) {

render(dt.data);

} else {

console.log(dt.errMsg);

}

// },

// fail: function() {}

// });

优点：可以快速修改数据

缺点：无法模拟异步的网络请求，无法测试网络异常；联调前需要做较多改动，增加最终上真实环境的切换成本。接口文档变化需要手动更新

2.搭建本地服务器

3.使用在线mock服务，比如 https://www.easy-mock.com

3、点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

使用状态锁

var lock=false,

btn = document.qureySelector('#btn');

btn.addEventListener('click', function(){

if(lock){

return;

}else{

lock=true;

ajax({

....

lock=false //收到响应之后才把false赋值给lock

})

}

})

4、封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据

function ajax(opts) {

var xmlhttp;

if(window.XMLHttpRequest) { //IE7+,chrome,Safari,Opera,Firefox

xmlhttp = new XMLHttpRequest();

} else {

xmlhttp = new AcitveXObject("Microsoft.XMLHTTP"); //IE5,IE6

}

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() == 'get') {

xmlhttp.open(opts.type, opts.url + '?' + dataStr, true);

xmlhttp.send();

}

if(opts.type.toLowerCase() == 'post') {

xmlhttp.open(opts.type, opts.url, true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.send(dataStr);

}

}