ajax| 8月更文挑战

188 阅读3分钟

Ajax是什么?

Ajax,即异步JavaScript和XML,是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的部分进行加载更新。

Ajax 的优点在于它在浏览器与web服务器之间使用异步数据传输(HTTP请求),不阻塞用户,核心对象是XMLHTTPRequest。通过这个对象, js可在不重新加载页面的情况下与web服务器交换数据 。

Ajax轮询和websocket的区别

实现浏览器与服务器的实时数据交互,可以通过建立websocket,也可以通过Ajax轮询的方式。

了解了Ajax和websocket的基本概念,那么我们平时会在哪些应用场景应用到这两种技术呢?

Ajax的应用场景
Ajax的特点在于异步交互,动态更新web页面,因此Ajax的适用范围是交互较多,频繁读取数据的web应用。

Ajax应用场景:

1.用Ajax进行表单数据验证

在填写表单内容时,需要保证数据的唯一性(例如新用户注册填写的用户名),因此必须对用户输入的内容进行数据验证。

使用Ajax技术,可以由XMLHttpRequest对象发出验证请求,根据返回的HTTP响应判断验证是否成功,整个过程不需要弹出新窗口,也不需要将整个页面提交到服务器,快速而又不会加重服务器负担。

2.按需取数据

在web应用中,经常会用到分类树或树形结构,例如部门结构,文件的分类结构等。

Ajax技术是这样实现树形结构的:

在初始化页面时,只获取第一级子分类的数据并显示; 当用户点开一级分类的第一节点时,页面会通过Ajax向服务器请求当前分类所属的二级子分类的所有数据; 如果再请求已经呈现的二级分类的某一节点时,再次向服务器请求当前分类所属的三级子分类的所有数据,以此类推。 页面会根据用户的操作向服务器请求所需要的数据,这样就不会存在数据的冗余,减少了数据下载总量。同时,更新页面时不需要重新加载全部内容,只更新需要更新的那部分内容即可,大大缩短了用户的等待时间。

3.自动更新页面

web应用中有很多数据的变化是实时的,例如:最新的新闻,天气预报以及聊天室等等。在Ajax出现之前,用户为了即使了解相应的内容必须不断刷新页面,查看是否有新的内容变化,或者页面本身实现定时刷新的功能。

应用Ajax技术可以改善这种这种情况,页面加载以后,会通过Ajax在后台进行定时的轮询,向服务器发送请求,查看是否有最新的消息(当然这种情况是有弊端的,上面也说到了)。如果有则将新的数据下载并且在页面上进行动态的更新,通过一定的方式通知用户。

总结

Ajax一般会应用在交互较多,频繁读取数据的web应用中。

websocket一般会应用在需要提供多个用户相互交流,或需要实时的展示服务端变动的数据这两种情况。了解了这两项技术,在设计到相关产品功能时,就能应对自如了。