美文网首页
ajax实践

ajax实践

作者: D一梦三四年 | 来源:发表于2017-10-07 22:39 被阅读0次

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

  • Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页面。
  • 传统的HTTP请求流程大概如下,这些过程是同步的,会顺序执行。
    • 浏览器向服务器发送请求
    • 服务器根据浏览器传递的数据生成responsive
    • 服务器将responsive返回给浏览器
    • 浏览器刷新整个页面显示最新数据

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

  • 前后端开发联调注意事项
    • 约定接口:确定接口名称及发送请求的参数和格式(get/pos)
    • 约定数据:数据响应的数据格式(数组/对象)
    • 根据这些约定整理成接口文档
  • 如何 mock 数据
    • 使用 server-mock 等搭建web服务器
    • 根据接口文档仿造假数据
    • 关联前后端文件,开启web服务器
    • 验证制作的页面响应和接口是否正确

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

设置状态锁

//添加一个状态锁,初始为true,上锁为true,解锁为false
var lock = true;
btn.addEventListener('click', function () {
    //状态为false时,直接return
    if (!lock) {
        return
    }
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyStatus === 4) {
            //readystate为4时,此次请求结束,上锁
            lock = true;
        }
    }
    xhr.open('GET',url);
    xhr.send();
    //解锁,这时候请求开始
    lock = false;
})

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

相关文章

  • ajax实践

    1、 ajax 是什么?有什么作用? ajax即asynchronous javascript and xml(异...

  • ajax实践

    1、ajax 是什么?有什么作用? ajax,即Asynchronous JavaScript and XML(异...

  • Ajax实践

    在了解ajax之前,我们先粗略的了解一下http协议 HTTP协议 http事务 一个完整的http请求是怎样的呢...

  • ajax 实践

    题目1: ajax 是什么?有什么作用? ajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HT...

  • ajax实践

    1.ajax 是什么?有什么作用? Ajax是Asynchronous JavaScript and XML的缩写...

  • Ajax实践

    1.ajax 是什么?有什么作用? AJAX(Asynchronous JavaScript and XML)是一...

  • ajax实践

    题目1: ajax 是什么?有什么作用? AJAX = Asynchronous JavaScript And X...

  • ajax实践

    题目1: ajax 是什么?有什么作用? AJAX的全称是Asynchronous JavaScript and ...

  • ajax实践

    http://www.w3school.com.cn/ajax/index.asp状态码 题目1: ajax 是什...

  • ajax实践

    题目1: ajax 是什么?有什么作用? ajax即“Asynchronous JavaScript and XM...

网友评论

      本文标题:ajax实践

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