Ajax

Ajax 是什么?有什么作用?##

Ajax(Asynchronous JavaScript and XML),异步JavaScript和XML。可以实现在不刷新页面的前提下与后端交互数据并更新页面。

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

前后端开发联调需要注意:1请求类型(get/post);2请求参数(key/value);3发送的数据格式;4响应的数据格式
mock 数据可以通过在本地模拟后端服务器,并且建立符合约定规范的数据.

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

    var isLocked=false;
      document.querySelector("#id").addEventListener("click",function(){
          if(isLocked===true){  //使用状态所状态判断
              return;
          }
          isLocked=true;  //ajax之前先上锁
          var xhr = new XMLHttpRequest();
          xhr.open('get', '/xxxx?key=value', true);
          xhr.send();
          xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
              isLocked=false;//请求完成解锁
              if(xhr.status === 200){
                console.log('hello')
              }
            }
          }
        })

封装一个 ajax 函数,能通过如下方式调用##

        function ajax(opts) {
            var url = opts.url,
                type = opts.type,
                dataType = opts.dataType,
                success = opts.success,
                error = opts.error,
                dataStr = "";
            for (var key in opts.data) {
                dataStr += key + '=' + opts.data[key] + '&';
            }
            var xhr = new XMLHttpRequest();
            if (type.toLowerCase() === 'post') {
                xhr.open(type, url, true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(dataStr);
            }
            if (type.toLowerCase() === 'get') {
                xhr.open(type, url + '?' + dataStr, true);
                xhr.send();
            }
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        if (dataType.toLowerCase() === 'text') {
                            success(xhr.responseText);
                        }
                        if (dataType.toLowerCase() === 'json') {
                            var json = JSON.parse(xhr.responseText);
                            success(json);
                        }
                    } else {
                        error();
                    }
                }
            }
        };

        document.querySelector('#btn').addEventListener('click', function() {
            ajax({
                url: 'http://a.test.com:8080/user', //接口地址
                type: 'get', // 类型, post 或者 get,
                data: {
                    username: 'xiaoming',
                    password: 'abcd1234'
                },
                dataType: 'text',
                success: function(ret) {
                    console.log(ret); // {status: 0}
                },
                error: function() {
                    console.log('出错了')
                }
            })
        });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浏览器与服务器之间,采用HTTP协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏...
    徐国军_plus阅读 372评论 0 4
  • 关键词:Ajax 1. Ajax 是什么?有什么作用? Ajax 全称“Asynchronous Javascri...
    NathanYangcn阅读 323评论 0 0
  • ajax 是什么?有什么作用? AJAX的全称是Asynchronous JavaScript and XML(异...
    cross_王阅读 339评论 0 0
  • 问答 1. ajax 是什么?有什么作用? Ajax是Asynchronous JavaScript and XM...
    Maggie_77阅读 405评论 0 0
  • 1、 ajax 是什么?有什么作用? 含义:AJAX = Asynchronous JavaScript and ...
    zh_yang阅读 320评论 0 0