ajax和websocket

前后端非实时数据交互使用Ajax，实时数据交互使用WebSocket。在此做一下总结。

1.Ajax

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript">
    window.onload = function() {

    var oBtn = document.getElementById('btn');

    oBtn.onclick = function() {

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                    alert( xhr.responseText );
            }
        };

        xhr.open('get', 'https://api.douban.com/v2/book/search?q=javascript&count=1', true);
        xhr.send(); 
    };

};
</script>
</html>

2. websocket

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

WebSocket API最大的优点在于服务器和浏览器可以在给定的时间范围内的任意时刻，相互推送信息。在建立连接之后，服务器可以主动传送数据给浏览器。此外，服务器与浏览器之间交换的表头信息很小。WebSocket并不限于以Ajax（或XHR）方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以相互推送信息。

在支持WebSocket的浏览器中，在创建Socket之后，可以通过onopen，onmessage，onclose，onerror四个事件实现对Socket的响应。

var ws = new WebSocket("URL路径");
 
ws.onopen = function(evt) {
  console.log("打开成功");
  ws.send("Hello WORD!");
};
 
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};
 
ws.onclose = function(evt) {
  console.log("服务关闭");
};

首先申请一个WebSocket对象，参数是需要连接的服务器端地址，同HTTP协议使用HTTP://开头一样，WebSocket协议的URL使用WS://开头，另外安全的WebSocket协议使用WSS://开头。