ajax实践

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

AJAX是对Asynchronous JavaScript and XML的简写，它的诞生使得向服务器请求额外的数据而不用刷新页面。

作用：

• 更新数据而不需要刷新页面： 它能在不刷新整个页面的前提下与服务器通信维护数据，由于ajax是按照需求请求数据，避免发送那些没有改变的数据。
• 异步通信： 它与服务器使用异步的方式通信，不会打断用户的操作（卡死页面）。
• 前后端负载平衡： 可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担。
• 数据与呈现分离： 利于分工，降低前后耦合。

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

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

• 约定接口：确定接口名称及请求和响应的格式，请求的参数名
• 称、响应的数据格式；
• 根据这些约定整理成接口文档
• mock数据：
  可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
• 使用server-mock，简单使用步骤如下：
• npm install -g server-mock：在全局中安装server-mock
• mock init：生成3个mock文件(index.html,router.js,user.ejs)
• mock start：开启服务器

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

var isLoading = false;//状态变量：用于在数据到来之前防止重复点击 btnNode.addEventListener('click', function() { if(isLoading) return;//正在加载则终止 var text = textNode.value; var xhr = new XMLHttpRequest(); xhr.open('get', '/test?text=' + text, true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.readyState === 4 && xhr.status === 200) { var content = xhr.responseText; console.log(content); contentNode.innerText = content; isLoading = false;//加载成功则重置状态变量 } } isLoading = true;//加载开始时改变状态变量的值 });

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

function ajax(opts){ var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { var result = JSON.parse(xmlhttp.responseText) opts.success(result); } if(xmlhttp.readyState == 4 && xmlhttp.status == 404) { opts.error(); } }; var dataString = ''; for(var key in opts.data) { dataString += key + '=' + opts.data[key] + '&'; } dataString = dataString.substring(0, dataString.length - 1); if(opts.type.toLowerCase() === 'get') { xmlhttp.open('get', opts.url + '?' + dataString, true); xmlhttp.send(); } if(opts.type.toLowerCase() === 'post') { xmlhttp.open('post', opts.url, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(dataString); } } document.querySelector('#btn').addEventListener('click', function(){ ajax({ url: '/login', //接口地址 type: 'get', // 类型， post 或者 get, data: { username: 'xiaoming', password: 'abcd1234' }, success: function(ret){ console.log(ret); // {status: 0} }, error: function(){ console.log('出错了') } }) });

5.实现加载更多的功能，效果范例108，后端在本地使用server-mock来模拟数据

github