AJAX基础及原理

AJAX基础知识

什么是AJAX？
async javascript and xml， 异步的JS和XML

XML：可扩展的标记语言

是用来存储数据的（可通过自己标记的名称清晰地展示出数据结构）
之所以称为异步的JS和XML，是因为最开始用ajax实现客户端和服务器端数据通信的时候，传输的数据格式一般都是XML格式的数据。（现在一般都基于JSON格式）

异步的JS

这里的的异步特指“局部刷新”，但同时ajax也是建议使用异步编程的。
局部刷新 VS 全局刷新
全局刷新
在非完全前后端分离项目中，前端开发只需要完成页面的制作，并把一些基础的人机交互效果使用js完成即可，页面中需要动态呈现的部分，都是交由后台开发工程师来完成的。
[优势]
1、动态展示的数据载页面的原代码中可以看见，有利于SEO优化推广（有利于搜索引擎的收录和抓取）
2、从服务器端获取的结果就已经是最后要呈现的结果，不需要客户端做额外工作，页面加载速度快（前提是服务器端处理速度快），类似淘宝，百度首屏数据都是服务器端渲染的
[弊端]
1、若页面中存在需要实时更新的数据，每次展示最新数据页面都要重新刷新一次。
2、都交给服务器端做渲染，服务器端压力太大，若服务器处理不过来，页面呈现速度会更慢
3、不利于开发（开发效率低）

非完全前后端分离.png

前后端完全分离的项目中，页面中需要动态绑定的数据是交给客户端渲染的
1）向服务器中发送ajax请求
2）把从服务器端获取的数据解析处理，拼接成需要展示的HTML代码
3）把拼接好的字符串替换页面中某一部分的内容（局部刷新），页面整体不需要重新加载，局部渲染即可
[优势]
1）可以根据需求，任意修改页面中某一部分的内容（如实时刷新），整体页面不刷新，性能好，体验好（所有表单验证、需要实时刷新的需求都要基于ajax实现）
2）有利于开发，提高开发效率
a. 前后端的完全分离，后台前端都不需要考虑对方是如何实现的，使用什么技术，真正意义上实现了技术的划分
b. 可以同时进行开发：项目开发开始，首先定制前后端数据交互的接口文档（包含调取哪个接口或者哪些数据等协议规范），后台把接口先写好，了护短按照接口调取即可，后台再次去实现接口功能
[弊端]
1）不利于SEO优化：第一次从服务器端获取的内容不包含需要动态绑定的数据，后期通过JS添加到页面的内容，不会写在页面的源代码中，所以页面的源代码中没有这些内容，不利于SEO收录
2）交由客户端渲染，首先需要把页面呈现，然后再通过JS的异步ajax请求获取数据，数据绑定，浏览器再把动态增加的部分重新渲染，浪费了一些时间，没有服务器端渲染页面呈现速度快

前后端完全分离.png