ajax实践

1、 ajax 是什么？有什么作用？

ajax即asynchronous javascript and xml(异步javascript和xml)
作用：

  • 实现网页的异步加载，局部刷新网页
  • 向服务器获取新数据时不需要刷新整个网页，提高用户体验

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

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

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

如何mock数据：

  • 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
  • 可以用xampp进行模拟
  • 也可使用server-mock

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

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

    var xhr. = new XMLHttpRequest()
    xhr.onreadystatechange = function(opts){
      if (xhr.readyState === 4 && xhr.status ===200) {
        var data = JSON.parse(xhr.responseText)
        opts.success(data)
      }else if (xhr.readyState === 4) {
        opts.error()
      }
      lock = true
    }
    xhr.open()
    xhr.send()
    lock = false

  })

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('出错了')
        }
    })
});

代码

  <input class="username" type="text" name="username" placeholder="请输入用户名">
  <input class="password" type="password" name="password" placeholder="请输入密码">
  <input class="btn" type="submit" name="submit" value="提交">
  <ul class="ct"></ul>

  <script type="text/javascript">
    function ajax(opts) {
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 && xhr.status === 200) {
          var results = JSON.parse(xhr.responseText)
          opts.success(results)
        } else if (xhr.readyState === 4 && xhr.status ===404) {
          opts.error()
        }
      }

      var dataStr = ''
      for (var key in opts.data) {
        dataStr += key + '=' + opts.data[key] + '&'
      }
      dataStr = dataStr.substr(0,dataStr.length-1)
/*
      var dataArr = []
      for (var key in opts.data) {
        dataArr.push(key + '=' + opts.data[key])
      }
      dataStr = dataArr.join('&') 
*/
      var urlStr = ''
      if (opts.type === 'get') {
        urlStr += opts.url + '?' + dataStr
        xhr.open(opts.type,urlStr,true)
        xhr.send(null) 
      }else if (opts.type === 'post') {
        xhr.open(opts.type,opts.url,true)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(dataStr)
      }
    }

    var username = document.querySelector('.username')
    var password = document.querySelector('.password')
    var ct = document.querySelector('.ct')
    var btn = document.querySelector('.btn')
    btn.addEventListener('click', function(){
      ajax({
        url: '/login',   //接口地址
        type: 'post',               // 类型， post 或者 get,
        data: {
          username: username.value,
          password: password.value
        },
        restype: 'json',
        success: function(ret){   
          ct.innerText = ret
          console.log(ret);       // {status: 0}
        },
        error: function(){
          console.log('出错了')
        }
      })
    });
  </script>

mock.js

app.get('/login', function(req, res) {
  var username = req.query.username
  var password = req.query.password
  console.log('有请求来了');
  console.log(username,password);
    if (username === 'xiaoming' && password === 'abcd1234') {
      var friends = ['xiaoming','abcd1234'] 
    res.send(friends);
    }else{
    var friends = ['请重新输入']
        res.send(friends);
    }
});
app.post('/login', function(req, res) {
  var username = req.body.username
  var password = req.body.password
  console.log('有请求来了');
    console.log(username,password);
    if (username === 'xiaoming' && password === 'abcd1234') {
      var friends = ['xiaoming','abcd1234'] 
      res.send(friends);
    }else{
      var friends = ['请重新输入']
      res.send(friends);
    }
});

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>加载更多</title>
  <style type="text/css">

    ul,li {
      list-style: none;
      padding: 0;
    }
    li {
     display: block;
     margin: 10px auto;
     border: 1px solid #ccc;
     padding: 5px;
     /*
     width: 600px;
     height: 30px;
     box-sizing: border-box;
     */
    }
    .ct li:hover {
      background-color: green;
      cursor: pointer;
    }
    .btn {
      cursor: pointer;
      width: 100px;
      height: 40px;
      border-radius: 3px;
      font-size: 16px;
      margin: 20px auto;
      display: block;
      outline: none;
    }
    .btn:hover {
      background-color: pink;
      color: green;
    }
  </style>
</head>
<body>
  <ul class="ct"></ul>
  <button class="btn">加载更多</button>

  <script type="text/javascript">
    var ct = $('.ct')
    var btn = $('.btn')
    var lock = true
    var index = 0

    btn.addEventListener('click', function(){
      if (!lock) {
        return
      }
      ajax({
        url: '/loadMore',   //接口地址
        type: 'post',               // 类型， post 或者 get,
        data: {
          index: index,
          length: 5
        },
        restype: 'json',
        success: function(ret){
          var fragment = document.createDocumentFragment()
          for (var i = 0; i < ret.length; i++) {
                var li = document.createElement('li')
                li.innerText = ret[i]
                fragment.appendChild(li)
             }   
          ct.appendChild(fragment)
          index += 5       // {status: 0}
        },
        error: function(){
          console.log('出错了')
        }
        
      })

    });    

    function ajax(opts){
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data
          if (opts.restype.toLowerCase() === 'text') {
            data = xhr.responseText
          } else if (opts.restype.toLowerCase() === 'json') {
            data = JSON.parse(xhr.responseText)
          } else if (opts.restype.toLowerCase() === 'xml') {
            data = xhr.responseXML
          }
          opts.success(data)
        }else if(xhr.readyState === 4){
          opts.error(); 
        }
        lock = true
      }

      var dataStr = ''
      for (var key in opts.data) {
        dataStr += key + '=' + opts.data[key] + '&'
      }
      dataStr = dataStr.substr(0,dataStr.length-1)
/*
      var dataArr = []
      for (var key in opts.data) {
        dataArr.push(key + '=' + opts.data[key])
      }
      dataStr = dataArr.join('&') 
*/
      var urlStr = ''
      if (opts.type === 'get') {
        urlStr += opts.url + '?' + dataStr
        xhr.open(opts.type,urlStr,true)
        xhr.send(null) 
      }else if (opts.type === 'post') {
        xhr.open(opts.type,opts.url,true)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(dataStr)
      }
      lock = false
    }

    function $(cls){
      return document.querySelector(cls)
    }
  </script>
</body>
</html>

mock数据

app.get('/loadMore',function(req,res) {
  var index = req.query.index
  var length = req.query.length
  var data = []
  for (var i = 0; i < length; i++) {
    data.push('内容' + (parseInt(index) + i+1))
  }
  setTimeout(send,1000)
  function send(){
    res.send(data)
  }
    // body...
})

app.post('/loadMore',function(req,res) {
  var index = req.body.index
  var length = req.body.length
  var data = []
  for (var i = 0; i < length; i++) {
    data.push('内容' + (parseInt(index) + i+1))
  }
  setTimeout(send,1000)
  function send(){
    res.send(data)
  }
  
    // body...
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 198,932评论 5赞 466
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,554评论 2赞 375
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 145,894评论 0赞 328
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,442评论 1赞 268
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,347评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 47,899评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,325评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,980评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,196评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,163评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,085评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,826评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,389评论 3赞 302
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,501评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,753评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,171评论 2赞 344
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,616评论 2赞 339

推荐阅读更多精彩内容

  • ajax实践
    ajax 是什么？有什么作用？ AJAX的全称是Asynchronous JavaScript and XML（异...
    cross_王阅读 327评论 0赞 0
  • js__Ajax__实践
    1： ajax 是什么？有什么作用？ Ajax是Asynchronous JavaScript and XML的缩...
    好奇而已阅读 322评论 0赞 0
  • ajax实践
    1. ajax 是什么？有什么作用？ AJAX即Asynchronous Javascript And XML（异...
    _李祺阅读 271评论 0赞 0
  • AJAX实践
    1.ajax 是什么？有什么作用？ Asynchronous JavaScript and XML（异步的 Jav...
    clark124阅读 232评论 0赞 0
  • ajax实践
    1. ajax 是什么？有什么作用？ Ajax(Asynchronous JavaScript + XML)是一种...
    madpluto阅读 170评论 0赞 0