web异步与实时交互开发
web异步与实时交互方式分类
交互方式有:轮询、长轮询、长连接以及推送。
轮询:不断使用基于http协议的web交互方式对服务器端数据进行获取,但在满足实时更新服务器端信息的同时有一定的延迟。客户端定时发送请求,服务器端接收到客户端请求后,马上进行响应,并关闭连接。http通信在下一篇博客中说明。
长连接:客户端发送请求,服务器端接收到客户端请求后进行阻塞,并保持连接;当服务器有数据需要响应时,使用保持住的连接进行响应,并保持住连接。
长轮询:长轮询和长连接的区别在于,长轮询在服务器响应后会关闭连接,二长轮询不会。
推送:客户端与服务器端建立连接后,服务器端可以直接将数据推送给客户端
以上四种方式,除了轮询之外都可以实时更新服务器信息
web异步与实时交互技术
web异步与实时交互技术按照出现的顺序有以下三种,iframe、ajax和websocket。下面我们逐个进行介绍。
- iframe:iframe算不上实际意义的异步交互,顶多算是模拟异步交互。iframe是一种html标签,会创建包含另外一个文档的内联框架。利用这一特点可以不断向服务器端提交请求,服务器端通过相应的Servlet处理并相应,客户端根据获得的响应数据,通过js操作dom将数据更新于网页中,而不需要刷新整个父窗口的内容,实现“隐形”传输。
具体格式为,标签内可以指定宽width和高height
'<‘iframe src=“url”>’
AJAX
传统的web交互模式,页面需要全部刷新,等待时间长,影响用户体验,iframe方式虽然模拟了异步交互技术,但是并非真正意义上的异步,且应用起来较为复杂,因此ajax应运而生。ajax通过真正的异步通信和响应,来完成页面的局部刷新,一次改善传统web应用中大量不必要的页面刷新,从而提高响应效率。
Ajax相关技术
XMLHttpRequest对象方法:
- open()方法,语法格式如下,这几个参数指代明显,就不写了。open方法async默认是true为异步请求
XMLHttpRequest(method,url,async,userName,pasword)
- abort()方法,取消当前http请求,强制退出
- send()方法,向服务器发送请求,当请求为异步时立即返回,否则一直等到一直响应为止。语法格式如下:
send(“content”)
jq ajax
jq中的ajax如下:
$.ajax()、 $.get()、$.post()
- $.ajax()
$.ajax()包含了ajax的所有操作,其语法格式如下:
$.ajax(url,[setting])
- $.post()
$.post()方法是带参数向服务器发送数据请求。语法格式如下,type代表服务器返回的文件格式
$.post(url,[data],[callback],[type]);
- $.get()
$.get()方法是使用get方式进行异步请求,其语法格式如下
$.post(url,[data],[callback],[type]);
## AJAX工作原理
第一步:用户端通过XHR加载一个ajax引擎
第二步:AJAX引擎创建一个异步调用的对象,并向web服务器发出一个http请求
第三步:服务器端接收请求数据后,对该请求进行处理
第四步:web服务器将处理结果返回给ajax引擎
第五步:ajax引擎接收返回的结果后,通过js调用dom模型显示在页面上