【笔记】 《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);
};