了解ajax，ajax的优化有哪些

-20-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架构的最大区别是将大量业务逻辑从服务器端移动到浏览器。好处是当数据发生变更时，只需要重新渲染相关的HTML，而不需要加载整个页面。坏处是使用大量ajax的项目与其说是B/S架构，不如说是C/S架构，自然也具备C/S架构的特点，在浏览器环境下，某些特点会成为缺陷。比如说Ajax要求业务逻辑必须先于数据加载，浏览器必须加载完相关js文件后才能开始加载数据，因此第一次页面ready的时间会晚于传统Web页面。不过这样的问题也有很多解决方案，例如Application Catche可以将文件保存在浏览器里，避免重复加载相同的脚本和资源文件。

所以结论是：是否应该使用Ajax取决于业务流程和技术栈

关于使用Ajax建议

1.页面上首次显示的内容尽量不要用ajax，显示更多（换页）的时候再用比如说知乎首页的第一页Timeline上的问题是直接从服务器读取的，并写入在当前的页面源代码里，而后“显示更多”的内容才是用Ajax读取。

2.切换页面的时候不用Ajax
不要因为网页的header或者side部分没有变化而用Ajax。
因为这是不同的页面，换句话说，是有完全不同的内容或者完全不同的页面逻辑。他们的url就应该不同。
补充：使用了HTML5 History API除外，但是同时要考虑兼容早期版本的浏览器。
3.提交，修改，删除的部分一般用Ajax。
4.消息提醒的部分一般用Ajax
因为很有可能会用到Comet长连接来保证消息的实时推送，name除了WebSocket之外最好的选择只有Ajax。
5.编码的时候模块分工明确。
比如使用了jQuery，name所有的Ajax请求最好最一层包装，然后再转移给$.post或者$.ajax之类的方法