Ajax基础知识
什么是Ajax?
- Asynchronous JavaScript + XML,异步的js和XML
什么是XML?
- 可扩展的标记语言
XML的作用?
- 用来存储数据的(用自己的扩展的标签来标记数据结构)
Ajax之所以称为异步的js和XML,主要原因是:当初最开始用Ajax实现客户端和服务器端数据通信的时候,传输的数据格式一般都是XMl格式的数据,所以我们把它称为异步的js和XML(现在一般都是基于JSON格式来进行数据传输的)
复制代码 张三 25 90 98 李四 20 78 90
异步的js
- 这里的异步不是说Ajax只能基于异步进行请求(虽然建议都是使用异步编程),这里的异步特指的是"局部刷新"
局部刷新vs全局刷新
- 前后端不完全分离:在前后端不完全分离项目中,前端开发只需要完成页面的制作,并把一些基础的人机交互效果使用js完成即可,页面需要动态呈现内容的部分,都是交给后台开发工程师做数据绑定和基于服务器进行渲染的(服务器端进行渲染的)
全局刷新的好处?
- 动态展示的数据在页面的原代码中可以看见,数据在服务器都渲染好了,页面的源代码都可以看到了,有利于SEO优化推广(有利于搜索引擎的收录和抓取)
- 从服务器端获取的结果就已经是最后呈现的结果了,不需要客户端做额外的事情,所以页面加载速度快(前提是服务器端处理的速度够快,能够处理过来),所以类似于京东、淘宝这些网站,首屏数据一般都是经由服务器端进行渲染的
全局刷新的缺点?
- 如果页面中存在需要实时更新的数据,每一次想要展示最新的数据,页面都需要重新刷新一次,这样肯定不行
- 都交给服务器端做数据渲染,服务器端的压力太大,如果服务器处理不过来,页面呈现的速度更慢(所以京东、淘宝这些网站,除了首屏是服务器端渲染的,其它屏都是做客户端做数据渲染绑定的)
- 这种模式不利于开发(开发效率低)
- 前后端分离:前后端完全分离的项目,页面中需要动态绑定的数据是交给客户端完成渲染的
局部刷新的步骤？
- 向服务器端发送Ajax请求
- 把从服务器端获取的数据解析处理,拼接成为我们需要展示的HTML字符串
- 把拼接好的字符串替换页面中某一部分的内容(局部刷新),页面整体不需要加载,局部渲染即可
局部刷新的优势?
- 我们可以根据需求任意修改页面中某一部分的内容(例如实时刷新),整体页面不刷新,性能好,体验好(所有表单验证、需要实时刷新等的需求都要基于Ajax实现)
- 有利于开发,提高开发的效率
- 前后端完全分离的项目,后台不需要考虑前端如何实现,前端也不需要要考虑后天用什么技术,真正意义上实现了技术的划分,
- 可以同时进行开发:项目开发开始,首先制定前后端数据交互的接口文档(文档中包含了,调取哪个接口或者哪些数据等协议规范),后台把接口先写好(目前很多公司也需要前端自己拿NODE来模拟这些接口),客户端按照接口调取即可,后台再次去实现接口功能即可
局部刷新的缺点?
- 不利于SEO优化:第一次从服务器获取的内容不包含需要动态绑定的数据,所以页面的源代码中没有这些内容,不利于SEO收录,后期通过js添加到页面中的内容s,并不会在页面的源代码中(是源代码不是页面结构)
- 交由客户端渲染,首先需要把页面呈现,然后再通过js的异步Ajax获取数据,然后数据绑定,浏览器把动态添加的部分重新渲染,无形中浪费了一些时间,没有服务器端渲染页面呈现速度快,