ajax的实践

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

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。
ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
而传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页面。

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

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

前后端联调是一种真实业务数据和本地mock数据之间来回切换以达到前后端分离架构下的不同开发速度时数据交换的一种方式方法

约定事项(前后端达成一致):

1.接口的类型 get、post
2.接口的名称一致

  1. 传递参数是什么
    如 {index:3 , length: 5} http://hdhhj.com?index=3&length=5
  2. 所有交互数据的是什么格式存放数据 如 json格式字符串

mock数据

当后端接口没有完成前,前端需要模仿后台数据,以测试处理前端的请求。

使用nodejs搭建一个web服务器,返回我们想要的数据
安装server-mock,在当前的文件夹下创建 router.js,接受处理请求数据

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

问题:当用户网速慢,数据响应缓慢, 用户很可能会多次重复点击,希望得到数据。而加载过来的数据很多,而且重复。
重复点击 请求多次ajax,而且一直请求一块区域的内容。
解决思路: 阻止用户的重复点击,第一次点击时请求的数据该没到之前,其他的点击操作无效,被忽略
设计一个状态锁,实时监看响应数据的情况,默认为有已经有响应。
当点击按钮时,判断请求是不是响应了,没有响应,则不会做任何操作;

var isDataArrive=true;//状态锁  默认现在是有响应数据
 var btn=document.querySelector('#btn')
 var pageIndex=3;

 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 results = JSON.parse(xhr.responseText)
                 console.log(results)
                 var fragment = document.createDocumentFragment()
                 for(var i = 0; i < results.length; i++){
                     var node = document.createElement('li')
                     node.innerText = results[i]
                     fragment.appendChild(node)
                 }
                 content.appendChild(fragment)
                 pageIndex = pageIndex + 5
             }else{
                 console.log('出错了')
             }
             isDataArrive = true   //当前表示是响应数据状态
         }
     }
     xhr.open('get', '/loadMore?index='+pageIndex+'&length=5', true)
     xhr.send()
     isDataArrive = false  //做完数据处理,响应数据后,恢复到没有响应数据状态
 })

题目4:实现加载更多的功能,效果范例374,后端在本地使用server-mock来模拟数据

githu代码

Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,282评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,249评论 25 709
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 8,733评论 0 7
  • 出差去过很多地方,突然有一天,心想要在每个地方记下脚印。
    带头大哥的哥阅读 1,868评论 0 1
  • 1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 HTML将元素分类方式分为行内元素、块状元素和...
    yuhuan121阅读 2,256评论 0 0

友情链接更多精彩内容