XML笔记-XMLHttpRequest对象

XHR （XMLHttpRequest）用于与服务器进行局部数据也是AJAX 的基础，此处对其做较为详细的记录和全面的了解，便于日后查看。

参考地址：

https://msdn.microsoft.com/zh-cn/sqlserver/ms535874

一、XMLHttpRequest 对象

Represents an XML request using HTTP。代表一个使用Http 协议的XML 请求。该请求能在不重载整个页面的情况下更新局部数据。

二、XMLHttpRequest 对象拥有3种类型的成员

三种成员分别为：Events、Methods、Properties。

第一种：Events

1、onreadystatechange：set or retrieve the handler for theasynchronous request。设置或取回该异步请求的句柄（即函数或函数名）。会在该请求被sent后调用。为异步的，无法撤销。

语法：

1）、通过html 属性，用法同onclick等；

2）、通过attachEvent绑定：MethodObject.attachEvent（“onreadystatechange”，“functionName”）。

例：

function reportStatus() 
{ 
    if (oReq.readyState == 4 /* complete */) { 
        if (oReq.status == 200 || oReq.status == 304) { 
            alert('Transfer complete.'); 
        } 
        else { 
            // error occurred 
        } 
    } 
} 
var oReq = new XMLHttpRequest(); 
oReq.open("GET","http://localhost/test.xml",true); 
oReq.onreadystatechange = reportStatus; 
oReq.send(); 

2、ontimeout：raised when there is a error that prevents the completion of the request。当存在一个阻止这个请求的的错误时，该事件被唤醒(raised)。性质同上。

语法：

同上。最普通的用法便是提示请求失败。

第二种：Methods

1、abort：cancle the current HTTP request。取消请求。

2、addEventListener：register an event handler for a specified event。为指定的事件注册一个事件句柄。DOM Level3可用，IE9（含）以上可用。

语法：

obj.addEventListener(type,listener,useCapture);

参数：

type：String类型，表示事件类型，如onclick；listener：事件的handler；useCapture：布尔类型，是否在Capture（捕获）阶段（phase，n，阶段；相位；侧面）注册该事件。

（说明：事件的触发，分捕获（capture）阶段和冒泡（bubble）阶段，捕获即从文档根元素找到将注册该事件的元素的过程，冒泡是捕获的反过程。）

返回值：

HRESULT类型，成功则返回S_OK，失败返回一个HRESULT 错误代码。

注意点：

Some events,such asonfocus,do not bubble. However,you can capture all events. You cannot capture events by elements that are not parents of the target element.有的事件没有冒泡，但所有事件都能捕获。不能通过目标元素的非父类元素捕获事件。

If you register multiple identical event handlers on the same event target,the duplicate event handlers are discarded.如果在一个目标元素上注册多个完全相同的事件handler，同名的多余的handler将被丢弃。

此处的obj还没有理解，如果是DOM 中查找到的元素对象，那与XMLHTTPRequest对象有何关系？

关于捕获（capture）的探讨：

3、dispatchEvent：sends a event to the current element。发送事件到当前元素。

语法：obj.dispatchEvent(event,pfResult);

参数：event：IDOMEvent 类型，将dispatch（vt，发出，派遣）的事件；pfResult：布尔型，是否允许事件的默认响应（即是否调用preventDefault），默认为true，即允许default action。

例：

var a = document.createElement('a'); 
var evt = document.createEvent('MouseEvents'); 
evt.initEvent("click",true,true); 
a.dispatchEvent(evt); 

上面的动态创建的元素没有加入文档对象模型，只适用于IE。最好的方式是，将动态创建的元素加入文档对象模型，因为通常dispatch事件只能从文档对象模型中的元素开始。

返回值：pfResult参数。

4、getAllResponseHeaders：return the complete list of response header。返回完整的响应头。响应头见服务器类的servlet。

语法：

XMLHttpRequest.getAllResponseHeaders();

5、getResponseHeader()：return specified response header。返回特殊的响应头。

语法：

XMLHttpRequest.getAResponseHeader(headerNmae);

参数为响应头数据的特定键。

6、open：从一个具体url请求一个synchronous（同步的）或asynchronous（异步的）文件下载。

语法：

var retval=XMLHttpRequest.open(bstrMethod,bstrUrl,varAsyc,varUser,varPassword);

参数说明：

bstrMethod：String类型，request的方法，GET\POST\HEAD，对大小写不敏感。

bstrUrl：String类型，XML数据或web service的绝对或相对路径。

varAsync：Variant类型，true则异步请求（call将立即返回），false则同步请求。默认为true，为true时，通过设置onreadystatechange事件属性，返回是即触发该事件。（说明：异步在请求时，其它操作仍然有效，如input、display update、其它相似任务。而同步请求则相当于阻塞。）

varUser：需要身份证明时的用户名，或为null。

varPass：相应的密码，或为null。

7、overrideMineType：设置response的Content-Type 头类型，见servlet小节。

语法：

XMLHttprequest.overrideMineType（mime）;

mime：DOMString类型，将设置的Content-Type 类型。无返回值。

8、removeEventListener：移除事件的handler。

语法：

obj.removeEventListener(type,useCapture);

9、send：发送一个HTTP 请求，并返回一个response。

语法：

XMLHttpRequest.send(varBody);

无返回值。

10、setRequestHeader：添加个人的请求头到request。可了解servlet查看一些常用的标准请求头。

语法：

XMLHttpRequest.setRequestHeader（key，value）;无返回值。

第三种、Properties

1、constructor：适用于IE 8，返回一个对象的constructor（结构体）的参考。

2、readyState：Integer对象，获取当前请求的状态，常与onreadystatechange事件搭配使用。

值说明：

0：当前对象（XMLHttpRequest）已经被创建，但还没被初始化（initialized），即没有调用open方法。

1：请求被打开（open方法），但还没有调用send方法。

2：send方法被调用。

3：一些数据已经接收，但还不能获取responseText。

4：所有数据接收完成。

由上面也可见到XMLHttpRequest的工作过程：（对应五个状态）

创建XHR 对象——>调用open方法设置该请求（类型、url、同/异步）——>send该HTTP请求——>获取返回的数据——>所有数据接收完成。

注意：对于XHR 对象，状态3不能读取数据，因为数据不完整，否则出错。只有使用ISeverXMLHttpRequest 接口或微软的IXMLHttpRequest接口才能在状态3读取部分responseBody或responseText的数据。

3、response：返回任意类型的请求结果。

4、responseBody：返回的body成为一个unsigned bytes 型数组。

5、responseText：返回的body，即返回体。

6、responseType：设置或返回该request的返回类型。可选值：arraybuffer、blob、document、ms-stream（只支持下载请求）、text。

7、responseXML：返回作为XML 文档对象。

8、status：返回HTTP 状态码。常用：404（页面未找到）、200（"OK"）。

10、statusText：IE返回友好的HTTP 状态，如“OK”。

11、timeout：读或写入timeout值。

12、withCredentials：布尔型，设置用户凭证（credentials）是否应包含在请求中。

三、XMLHttpRequest 使用

XHR一般用于客户端请求服务器端的文件，不仅限于XML 文件！

XMLHttpRequest一般使用步骤：

创建XHR 对象——>设置open方法与onreadystatechange事件——>调用send发送该请求——>读取状态准备接收返回的文件。

<script>
var xhrhttp;	//声明为全局，便于取值
var receivedDoc;
function requestDoc(method,url)
{
	xhrhttp=null;	//每次请求先置空
	//1、创建xhr对象
	if(window.XMLHttpRequest)	
		xhrhttp=new XMLHttpRequest();
	else if(window.ActiveXObject)	//对ie5、6等老版ie浏览器。补充：XMLHttpRequest是由微软开发，而被各大浏览器引用的。
		xhrhttp=new ActiveXObject("Microsoft.XMLHTTP");
	else 
		alert("Your browser dosen't support the XMLHttpRequest.");
	//2、调用open方法,设置onreadystatechange事件句柄。
	if(xhrhttp!=null)
	{
		xhrhttp.open(method,url,true);
		//open方法与send方法之间可设置request header，此处不演示。
		xhrhttp.onreadystatechange=readState;
	}
	//3、send
	xhrhttp.send(null);
	//4、读取数据。在onreadystatechange事件触发时实现。
}
function readState()
{
	if(xhrhttp.readyState==4)	//请求完成（数据返回完成）
	{
		if(xhrhttp.status==200)
			receivedDoc=xhrhttp.responseXML;	//或其他类型文件
		else
			alert("访问文件失败。")
	}
	return;
}
</script>

具体查看：

https://msdn.microsoft.com/zh-cn/sqlserver/ms535874