了解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之类的方法

发布了60 篇原创文章 · 获赞 17 · 访问量 6405

猜你喜欢

转载自blog.csdn.net/qq_42177478/article/details/104056893