前后端通信

使用ajax进行通信

ajax的出现,刚好解决了传统方法的缺陷，通过 JavaScript 的异步通信，从服务器获取数据，再更新当前网页的对应部分，而不用刷新整个网页。缺点就是有同源限制。

使用WebSocket进行通信

webSocket协议最大的特点就是解决了http协议只能单方面发送请求的问题，服务端可以主动向客户端推送信息，属于服务器推送技术的一种。有一些特点如下：

没有同源限制，客户端可以与任意服务器通信
建立在TCP协议之上，服务端的实现比较容易
与HTTP协议有着良好的兼容性。默认端口也是80和433，并且握手阶段采用的HTTP协议，因此握手时不容易被屏蔽，能通过各种HTTP代理服务器
数据格式比较轻量，性能开销小，通信高效
可以发送文本，也可以发送二进制数据

创建一个Ajax步骤

Ajax的创建总体可以概括为以下几个步骤

创建异步对象。
设置请求行。
设置请求头。
注册回调函数。
发送请求主体。

具体如下：

首先是创建一个 XMLHttpRequest 对象。
然后在这个对象上使用 open 方法创建一个 http 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。

    xhr.open(method,url,async,username,password)
    method：请求方法，必须参数，值为get或post或head，大小写不敏感。
    url：请求的 URL，必须参数，大部分浏览器仅支持同源请求。
    async：指定请求是否为异步方式，默认为 true。如果为 false，当状态改变时会立即调用
           onreadystatechange 属性指定的回调函数。
    username：可选参数，如果服务器需要验证，该参数指定用户名，如果未指定，当服务器需要
              验证时，会弹出验证窗口。
    password：可选参数，验证信息中的密码部分，如果用户名为空，则该值将被忽略。

当 XMLHttpRequest 对象状态变化时会触发onreadystatechange 事件，我们可以通过注册回调函数，来处理请求成功后的结果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候我们可以通过判断请求的状态，如果状态是 2xx 或者 304 的话则代表返回正常。这个时候我们就可以通过 response 中的数据来对页面进行更新了。
当对象的属性和回调函数注册完成后，最后我们调用 sent 方法来向服务器发起请求，可以传入参数作为发送的数据体。

原生ajax

```
    var xhr = new XMLHttpRequest();
    xhr.open( 'get', 'xxx.php', true );get请求可以省略,post不发送数据也可以省略
    xhr.onreadystatechange = function () {
        if ( xhr.readyState == 4 && xhr.status == 200 ) {
        console.log( '我触发了' );
        console.log( xhr.readyState );
        console.log( xhr.responseText );
        }
    }
    xhr.send( null );
```

readyState状态码说明

0 -代理被创建，但尚未调用 open() 方法。
1 -open() 方法已经被调用。
2 -send() 方法已经被调用，并且头部和状态已经可获得。
3 -下载中， responseText 属性已经包含部分数据。

4 -下载操作已完成。

0：请求未初始化
1：服务器已建立连接
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

status状态码

同http状态码

get请求传参长度

我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。

而HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源于浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:

    HTTP 协议 未规定 GET 和POST的长度限制
    GET的最大长度显示是因为 浏览器和 web服务器限制了 URL的长度
    不同的浏览器和WEB服务器，限制的最大长度不一样

get和post请求在缓存方面的区别

get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。

post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，不能使用缓存。

因此get请求适合于请求缓存。

了解Ajax