ajax

作者: 疯小儿 | 来源:发表于2017-10-12 16:15 被阅读0次

    一、ajax是什么?有什么作用?

    • Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
    • Ajax技术的核心是XMLHttpRequest对象(简称XHR)。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口,能够以异步方式从服务器取得更多信息,意味着用户单击后,可以不必刷新页面也能够取得新数据。也就是说,可以使用XHR对象取得新数据,然后通过DOM将新数据插入到页面中。
    • 作用:传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    二、前后端开发联调需要注意哪些事情?后端接口完成前如何mock数据?(npm install -g server-mock)

    • 前后端开发联调:真实业务数据和本地mock数据之间来回切换以达到前后端分离架构下不同开放速度时数据交换的一种方式方法。
    • 前后端开发联调注意事项
      1.应各自理解清楚自己的业务以及工作量,联调的工作量,评估好时间。
      2.约定双方需要传输的数据和接口,在接口文档中确定好参数的名称、格式等。
      3.约定好开发过程中修改部分得沟通方式。
      4.约定发送请求的参数、格式和内容。
    • 前端开发过程中,使用 mock 数据来模拟接口的返回,对开发的代码进行业务逻辑测试。解决开发过程中对后台接口的依赖。
      *mock数据的方式:
      • 使用server-mock或mock.js搭建模拟服务器,进行模拟测试。(优点:不需要熟练掌握后台PHP语音)。步骤:
        1.安装node.js,呼出cmd命令
        2.选取一个文件夹,使用npm install -g server -mock进行全局安装
        3.输入mock start可以启动一个web服务器,他们的根目录就是你选取的文件夹,启动完成之后,web服务器就可以展示了
        4.浏览器输入localhost:8080 就是你选取的文件夹
        5.使用mock init会自动的在文件夹下生成3个文件
        6.当html使用url对接口进行请求,会被router.js里相同接口接受。
      • 使用XAMPP,编写PHP文件进行测试。
      • postman+json-server,操作方法取材于阮一峰老师的教程阮一峰全栈教程RESTAPI

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

    • 方法一:
      disabled+setTimeout 0,使数据到来之前按钮不能被点击。例子如下:
    var btn = getElementById('btn')
    btn.addEventListener('click',function(){
        this.disabled = true;
        ajax();
        setTimeout(this.disabled = false,0);
    });
    
    • 方法二:
      设置标记变量flag,初始状态设置为true,在用户点击按钮后,判断flag是否为true,如果是则发送ajax请求,并把flag设置为false。等服务端给出响应后再把flag设置为true。例子如下:
    var flag = true;
    var btn = getElementById('btn')
    btn.addEventListener('click',function(){
        if(!flag){
            return;
        }
        flag = false;
        ajax({
            ...
            complete:function(){
                flag = true;
            }
        });
    })
    

    ajax参考文档

    相关文章

      网友评论

          本文标题:ajax

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