美文网首页
ajax实践

ajax实践

作者: 高进哥哥 | 来源:发表于2017-03-31 10:37 被阅读0次

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

ajax(synchronous JavaScript and XML),是异步的js和xml通过与后台服务器进行少量的数据交换,从而实现页面不重新加载的情况下,对某部分进行更新

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

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

  • 约定数据:有哪些需要传输的数据,数据类型是什么;
  • 约定接口:确定接口名称及请求和响应的格式,请求的参数名称、响应的数据格式;
  • 根据这些约定整理成接口文档
    如何mock数据:
  • 可以根据接口文档,使用假数据来验证我们制作的页面响应和接口是否正常。
  • 可以用xampp进行模拟
  • 也可使用server-mock

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

设置状态锁

  var lock=true;
    document.querySelector('#btn').addEventListener('click', function(){
    if(!lock){
      return;
    }
    ajax({
         .......
          lock=true;
     })
    lock=false;

利用ajax异步原理,当数据未到来时对状态封锁,屏蔽用户的点击

4:封装一个 ajax 函数,能通过如下方式调用。后端在本地使用server-mock来 mock 数据

function ajax(opts){
    // todo ...
}
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('出错了')
        }
    })
});
});
    function ajax(opts){
      opts.type=opts.type||"get";
      opts.datatype=opts.datatype||"json";
      opts.data=opts.data||{};
      opts.success=opts.success||function(){};
      opts.errot=opts.errot||function(){};
      var xml=new XMLHttpRequest();
      xml.onreadystatechange=function(){
        if(xml.readyState===4){
          if(xml.status===200||xml.status===304){
              if(opts.dataType==="text"){
                opts.success(xml.responseText);
              }
              if(opts.dataType==="json"){
                var json=JSON.parse(xml.responseText);
                opts.success(json);
              }
          }else{
            opts.error();
          }
        }
      }
      var dataStr="";
      for(var key in opts.data){
        dataStr+=key+"="+opts.data[key]+"&";
      }
      dataStr=dataStr.substr(0,dataStr.length-1);
      if(opts.type.toLowerCase()==="post"){
        xml.open(opts.type,opts.url,true);
        xml.setRequestHeader("content-type","application/x-www-from-uclencoded");
        xml.send(dataStr);
      }
      if(opts.type.toLowerCase()==="get"){
        xml.open(opts.type,opts.url+"?"+dataStr,true);
        xml.send();
      }
    }

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

<body>
  <ul class="ct"></ul>
  <input type="button" class="btn" value="加载更多">
  <script>
    var lock=true;
    var pageIndex=0;
    $('.btn').addEventListener('click', function(){
      if(!lock){
        return
      }
      loadData(function(news){
      getMore(news)
      pageIndex+=5;
      lock=true;
     })
     lock=false;
    })


  function loadData(callback){
    ajax({
        url: '/list',   //接口地址
        type: 'get',               // 类型, post 或者 get,
        data: {
          index: pageIndex,
          length: 5
        },
        dataType: "json",
        success: callback,
        error: function(){
           console.log('出错了')
        }
    })
  }
 
    function getMore(news){
      var box=$(".ct");
      var fragment=document.createDocumentFragment();
      for(var i=0;i<news.length;i++){
        var node=document.createElement("li");
        node.innerText=news[i];
        fragment.appendChild(node);
      }
      box.appendChild(fragment);
    }



    function ajax(opts){
      opts.type=opts.type||"get";
      opts.datatype=opts.datatype||"json";
      opts.data=opts.data||{};
      opts.success=opts.success||function(){};
      opts.errot=opts.errot||function(){};
      var xml=new XMLHttpRequest();
      xml.onreadystatechange=function(){
        if(xml.readyState===4){
          if(xml.status===200||xml.status===304){
              if(opts.dataType==="text"){
                opts.success(xml.responseText);
              }
              if(opts.dataType==="json"){
                var json=JSON.parse(xml.responseText);
                opts.success(json);
              }
          }else{
            opts.error();
          }
        }
      }
      var dataStr="";
      for(var key in opts.data){
        dataStr+=key+"="+opts.data[key]+"&";
      }
      dataStr=dataStr.substr(0,dataStr.length-1);
      if(opts.type.toLowerCase()==="post"){
        xml.open(opts.type,opts.url,true);
        xml.setRequestHeader("content-type","application/x-www-from-uclencoded");
        xml.send(dataStr);
      }
      if(opts.type.toLowerCase()==="get"){
        xml.open(opts.type,opts.url+"?"+dataStr,true);
        xml.send();
      }
    }


    function $(id){
      return document.querySelector(id);
    }
    function $$(cls) {
      return document.querySelectorAll(cls);
    }
    
  </script>

</body>

后台模拟数据

app.get('/list', function(req, res) {
    var index = req.query.index; // 通过 req.query获取请求参数
    var length= req.query.length;
    var arr=[];
  for(var i=0;i<length;i++){
        arr.push("新闻"+(parseInt(index)+i));
    }
        res.send(arr);
});

相关文章

  • 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/fdrmottx.html