web异步与实时交互开发总结（一）

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模型显示在页面上