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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

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