首页 > 代码库 > 脚本化HTTP

脚本化HTTP

2024-07-11 14:52:38   220人阅读

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// initvar request = new XMLHttpRequest();// connectrequest.open(‘GET‘, url, async, user, pwd);// setHeaderrequest.setHeader(key, value);// sendrequest.send(null);// postvar request = new XMLHttpRequest();// connectrequest.open(‘POST‘, url, async, user, pwd);// setHeaderrequest.setHeader(key, value);// sendrequest.send(JSON.stringify({data:‘test‘}));
  • 对请求主体的编码
    • 表单编码(即html中form表单提交中用到的编码，实际上是执行普通的URL编码，使用十六进制转义码替换特殊符号，常用浏览器全局方法encodeURIComponent(text)来编码，格式是：key=val1&key=val2)
      // 把JSON类型的对象解析成表单编码的字符串  var encodeFormData = http://www.mamicode.com/function (data) {    if (!data) return ‘‘;    var pairs = [    ];    for (var key in data) {      // 跳过继承属性和方法      if (!data.hasOwnProperty(key) || typeof data[key] === ‘function‘) continue;      var value =http://www.mamicode.com/ 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 = http://www.mamicode.com/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);      }  };

     

 


联系
我们