美文网首页
进阶任务12(主线任务):ajax实践

进阶任务12(主线任务):ajax实践

作者: mhy_web | 来源:发表于2017-07-28 17:34 被阅读0次
    题目1: ajax 是什么?有什么作用?

    ajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
    所以我用一句话来总结两者的关系:我们使用XMLHttpRequest对象来发送一个Ajax请求。
    作用:实现网页的异步加载,局部刷新网页。当在向服务器获取新数据时不需要刷新整个网页,提高用户体验。

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

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

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

    如何mock数据:

    • 可以根据接口文档,使用假数据来验证我们制作的页面响应和接口是否正常。
    • 可以用xampp进行模拟
    • 也可使用server-mock
    题目3:点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?

    设置一个状态变量来防止重复发送请求

    var isDataArrival = true; 
    btn.addEventListener('click',function (e) { 
          if (!isDataArrival){ 
                return; 
          } 
          if(xhr.readyState === 4){ 
               isDataArrival=true; 
           } 
          xhr.open('get',url); 
          xhr.send(); 
          isDataArrival = false; 
    });
    
    题目4:实现加载更多的功能,效果范例345,后端在本地使用server-mock来模拟数据
    function ajax(opts) { 
              var xmlhttp = new XMLHttpRequest(); 
              xmlhttp.onreadystatechange = function() { 
                 if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
                      var result = JSON.parse(xmlhttp.responseText) opts.success(result);
                 } 
                 if(xmlhttp.readyState == 4 && xmlhttp.status == 404) { 
                    opts.error(); 
                  } 
              }; 
              var dataString = ''; for(var key in opts.data) { 
                  dataString += key + '=' + opts.data[key] + '&';
               } 
              dataString = dataString.substring(0, dataString.length - 1);                  
              if(opts.type.toLowerCase() === 'get') { 
                   xmlhttp.open('get', opts.url + '?' + dataString, true); xmlhttp.send(); 
              } 
              if(opts.type.toLowerCase() === 'post') { 
                  xmlhttp.open('post', opts.url, true); 
                  xmlhttp.setRequestHeader("Content-type", "application/x-www-form- urlencoded"); 
                  xmlhttp.send(dataString); 
               }
     } 
     document.querySelector('#btn').addEventListener('click', function() { 
        ajax({ 
                  url: '/login', //接口地址 
                  type: 'get', // 类型, post 或者 get, 
                 data: { 
                      username: 'xiaoming', password: 'abcd1234' 
                 }, 
                success: function(ret) { 
                    console.log(ret); // {status: 0} }, 
               error: function() { 
                    console.log('出错了') 
              } 
        }) 
    });
    

    相关文章

      网友评论

          本文标题:进阶任务12(主线任务):ajax实践

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