【笔记】 《js权威指南》- 第18章 脚本化HTTP - 18.1 使用XHR(1)

1. 在Ajax中客户端从服务端请求数据，在Comet中服务器端向客户端发送数据。

2.使用XMLHttpRequest：

(1). 指定请求：request.open

第一个参数表示动作，常用值为POST和GET， GET适用于URL完全指定请求资源，并且请求对服务器没有副作用而且服务器的响应是可以缓存的；POST常用于表单，在请求中包含额外的数据，这些数据可能存储在服务器的数据库中。由于每次获得响应可能不同，不应该缓存使用这个方法的响应。

第二个参数是URL, 他是请求的主体，这个url是相对文档的url， 如果使用绝对url，在没有允许跨域请求的前提下，必须要匹配所在文档的对应内容。

设置请求头：

request.setRequestHeader("Content-TYpe", "text/plain");

(2). 发送请求，

参数为可选的主体，如果是GET请求就发送null或者不设置参数；如果是POST请求应该匹配使用请求头指定Content-Type

function postMessage(msg) {    var request = new XMLHttpRequest();    request.open("POST", "/log.php");    request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");    request.send(msg);};

(3). 取得响应：

a.状态码，由status和statusText以数字或文本的形式返回，比如200表示成功，404表示不能匹配服务器上的资源；

b. 使用getResponseHeader(headName)和getAllResponseHeaders()方法能查询响应头;

c. 响应主体可以从responseText属性中得到文本形式。从resposneXML中得到Document形式。

d.由于默认的响应为异步响应，所以需要通过监听readystatechange事件检查readyState来判断请求是否得到响应，并获得响应主体

e. 同步响应：

如果设置open函数第三个参数为false表示同步请求，send方法会阻塞直到请求完成。这是不需要判断readyState；

f. 解析响应主体：

function getText(url, callback) {var request = new XMLHttpRequest();request.open("GET", url);request.onreadystatchange = function() {if (request.readyState === 4 && request.status === 200) {var type = request.getResponseHeader("Content-Type");// if (type.match(/^text/))// callback(request.responseText);if (type.indexOf("xml") !== -1 && request.responseXML)callback(request.responseXML);else if (type === "application/json")    callback(JSON.parse(request.responseText));else callback(request.responseText);}};request.send(null);};

可以使用request.overrideMimeType(mimeType);指定转换解析方式

(4). 编写请求主体：

a. 在POST动作中设置请求头的Content-Type类型为application/x-www-form-urlencoded，就可以用name=value&形式的字符串作为请求主体。

function encodeFormData(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.replace("%20", "+"));value = encodeURIComponent(value.replace("%20", "+"));pairs.push(name + "=" + value);return pairs.join("&");}};request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");request.send(encodeFormData(data));

b. 使用JSON.stringify;

c. 使用XML文档：

var doc = document.implementation.createDocument("", "root", null);var root = doc.documentElement;var find = doc.createElement("tag");root.appendChild(find);find.setAttribute("attri1", value);find.appendChild(doc.createTextNode(what));request.send(doc);

d. 上传文件：

文件属于Blob二进制对象中的子类，XHR2允许传入任何Blob对象，如果要设置Content-Type值，请使用Blob对象的type属性。

var elts = document.getElementsByTagName("input");for (var i = 0; i < elts.length; i++) {var input = elts[i];if (input.type !== "file") continue;var url = input.getAttribute("data-uploadto");if (!url) continue;input.addEventListener("change", function() {var file = this.files[0];if (!file) return;var xhr = new XMLRequest();xhr.open("POST", url);xhr.send(file);}, false);}

e.使用FormData生成混合种类的请求：

function postFormData(url, data, callback) {if (typeof FormData === "undefined")throw new Error("FormData is nor implemented");var request = new XMLHttpRequest();request.setRequestHeader("Content-Type", "multipart/form-data");request.onreadystatechange = function() {if (request.readyState === 4 && callback) {callback(request);}};var formdata = new FormData();for (var name in data) {if (!data.hasOwnProperty(name)) continue;var value = data[name];if (typeof value === "function") continue;formdata.append(name, value);}request.send(formData);};