脚本化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)); };
- 表单编码(即html中form表单提交中用到的编码,实际上是执行普通的URL编码,使用十六进制转义码替换特殊符号,常用浏览器全局方法encodeURIComponent(text)来编码,格式是:key=val1&key=val2)
- 对响应的处理(onreadystatechange)
- XMLHttpRequest.readyState
- UNSENT 0 初始化阶段,尚未调用open
- OPENED 1 Http已连接,已调用open
- HEADERS_RECEIVED 2 接收到头信息
- LOADING 3 接收到响应主体
- DONE 4 响应完成
- XMLHttpRequest.readyState
- 指定资源解码类型 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); } };