进阶12

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

ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
作用：实现在页面不刷新的情况下和服务端进行数据交互

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

• 联调注意事项：

  • 约定接口，确定接口名称及请求和响应的格式，请求的参数名称，响应的数据格式
  • 约定数据，有哪些需要传输的数据，数据类型是什么？
  • 根据这些数据整理成接口文档

• mock数据
  前端人员可以自己使用服务器框架搭建一个模拟服务器环境（如：express&nodejs，xampp或者server-mock）,在本地平台上mock数据，事先进行调试，也可以利用一些线上mock数据的服务

• easy-mock
• rapapi

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

设置状态锁，用于判断是否加载完成

var btn = document.querySelector('#search');
var isLoading = false //状态锁，用于判断是否在加载数据

btn.addEventListener('click', function() {
    btn.disabled = true;
    /** 获取城市名称，发送*/
    if (isLoading) {
        target.disabled = false;
        return;
    }

    isLoading = true;

    var city = document.querySelector('#city');
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/getWeather?city=' + city.value, true)
    xhr.send();

    // 数据成功获得后，设置disabled为false，显示天气状态
    xhr.addEventListener('load', function() {
        var weatherText = document.querySelector('#weather');
        var weatherImg = document.querySelector('#image');
        if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            var resultObj = JSON.parse(xhr.responseText)
            weatherText.innerText = resultObj.weather;
            weatherImg.src = resultObj.picture;
            btn.disabled = false;
            isLoading = false;
        }
    })
})

4.实现加载更多的功能，代码提交到 github

https://github.com/upupdayday/demo/tree/master/midd_t12_4