了解ajax，ajax的优化有哪些

2020-01-20
------------------------------学习打卡---------------------------------------------------------------------

AJAX简介

AJAX全称Asynchromous JavaScript and XML(异步的JavaScript 和 XML)，将ajax中处理的一些异步信息或叫“即时”信息，保存在缓存中，不要每次去异步处理时，都去调用DHTML的元素信息。

正常情况下填好表单信息并提交后，整个表单信息会发送到服务器，服务器会将它发送给处理表单的脚本，通常是后台的PHP或JAVA，后台脚本执行完成后服务器会发送全新的页面信息，AJAX正常会把javascript技术和XmlHttpRequest对象放在Web表单和服务器之间，当填好表单并提交后，会使用JavaScript代码执行而不是直接发送给服务器，也就是说javascript代码会在后台发送请求到服务器，并且可以异步处理，即javascript代码在发送信息时，不用等待服务器的响应，可以继续发送其他信息。

DHTML是一种HTML页面具有动态特性的艺术，DHTML是一种创建动态和交互WEB站点的技术集，对大多数人来说，DHTML意味着HTML、样式表和javascript的组合。

当主动ajax请求时，用户可能仍然需要等待，所以必须优化请求，优化请求最主要的方法就是使响应可以缓存。

即当ajax发送数据成功后，会把请求的url和返回的响应结果信息保存在缓存中，这样下次调用ajax发送相同请求时，会直接从缓存中把数据取出来，这样可以提高请求的响应速度。

通过Ajax缓存来提升页面性能

ajax缓存可以让请求对一些静态页面内容的信息处理的更迅速，比如图片，css文件，js脚本等。可以让ajax缓存的响应包括：Expires，Last-Modified和Cache-Control。

1）Expires
是通过判断内容是否被修改来确定是否使用浏览器缓存中的内容，如果我们知道内容何时修改，那么可以使用Expires响应头来处理。

http/1.0中定义的header，是最基础的浏览器缓存处理，表示资源在一定时间内从浏览器的缓存中获取资源，不需要请求服务器获取资源，从而达到快速获取资源，环节服务器压力的目的。

在response的header中的格式为：Expires：Thu，01 Dec 1994 16:00:00 GMT（必须是GMT格式）

应用 1.可以再HTML页面中添加

<meta http-equiv="Expries" content="Thu,01 Dec 1994 16:00:00"/>

来给页面设置缓存时间

2.对于图片，css等文件则需要在IIS或者apache等运行容器中进行规则配置来让容器在请求资源的时候添加在response的header中。

2)Last-Modified 设置这个标记会通知浏览器使用if-modified-since头，通过get请求来检查其本地地缓存相关信息，如果数据不需要更新，服务器将使用http 304 状态码来响应此请求，如果需要更新服务器返回200状态码。

在浏览器第一次请求某个url时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记（HttpRequest Header）此文件在服务期端最后被修改的时间，格式类似这样：

Last-Modified：Thu，28 Feb 2019 08:01:04 GMT

客户端第二次请求此url时，根据HTTP协议的规定，浏览器会向服务器传送If-Modified-Since报头（HTTPRequest Header），询问该时间之后文件是否被修改过：

If-Modified-Since：Thu，28 Feb 2019 08：01：04 GTM
如果服务器端的资源没有变化，则自动返回HTTP304（NotChanged）状态码，内容为空，这样就节省了传输数据量。
当服务器代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。从而保证不向客户端重复发送资源，也保证当服务器有变化时，客户端能够得到最新的资源。
3）Cache-Control
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或则响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。
请求时的缓存指令包括no-cache/no-store,max-age,max-stale,min-fresh,only-if-cache,响应消息中的指令包括public，private，no-cache，no-store，no-transform，must-revalidate,proxy-revalidate,max-age。

如果允许应该被设置为“public”，使其他用户可以再中间代理和缓存服务器上存储和共享数据。Public指示响应可被任何缓存区缓存。

Jquery提供了一些api。可以很轻松的创建ajax请求，通过jquery ajax方法，能够使用http get和http post从远程服务器上请求文本。html，xml或json同时能够把这些外部数据直接载入网页的被选元素中。 Jquery是一个javascript库，jquery极大的简化了javascript编程，jquery提供了load（），get（），post（）方法，使用处理ajax请求。 ajax缓存带来很多优点，但是ajax缓存也存在许多不足，如果ajax对一些后台数据进行更改时，虽然数据在服务器端修改了，但是浏览器缓存中的结果并没有改变，浏览器只是简单地从缓存中读取数据并返回到客户端，当然要解决ajax缓存问题可以禁止页面缓存。

什么时候应该用Ajax

Ajax本质上是一种浏览器技术，传统的Server Centri web架构的最大区别是将大量业务逻辑从服务器端移动到浏览器 待续.今天写不动了.....................................