1.Ajax基础知识及核心原理

Ajax基础知识

什么是Ajax?

• Asynchronous JavaScript + XML,异步的js和XML

什么是XML?

• 可扩展的标记语言

XML的作用?

• 用来存储数据的(用自己的扩展的标签来标记数据结构)

Ajax之所以称为异步的js和XML,主要原因是:当初最开始用Ajax实现客户端和服务器端数据通信的时候,传输的数据格式一般都是XMl格式的数据,所以我们把它称为异步的js和XML(现在一般都是基于JSON格式来进行数据传输的)

<?xml version="1.0" encoding="utf-8"?><root>    <student>       <name>张三</name>        <age>25</age>        <score>            <english>90</english>            <math>100</math>            <chinese>98</chinese>        </score>    </student>    <student>        <name>李四</name>        <age>20</age>        <score>            <english>78</english>            <math>80</math>            <chinese>90</chinese>        </score>    </student></root>

异步的js

• 这里的异步不是说Ajax只能基于异步进行请求(虽然建议都是使用异步编程),这里的异步特指的是"局部刷新"

局部刷新vs全局刷新

• 前后端不完全分离:在前后端不完全分离项目中,前端开发只需要完成页面的制作,并把一些基础的人机交互效果使用js完成即可,页面需要动态呈现内容的部分,都是交给后台开发工程师做数据绑定和基于服务器进行渲染的(服务器端进行渲染的)

全局刷新的好处?

1. 动态展示的数据在页面的原代码中可以看见,数据在服务器都渲染好了,页面的源代码都可以看到了,有利于SEO优化推广(有利于搜索引擎的收录和抓取)
2. 从服务器端获取的结果就已经是最后呈现的结果了,不需要客户端做额外的事情,所以页面加载速度快(前提是服务器端处理的速度够快,能够处理过来),所以类似于京东、淘宝这些网站,首屏数据一般都是经由服务器端进行渲染的

全局刷新的缺点?

1. 如果页面中存在需要实时更新的数据,每一次想要展示最新的数据,页面都需要重新刷新一次,这样肯定不行
2. 都交给服务器端做数据渲染,服务器端的压力太大,如果服务器处理不过来,页面呈现的速度更慢(所以京东、淘宝这些网站,除了首屏是服务器端渲染的,其它屏都是做客户端做数据渲染绑定的)
3. 这种模式不利于开发(开发效率低)

• 前后端分离:前后端完全分离的项目,页面中需要动态绑定的数据是交给客户端完成渲染的

局部刷新的步骤？

1. 向服务器端发送Ajax请求
2. 把从服务器端获取的数据解析处理,拼接成为我们需要展示的HTML字符串
3. 把拼接好的字符串替换页面中某一部分的内容(局部刷新),页面整体不需要加载,局部渲染即可

局部刷新的优势?

1. 我们可以根据需求任意修改页面中某一部分的内容(例如实时刷新),整体页面不刷新,性能好,体验好(所有表单验证、需要实时刷新等的需求都要基于Ajax实现)
2. 有利于开发,提高开发的效率

• 前后端完全分离的项目,后台不需要考虑前端如何实现,前端也不需要要考虑后天用什么技术,真正意义上实现了技术的划分,
• 可以同时进行开发:项目开发开始,首先制定前后端数据交互的接口文档(文档中包含了,调取哪个接口或者哪些数据等协议规范),后台把接口先写好(目前很多公司也需要前端自己拿NODE来模拟这些接口),客户端按照接口调取即可,后台再次去实现接口功能即可

局部刷新的缺点?

1. 不利于SEO优化:第一次从服务器获取的内容不包含需要动态绑定的数据,所以页面的源代码中没有这些内容,不利于SEO收录,后期通过js添加到页面中的内容s,并不会在页面的源代码中(是源代码不是页面结构)
2. 交由客户端渲染,首先需要把页面呈现,然后再通过js的异步Ajax获取数据,然后数据绑定,浏览器把动态添加的部分重新渲染,无形中浪费了一些时间,没有服务器端渲染页面呈现速度快,