Love.Passion.Dream

总结下浏览器向服务端发送请求的各种方式

纠结这个问题是因为之前要解决跨域的一些问题,然后就涉及到了通过表单提交数据达到跨域的目的。然后就在研究通过表单提交,或者是AJAX,或者还有POST和GET等不同的方式向服务器发生数据的方式。

如果先去掉HTML5新定义的websocket,那么浏览器和服务端通信de的方式也就只有http了(https也就是多了一个加密的步骤,flash等插件的方式也就不讨论了)。http是一种无状态的协议,这也符合最初浏览器的目的,也就是展示信息,还有就是发送数据。通常也就是http中几种方式中的两种:GET,POST。还有其他几种方法用得也就少了。顾名思义GET是拿,POST是送,所以一般如果不考虑GET方式对因为URL长度的限制导致了数据量的限制,那么基本都会使用GET去获取数据,而用POST上传数据。

用户通常进入一个网页都是通过输入url进入,该方式就是发送了一个HTTP GET请求,url中可以带上数据,这些数据都是经过URL编码的,所以服务器端也需要对此进行解码。还有另外一种方式就是通过填写表单,然后提交表单跳转到另一个页面。如果是通过GET方式,那么和在浏览器中直接输入URL的方式相同,只不过浏览器会将表单中的数据序列化为?xxx=xxx&xxx=xxx。如果通过POST方式,那么这些数据将不会通过URL传递,而是放到了请求体中,但是有一点要注意的是它依然也会进行URL编码,尽管它没有通过URL传递数据。所以利用表单进行跨域通信的同学要注意了,和纯粹的http AJAX请求不同,请求体里面会是?xxx=xxx&xxx=xx的格式,而且会有URL编码。这种情况下会带上一个header:Content-Type:application/x-www-form-urlencoded。

那么通过AJAX发生的HTTP请求呢?通过AJAX发生的http请求显然是更灵活一些,可以自定义header,发生的数据不会被URL编码,也没有?xxx=xxx这样的格式,当然你也可以使用application/x-www-form-urlencoded的Content-Type.所以通常会利用AJAXhe和服务器进行JSON格式数据的通信,当然在几年前XML显然更流行一些。

另外img script css等的请求都是普通的HTTP GET方式。所以利用这些方式进行的跨域请求就多了许多现在。所以归根结底,跨域的限制是由于浏览器安全协议所导致的,那么我们还是期待通过协议的方式的解决方案(CORS)普及吧。

在来说一下websocket吧,由于http请求是无状态的,所以就使得很多即时应用在浏览器duan端显得有些苍白无力,如果要实现持久的浏览器和服务器通信,那么则需要平凡发生http请求,无论是长连接还是轮训,显然这样的性能是很不好的。所以同样的,协议导致的问题最好还是通过协议来解决吧。HTML5的websocket就这样诞生了

websocket的的定义还有接口神马的也就不细说了,google一大堆。之前做过一个多人联机对战的贪吃蛇就用了websoket,如果抛开底层的东西,买对前端开发者也就那几个接口。

  • new WebSocket()

  • onOpen

  • onClose

  • send

  • ......

有一个强大的http://socket.io/的库已经把这些的前后端都封装好了,而且利用flash和长连接的方式兼容了IE。

最后也顺便贴上之前做的多人贪吃蛇git snake。本来有实例托管在NAE上面的,后来NAE的权限升级了也就无法使用websocket了。