AJAX基础知识
什么是AJAX?
async javascript and xml, 异步的JS和XML
XML:可扩展的标记语言
是用来存储数据的(可通过自己标记的名称清晰地展示出数据结构)
之所以称为异步的JS和XML,是因为最开始用ajax实现客户端和服务器端数据通信的时候,传输的数据格式一般都是XML格式的数据。(现在一般都基于JSON格式)
异步的JS
这里的的异步特指“局部刷新”,但同时ajax也是建议使用异步编程的。
局部刷新 VS 全局刷新
全局刷新
在非完全前后端分离项目中,前端开发只需要完成页面的制作,并把一些基础的人机交互效果使用js完成即可,页面中需要动态呈现的部分,都是交由后台开发工程师来完成的。
[优势]
1、动态展示的数据载页面的原代码中可以看见,有利于SEO优化推广(有利于搜索引擎的收录和抓取)
2、从服务器端获取的结果就已经是最后要呈现的结果,不需要客户端做额外工作,页面加载速度快(前提是服务器端处理速度快),类似淘宝,百度首屏数据都是服务器端渲染的
[弊端]
1、若页面中存在需要实时更新的数据,每次展示最新数据页面都要重新刷新一次。
2、都交给服务器端做渲染,服务器端压力太大,若服务器处理不过来,页面呈现速度会更慢
3、不利于开发(开发效率低)
前后端完全分离的项目中,页面中需要动态绑定的数据是交给客户端渲染的
1)向服务器中发送ajax请求
2)把从服务器端获取的数据解析处理,拼接成需要展示的HTML代码
3)把拼接好的字符串替换页面中某一部分的内容(局部刷新),页面整体不需要重新加载,局部渲染即可
[优势]
1)可以根据需求,任意修改页面中某一部分的内容(如实时刷新),整体页面不刷新,性能好,体验好(所有表单验证、需要实时刷新的需求都要基于ajax实现)
2)有利于开发,提高开发效率
a. 前后端的完全分离,后台前端都不需要考虑对方是如何实现的,使用什么技术,真正意义上实现了技术的划分
b. 可以同时进行开发:项目开发开始,首先定制前后端数据交互的接口文档(包含调取哪个接口或者哪些数据等协议规范),后台把接口先写好,了护短按照接口调取即可,后台再次去实现接口功能
[弊端]
1)不利于SEO优化:第一次从服务器端获取的内容不包含需要动态绑定的数据,后期通过JS添加到页面的内容,不会写在页面的源代码中,所以页面的源代码中没有这些内容,不利于SEO收录
2)交由客户端渲染,首先需要把页面呈现,然后再通过JS的异步ajax请求获取数据,数据绑定,浏览器再把动态增加的部分重新渲染,浪费了一些时间,没有服务器端渲染页面呈现速度快