在我们日常使用的互联网产品中,很多都是前后端数据的交互来完成的,说到数据交互就不得不提Ajax和websocket,它们可是数据交互的利器,那么它们分别是什么?websocket与Ajax轮询的区别又是什么?它们分别的使用场景有哪些?

Ajax是什么?

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

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

websocket是什么?

websocket是HTML5一种新的协议,实现了浏览器与服务器全双工通信。其本质是:先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接,服务端与客户端通过此TCP连接进行实时通信。

websocket最大的优点在于——服务器和浏览器可以在给定的时间范围内的任意时刻,互相推送消息。在建立连接之后,服务器可以主动传送数据给浏览器。Ajax与websocket最大的不同在于: Ajax需要客户端发起请求,websocket服务器和客户端可以互相实时推送消息。

Ajax轮询和websocket的区别

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

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

Ajax的应用场景

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

比如如下场景:

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

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

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

2.按需取数据

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

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

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

3.自动更新页面

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

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

websocket的应用场景

决定是否需要使用websocket技术的方法其实很简单:

你的产品需要提供多个用户相互交流的功能吗? 你的产品需要展示服务器端经常变动的数据吗? 如果回答都是肯定的,那么你的产品中就要应用websocket技术了。

常用的应用场景如下:

1.社交类应用

对社交类的应用的一个好处之处就是——能够即时的知道你的朋友正在做什么?用户是不会想要在数分钟之后,才能知道一个家庭成员在群里发送的红包或者一个朋友给你发的消息。用户是在线的,所以用户收到的消息应该是实时的。

2.股票基金类应用的价格

金融界瞬息万变——几乎是每毫秒都在发生变化,过时的信息就能导致损失。当我们打开一个股票或基金类应用时,我们想要知道产品实时的价格,而不是10秒前的数据。使用websocket可以实时更新这些数据变化而不需要等待。

3.基于位置的应用

越来越多的基于位置的应用,都是借用移动设备的GPS功能来实现的。如果一直记录用户的位置,就可以收集到更加细致化的数据。如果需要实时的更新网络数据仪表盘(比如:说运动员的教练需要查看这些数据),借用websocket可以做到让数据实时刷新。

4.在线教育类应用

在线教育是学习的不错方式,可以和老师以及其他同学一起交流。websocket技术可以实现多媒体聊天、文字聊天等功能。

总结

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

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

小白需要了解的Ajax和websocket的区别以及使用场景!的更多相关文章

  1. ajax与websocket的区别以及websocket常用使用方式

    笔者近期在公司的项目中渐渐的接触了一些比较高级的业务逻辑处理,其中比较有意思的地方就是前端接受后台给与的推送问题. 一般前端与后端的交互主要是使用ajax进行异步操作调用交互,比较有趣的是这种交互方式 ...

  2. ajax VS websocket

    一. ajax VS websocket总结 http://blog.csdn.net/qiuhuanmin/article/details/50719114 二.用Websocket代替Ajax来开 ...

  3. WebSocket和long poll、ajax轮询的区别,ws协议测试

    WebSocket和long poll.ajax轮询的区别,ws协议测试 WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连 ...

  4. 小渣渣的json和jsonp和ajax的实质和区别

    json和jsonp和ajax的实质和区别ajax的两个问题 1.ajax以何种格式来交换数据 2.跨域的需求如何解决 数据跨域用自定义字符串或者用XML来描述 跨域可以用服务器代理来解决jsonp来 ...

  5. json和jsonp的区别,ajax和jsonp的区别

    json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...

  6. HTTP 和 WebSocket的区别

    有关http和WebSocket 的区别网上有很多的质料. 个人在此仅仅是记录以下自己的学习心得,自己的理解. 1. http协议是用在应用层的协议,他是基于tcp协议的,http协议建立链接也必须要 ...

  7. Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别

    为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...

  8. python中socket、socketio、flask-socketio、WebSocket的区别与联系

    socket.socketio.flask-socketio.WebSocket的区别与联系 socket 是通信的基础,并不是一个协议,Socket是应用层与TCP/IP协议族通信的中间软件抽象层, ...

  9. ajax同步与异步的区别

    jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里 ...

随机推荐

  1. 045、Java中使用if语句进行判断

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  2. CSS:导航栏下拉菜单模板

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  3. 打开exe并传参

    shellexecute(Application.Handle,'open',PWideChar('E:\控件\TMS.Scripter.Studio.Pro..6.0.2.0.Delphi.BCB. ...

  4. java 如何爬取百度百科词条内容(java如何使用webmagic爬取百度词条)

    这是老师所布置的作业 说一下我这里的爬去并非能把百度词条上的内容一字不漏的取下来(而是它分享链接的一个主要内容概括...)(他的主要内容我爬不到 也不想去研究大家有好办法可以call me) 例如 互 ...

  5. 获取目录结构,并写到txt文档里

    cmd里直接运行: tree /f > ml.txt 写成bat tree D:\a\ /f > D:\a\目录.txt 效果 卷 本地磁盘 的文件夹 PATH 列表 卷序列号为 18A9 ...

  6. maven package跳过测试

    mvn clean package -DskipTests 或者 mvn clean package -Dmaven.test.skip=true 区别 -DskipTests,不执行测试用例,但编译 ...

  7. Tomcat添加SSL安全认证

    环境 Tomcat7.阿里SSL证书 server.xml <Connector port="443" protocol="org.apache.coyote.ht ...

  8. 134-PHP子类重写父类方法,并调用父类方法

    <?php class father{ //定义father类 public function method(){ //定义方法 echo '<br />father method' ...

  9. C#的listview

    listView1.Items.Clear(); ListViewItem listitem = new ListViewItem(字符串);//这是第一列的内容,需要,而且必须通过构造方法添加 ; ...

  10. 吴裕雄--天生自然C++语言学习笔记:C++ 接口(抽象类)

    接口描述了类的行为和功能,而不需要完成类的特定实现. C++ 接口是使用抽象类来实现的,抽象类与数据抽象互不混淆,数据抽象是一个把实现细节与相关的数据分离开的概念. 如果类中至少有一个函数被声明为纯虚 ...