ajax实战

ajax实战

ajax 是什么?有什么作用?
  • ajax 是什么
    AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
    ajax不是新的编程语言,而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。  
    ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。  
    ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。

  • 作用
    ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页面。  
    ajax的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。  
    ajax前景非常乐观,可以提高系统性能,优化用户界面。AJAX现有直接框架AjaxPro,可以引入AjaxPro.2.dll文件,可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组建,需要添加AjaxControlToolkit.dll文件,可以在控件列表中出现相关控件。

  • 优点和缺点
    优点:

    1. 最大的一点是页面无刷新,用户的体验非常好。
    2. 使用异步方式与服务器通信,具有更加迅速的响应能力。。
    3. 可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
    4. 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
    5. ajax可使因特网应用程序更小、更快,更友好。

    缺点:

    1. ajax不支持浏览器back按钮。
    2. 安全问题 AJAX暴露了与服务器交互的细节。
    3. 对搜索引擎的支持比较弱。
    4. 破坏了程序的异常机制。
    5. 不容易调试。
前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据
  • 前后端开发联调需要注意
    1. 约定好请求方法
    2. 约定接口实现使用哪种方式:get/post
    3. 约定request参数的name,类型(格式)
    4. 约定response的类型(格式)格式: 字符串/数组/对象...
  • 如何 mock 数据
    1. mock数据指的是在后端开发没有完成时,前端可以通过mock方法搭建本地服务器,模拟后台数据来实现数据交互的效果
    2. 可安装xampp在本地搭建(php等)服务器,也可以安装server-mock,这样不需要特地去写一个后台的处理页面文件来访问数据
点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
  • 令用户的点击变得无效,请求未处理完成之前,拒绝再次请求,而请求到了并处理完之后,恢复到可请求状态。
var pageIndex = 0
  //请求未处理完成之前防止重复点击
  var isDataArrive = true
  btn.addEventListener("click",function(e){
    e.preventDefault()
    if(!isDataArrive){
      return;
    }
实现加载更多的功能,效果范例426,后端在本地使用server-mock来模拟数据

index代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>加载更多</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
     #ct li{
      list-style:none;
      border: 1px solid #ccc;
      padding: 10px;
      margin-top: 10px;
      cursor:pointer;
    
    }
    #ct li:hover{
        background-color: green;
    }
    #load-more{
      display: block;
      margin: 10px auto;
      text-align: center;
      cursor: pointer;
    }
    /*#load-more img{
      width: 40px;
      height: 40px;
    }*/
    .btn{
      display: inline-block;
      height: 40px;
      line-height: 40px;
      width: 80px;
      border: 1px solid #da6969;
      border-radius: 3px;
      text-align: center;
      text-decoration: none;
      color: #E27272;
    }
    .btn:hover{
      background: #3aca46;
      color: #fff;
    }
  </style>
</head>
<body>
  <ul id ="ct">
  </ul>
  <!-- <a href="javascript:void(0)"></a> undefined不跳转-->
  <a href="#" id="load-more" class= "btn">加载更多</a>
</body>

<script>
  //获取a链接
  var btn = document.querySelector("#load-more")
  var ct = document.querySelector("#ct")
  var pageIndex = 0
  //网速特别慢的时候,在数据到来之前防止重复点击?
  var isDataArrive = true
  btn.addEventListener("click",function(e){
    e.preventDefault()
    if(!isDataArrive){
      return;
    }
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function(){
      if (xhr.readyState === 4) {
        if (xhr.status === 200 || xhr.status === 304) {
          var result = JSON.parse(xhr.responseText)
          var fragment = document.createDocumentFragment()
          for (var i = 0; i < result.length; i++) {
            var node = document.createElement("li")
            node.innerText = result[i]
            fragment.appendChild(node)
          }
          //插入li
          ct.appendChild(fragment)
          //数字每次变化5
          pageIndex += 5
        }else{
          alert("出错啦")
        }
        isDataArrive = true
      }
    } 
    xhr.open("get","/loadMore?index="+pageIndex+"&length=5",true)
    xhr.send()
    isDataArrive = false
  })
</script>
</html>

模拟后端代码

//服务端  router.js

app.get('/loadMore', function(req, res) {

  var curIdx = req.query.index
  var len = req.query.length
  var data = []
  for(var i = 0; i < len; i++) {
    data.push('新闻' + (parseInt(curIdx) + i))
  }
  res.send(data);
});

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 121,733评论 17 134
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 158,294评论 24 688
  • 1. ajax 是什么?有什么作用? AJAX即“Asynchronous JavaScript and XML”...
    饥人谷_Jack阅读 140评论 0 0
  • 穿过雨,跨过阴霾的压抑。又迎来雨的洗礼, 越来接近的足迹。列车的飞驰,窗外雨如泪滴挂落,划过一道道痕迹在玻璃上。一...
    海陌宸阅读 72评论 1 0
  • 教学楼里的似乎要带来关于你的消息的电扇,呼啦呼啦的旋着,突如其来的尘埃,让谁迷了眼? 伴着黄昏,相识了大半年的大尧...
    别清欢阅读 91评论 0 1