数据通信

• 数据通信
  • HTTP
    • HTTP 事务
      • HTTP 请求报文
      • HTTP 回复报文
    • 常用 HTTP 方法
    • URL 构成
    • HTTP 版本
    • 常见 HTTP 状态码
  • AJAX
    • AJAX 调用
      • open
      • setRequestHeader
      • send
    • 请求参数序列化
    • 同源策略
    • 跨域资源访问
      • 其他跨域技术

数据通信

HTTP

HTTP 为一个通信协议。HTTP 客户端发起请求并创建端口。HTTP 服务器在端口监听客户端的请求。 HTTP 服务器在收到请求后则返回状态和所请求的内容。

网页浏览全过程 （粗浅流程）

1. 域名解析
   1. 搜索浏览器自身 DNS 缓存
   2. 搜索操作系统自身 DNS 缓存（如上一级未找到或已失效）
   3. 读取本地 HOST 文件 （如上一级未找到或已失效，/etc/hosts）
   4. 浏览器发起 DNS 系统调用请求
      1. ISP 服务器查找自身缓存
      2. ISP 服务器发起迭代（逐域寻找需要的地址）请求
2. 得到请求资源的 IP 地址
3. 发起 HTTP “三次握手”（下面为一个超级简化版）
   1. 建立连接，等待服务器确认
   2. 服务器接受请求，回复客户
   3. 客户端与服务器连接成功（TCP/IP 连接成功）
4. 客户根据协议发送请求
5. 服务器更具请求返回客户需求资源
6. 客户获得资源

HTTP 事务

HTTP 请求报文

其中包括主机地址，HTTP 协议版本号。头部由键值对组成。因为此请求为 GET 方法所以请求体为空。

HTTP 回复报文

其中包括 HTTP 版本号，状态码及状态码描述。头部依然为键值对组成。主体则为 HTML 文件。

常用 HTTP 方法

常用方法

不常用方法

URL 构成

http://www.github.com:8080/index.html?user=li-xinyang&lang=zh-CN#home
  |          |          |       |                  |              |
protocol     |          |       |                  |              |
          hostname     port     |                  |              |
              \        /    pathname             search          hash
                 host

可选部分包括：

• port
• pathname
• search
• hash

NOTE：上面提供的 URL 地址仅为参考所用。

HTTP 版本

• HTTP/0.9 1991年 HTTP 原型，存在设计缺陷
• HTTP/1.0 第一个广泛应用版本
• HTTP/1.0+ 添加持久的 keep-alive 链接，虚拟主机支持，代理连接支持，成为非官方的事实版本
• HTTP/1.1 校正结构性缺陷，明确语义，引入重要的新能优化措施，删除不好的特性（当前使用版本）

NOTE：此文写于2015年6月。

常见 HTTP 状态码

AJAX

AJAX（Asynchronous JavaScript and HTML）异步获取数据的概念，由 Jesse James Garrett 在2005年提出。

AJAX 请求全过程

AJAX 调用

三部完成 AJAX 调用

1. 创建 XHR 对象
2. 处理返回数据及错误处理
3. 发送请求

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(callback) {
  if (xhr.readyState === 4) {
    if ((xhr.status >== 200 && xhr.status < 300) || xhr.status === 304) {
      callback(xhr.responseText);
    } else {
      console.error('Request was unsuccessful: ' + xhr.status);
    }
  }
}

xhr.open('get', 'exmaple.json', true);
xhr.setRequestHeader('myHeader', 'myValue');
xhr.send(null);

NOTE：xhr.onload 只针对当 readyState === 4 和 status === 200 时的事件。

open

xhr.open(method, url[, async = true]);

• method 为上面说过的 HTTP 方法（例如，GET、POST）
• url 为资源地址
• async 默认为真，用于设置异步请求

setRequestHeader

xhr.setRequestHeader('myHeader', 'myValue');

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

用于设置头部的键值对。

send

xhr.send([data=null]);

xhr.send()

数据可包含字符串或表单数控，但需要提前为 RequestHeader 做设置。

请求参数序列化

将查询参数使用字符串，跟入资源地址中。

xhr.open('get', 'example.json?' + 'name=value&age=value', true);

对象转换字符串的函数实现

function serialize(data) {
  if (!data) return '';
  var pairs = [];
  for (var name in data) {
    if (!data.hasOwnProperty(name)) continue;
    if (typeof data[name] === 'function') continue;
    var value = data[name].toString();
    name = encodeURIComponent(name);
    value = encodeURIComponent(value);
    pairs.push(name + '=' + value);
  }
  return pairs.join('&');
}

GET 请求

var url = 'example.json?' + serialize(formData);
xhr.open('get', url, true);
xhr.send(null);

POST 请求

查询参数需要作为 send() 的存数传入。

xhr.open('get', 'example.json', true);
xhr.send(serialize(formData));

同源策略

两个页面拥有相同的协议（Protocol）、端口（Port）、和主机（host）那么这两个页面就是属于同一个源（Origin）。

http://www.github.com:8080/index.html?user=li-xinyang&lang=zh-CN#home
  |          |          |       |                  |              |
protocol     |          |       |                  |              |
          hostname     port     |                  |              |
              \        /    pathname             search          hash
                 host
|-----完全一致则同源------|

跨域资源访问

不满足同源策略的资源访问均属于跨域资源访问，W3C 定义了 CORS。现代浏览器已经实现了 CORS 的支持。

CORS 原理实现图

其他跨域技术

• Frame 代理
• JSONP
• Comet
• Web Sockets
• ...

Frame 代理

关于 Frame 代理的更多内容在这里。

优点：

• 参照 CORS 标准
• 支持各种请求方法 GET POST PUT DELETE

缺点：

• 需要在目标服务器防止代理文件（造成延时）
• 低版本在大并发消息通信机制会产生延时

JSONP

全程为 JSON with Padding（填充式 JSON），它利用 <script> 可以跨域的原理。请求一段 JavaScript 代码，然后执行 JavaScript 代码来实现跨域。

function handleResponse(response) {
  alert(response.name);
}

var script = document.createElement('script');
script.src = 'http://localhost:3000/json?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);