脚本化HTTP

1、HTTP：

定义：超文本传输协议 (HTTP-Hypertext transfer protocol) 是一种详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。
通信要求：在一台计算机上获取并显示存放在多台计算机里的文本、数据、图片和其他类型的文件。

2、原始的Web客户端与Ajax架构的脚本化HTTP

原始：通过链接、提交表单、和输入url、window.location.href、formObj.submit()
异步、局部刷新体验：Ajax（用脚本操纵HTTP请求的Web应用架构）

3、Ajax与Comet，前者主动从服务器拉数据，后者从服务器向客户端推送数据

4、XMLHttpRequest

兼容Web，对各种文本文件即可操作，并非只有XML
标准支持HTTP和HTTPS(存在一些实现了其他传输协议的非标准版本)
IE7+与其他主流浏览器被支持 (IE5、6如下添加支持,IE5、6下XMLHttpRequest是ActiveX对象)

(function initXHR() {
    if (w.XMLHttpRequest === undefined) {
      w.XMLHttpRequest = function () {
        try {
          // 如果可用,则使用ActiveX对象的最新版本
          return new ActiveXObject('Msxml2.XMLHTTP.6.0');
          // JavaScript权威指南
          // return new ActiveXObject('Msxml2.XMLHTTP');  // 百度名片
        } catch (e) {
          try {
            // 否则回退到较老版本
            return new ActiveXObject('Msxml2.XMLHTTP.3.0');
            // JavaScript权威指南
            // return new ActiveXObject('Microsoft.XMLHTTP'); // 百度名片
          } catch (e) {
            // 否则抛错
            throw new Error('XMLHttpRequest is not supported');
          }
        }
      };
    }
  }());

5、Http请求和响应分解

请求
- type 请求的方式(get、post、put)
- url 　请求的url地址
- header 请求头
- body 请求主体
响应
- status 响应状态，由数字或字符串(404:'Not Found',200:'OK')
- header 响应头
- body 响应主体

* IE下可以用本地文件进行Http请求，同源策略下其他主流浏览器做了交叉访问限制

方法调用的顺序

var request = new XMLHttpRequest();
request.open('GET', 'url', async, user, pwd);
request.setRequestHeader('Content-type', 'text/plain; charset=UTF-8'); // request.getRequestHeader('Content-Type');

request.send(null);

// get
// init
var request = new XMLHttpRequest();
// connect
request.open('GET', url, async, user, pwd);
// setHeader
request.setHeader(key, value);
// send
request.send(null);

// post
var request = new XMLHttpRequest();
// connect
request.open('POST', url, async, user, pwd);
// setHeader
request.setHeader(key, value);
// send
request.send(JSON.stringify({data:'test'}));

对请求主体的编码

表单编码(即html中form表单提交中用到的编码，实际上是执行普通的URL编码，使用十六进制转义码替换特殊符号，常用浏览器全局方法encodeURIComponent(text)来编码，格式是：key=val1&key=val2)

// 把JSON类型的对象解析成表单编码的字符串
  var encodeFormData = function (data) {
    if (!data) return '';
    var pairs = [
    ];
    for (var key in data) {
      // 跳过继承属性和方法
      if (!data.hasOwnProperty(key) || typeof data[key] === 'function') continue;
      var value = data[key].toString();
      // %20是' '(长度为1)的16进制转义符号,在某些(作者也不知道是哪些,有兴趣的自己去了解一下)服务器处理中会将'+'号和空格互换
      // 即decoding的时候把'+'号解析成空格,encoding的时候把空格转成'+'
      key = encodeURIComponent(key.replace(/%20/g, '+'));
      value = encodeURIComponent(value.replace(/%20/g, '+'));
      pairs.push(key + '=' + value);
    }
    return pairs.join('&');
  };
  var postData = function (url, data, callback) {
    var request = XMLHttpRequest();
    request.open('POST', url);
    request.onreadystatechange = function () {
      if (this.readyState === 4 && typeof callback === 'function') callback(this); 
    };
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send(encodeFormData(data));
  };

对响应的处理(onreadystatechange)
- XMLHttpRequest.readyState
  - UNSENT 　　 0 初始化阶段，尚未调用open
  - OPENED 1 Http已连接，已调用open
  - HEADERS_RECEIVED 2 接收到头信息
  - LOADING　　 3 接收到响应主体
  - DONE 4 响应完成
指定资源解码类型 request.overrideMimeType('text/plain; charset=utf-8'); // 需要在send方法触发前指定，使用场景，当你比服务器更清楚返回值的类型的时候

当响应返回的xhr.getResponseHeader('Content-Type')是xml或html类型的时候，可以通过下面的方法解析(目前只支持主流浏览器和IE10+的html解析)，当前浏览器支持xmlHttpRequest.responseXML属性(即会自动把响应类型为xml的文档解析成dom)，相信后续版本会实现html的解析(HTMLDocument对象与XML的DOM对象API不同)

var parser = (function () {
    try {
      //Firefox, Mozilla, Opera, etc, IE9+(IE10+才支持html解析)
      parser = new DOMParser();
      return parser;
    } catch (e) {
      return null;
    }
  }());
  var xmlParse = function (text, type) {
    var xmlDoc = null;
    if (parser) {
      try {
        // 默认xml解析,当前主流浏览器和IE10+(包含)支持type为html的解析,解析成HTMLDocument对象
        xmlDoc = parser.parseFromString(text, 'text/' + (type || 'xml'));
        return xmlDoc;
      } catch (e) { }
    }
    try {
        //Internet Explorer(可能作者水平不够,用这个插件解析,只能解析XML,而且对象屏蔽属性,超难调试)
        xmlDoc = new ActiveXObject ("MSXML2.DOMDocument");
        var flag = xmlDoc.loadXML(text);
        // 解析成功 返回,否则返回未解析的文本
        if (flag) return xmlDoc;
        return text;
      } catch (e1) {
        alert(e1.message);
      }
  };