美文网首页
Ajax实践

Ajax实践

作者: hellowade | 来源:发表于2017-07-24 11:46 被阅读0次

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

    AJAX(Asynchronous JavaScript and XML)是一种技术方案,依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。所以我用一句话来总结两者的关系:我们使用XMLHttpRequest对象来发送一个Ajax请求。
    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

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

    前后端开发联调注意事项:

    • 约定数据:有哪些需要传输的数据,数据类型是什么
    • 约定接口:确定接口名称及请求和响应的格式,请求的参数名称、响应的数据格式。根据这些约定整理成接口文档
    • 后端接口完成前Mock数据
      mock数据方法
    • 安装xampp搭建php本地服务器
    • server-mock模拟后台数据

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

    var isDataArrive = true  //使用状态锁,先声明变量
    ...
    btn.addEventListener('click',function(){
            if (!isDataArrive) {
              return
            }     //绑定事件,检查状态锁的状态
    ...
    xhr.onreadystatechange = function(){
              if (xhr.readyState === 4&(xhr.status === 200 || xhr.status === 304)){
              ...
              var isDataArrive = true}    //后端传入数据无误,状态锁设置为true
            xhr.open('get','/loadMore?index=0&length=6',true)
            xhr.send()
            isDataArrive = false //向后端提交数据,状态锁设置为false
    

    4.实现加载更多的功能,后端在本地使用server-mock来模拟数据?

    作业

    相关文章

      网友评论

          本文标题:Ajax实践

          本文链接:https://www.haomeiwen.com/subject/toxukxtx.html