脚本化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);
  
        }
  
    };