ajax 是什么？有什么作用？

含义：AJAX = Asynchronous JavaScript and XML。ajax不是新的编程语言，而是一种使用现有标准的新方法。

let xhr = new XMLHttpRequest()
xhr.open('POST', '/xxxx')
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        console.log(xhr.responseText)
    }
}
xhr.send('a=1&b=2')

image.png

ajax是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。

ajax的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器 目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

ajax的优点：

1. 最大的一点是页面无刷新，用户的体验非常好。
2. 使用异步方式与服务器通信，具有更加迅速的响应能力。
3. 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4. 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
5. ajax可使因特网应用程序更小、更快，更友好。

ajax的缺点：

1. ajax不支持浏览器back按钮。
2. 安全问题 AJAX暴露了与服务器交互的细节。
3. 对搜索引擎的支持比较弱。
4. 破坏了程序的异常机制。
5. 不容易调试。

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

前后端开发联调需要注意事项：

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

mock对象就是真实对象在调试期间的代替品。

后端接口完成前mock数据：

• 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
• 可以搭建php本地服务器用，php写脚本提供临时数据；
• 也可使用使用server-mock来模拟假数据
  • 使用easy-mock
  • 使用rapapi

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

//方法一：
document.querySelector("#btn").addEventListener("click",function(){
    var xhr = new XMLHttpRequest()
    xhr.open("GET","xxx",true)
    xhr.addEventListener("load",function(){
            // to do 
        if (xhr.readyState < 4) {
            document.querySelector("#btn").disable = true
        }else{
            document.querySelector("#btn").disable = false
            }        
    })
    xhr.send()
})

//方法二
var lock    //设置锁
var xhr = new XMLHttpRequest()
document.querySelector("#btn").addEventListener("click",function(){
    
    if(lock){
        return   //当lock为真时退出
    }else{
        lock = true
        xhr.open("GET","xxx",true)
        xhr.send()
        xhr.addEventListener("load",function(){             
            xhr.onreadstatechange = function(){
                if (xhr.readyState === 4 ) {
                    var data = xhr.responseText
                    // to do
                    lock = false  //获取数据后设置为false
                }
            }                               
        })
    }
})

题目4：

demo

效果范例 。代码提交到 github