JS(九)AJAX

题目1: ajax 是什么?有什么作用?

AJAX即Asynchronous JavaScript and XML,异步的 JavaScript 和 XML 通过在后台与服务器进行少量数据交换。
AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

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

注意事项:

  • 约定数据:有哪些需要传输的数据,数据类型是什么;
  • 约定接口:确定接口名称及请求和响应的格式,请求的参数名称、响应的数据格式。

mock数据:

  • 可以使用服务器框架搭建一个模拟服务器环境,比如使用express&nodejs或者使用xampp,更简单的办法是使用server-mock。在数据的模拟传输与请求查看上,postman也是一个好工具。
题目3:点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?

使用状态锁来防止重复点击。

//设置状态锁初始状态
var ajaxIsLock = false;
function ajax(){
  //检查状态锁
  if(ajaxIsLock){
    return;
  } 
  ajaxIsLock = true; //上锁
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200 || xhr.status === 304){
          ajaxIsLock = false //解锁
    }
  }
}
题目4:封装一个 ajax 函数,能通过如下方式调用。后端在本地使用server-mock来 mock 数据
    function ajax(opts){
      opts.type = opts.type || 'GET';
      opts.success = opts.success || function(){};
      opts.error = opts.error || function(){};
      opts.dataType = opts.dataType || 'json';
      opts.data = opts.data || {};

      var dataStr = '';
      for(var key in opts.data){
        dataStr += key + "=" + opts.data[key] + "&"; 
      }
      dataStr = dataStr.substr(0, dataStr.length-1);
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status === 200 || xhr.status === 304) {
            if (opts.dataType === 'text') {
              opts.success(xhr.responseText);
            } else if (opts.dataType === 'json') {
              var json = JSON.parse(xhr.responseText);
              opts.success(json);
            }
          } else {
            opts.error();
          }
        }
      }
      if (opts.type.toLowerCase() === "get") {
        xhr.open("get", opts.url + "?" + dataStr, true);
        xhr.send();
      } else if (opts.type.toLowerCase() === "post") {
        xhr.open("post", opts.url, true);
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send(dataStr);
      }
    }
    document.querySelector('#btn').addEventListener('click', function(){
      ajax({
          url: '/login',   //接口地址
          type: 'get',               // 类型, post 或者 get,
          data: {
            username: 'xiaoming',
            password: 'abcd1234'
          },
          dataType: 'text',
          success: function(ret){
              alert(ret);       // {status: 0}
            },
          error: function(){
             console.log('出错了')
           }
         })
    });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,641评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,009评论 19 139
  • 刚刚到手的新车上充满了胶水味、皮革味、塑料味、烟味、汗味让车主很头痛,好像怎么除都除不尽,开着真的很不舒服。没关系...
    黄江水车佬阿坚阅读 392评论 0 0
  • 图片发自简书App 缘聚你我共连枝 不疑不猜通灵犀 念母思女心挂怀 轮渡携手未来梦
    画欣阅读 423评论 0 1
  • 在沉默里写你的名字 将深情也一并奉上,于是 懦夫的谎言传遍村庄 无数猎人的枪响 惊起无数的马 猎人在冬天走出林子 ...
    中习习阅读 242评论 8 7