ajax有哪些用处,JS(九)AJAX

题目1: ajax 是什么?有什么作用?

AJAX即Asynchronous JavaScript and XML,异步的 JavaScript 和 XML 通过在后台与服务器进行少量数据交换。

AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

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

注意事项:

约定数据:有哪些需要传输的数据,数据类型是什么;

约定接口:确定接口名称及请求和响应的格式,请求的参数名称、响应的数据格式。

mock数据:

可以使用服务器框架搭建一个模拟服务器环境,比如使用express&nodejs或者使用xampp,更简单的办法是使用server-mock。在数据的模拟传输与请求查看上,postman也是一个好工具。

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

使用状态锁来防止重复点击。

//设置状态锁初始状态

var ajaxIsLock = false;

function ajax(){

//检查状态锁

if(ajaxIsLock){

return;

}

ajaxIsLock = true; //上锁

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if(xhr.readyState === 4 && xhr.status === 200 || xhr.status === 304){

ajaxIsLock = false //解锁

}

}

}

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

function ajax(opts){

opts.type = opts.type || 'GET';

opts.success = opts.success || function(){};

opts.error = opts.error || function(){};

opts.dataType = opts.dataType || 'json';

opts.data = opts.data || {};

var dataStr = '';

for(var key in opts.data){

dataStr += key + "=" + opts.data[key] + "&";

}

dataStr = dataStr.substr(0, dataStr.length-1);

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

if (xhr.status === 200 || xhr.status === 304) {

if (opts.dataType === 'text') {

opts.success(xhr.responseText);

} else if (opts.dataType === 'json') {

var json = JSON.parse(xhr.responseText);

opts.success(json);

}

} else {

opts.error();

}

}

}

if (opts.type.toLowerCase() === "get") {

xhr.open("get", opts.url + "?" + dataStr, true);

xhr.send();

} else if (opts.type.toLowerCase() === "post") {

xhr.open("post", opts.url, true);

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

xhr.send(dataStr);

}

}

document.querySelector('#btn').addEventListener('click', function(){

ajax({

url: '/login', //接口地址

type: 'get', // 类型, post 或者 get,

data: {

username: 'xiaoming',

password: 'abcd1234'

},

dataType: 'text',

success: function(ret){

alert(ret); // {status: 0}

},

error: function(){

console.log('出错了')

}

})

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值