XMLHttpRequest的方法

1.前言

XmlHttpRequest对象的基本方法有：

1)        abort():停止发送当前请求

2)        getAllResponseHeader():获取服务器的全部响应头

3)        getResponseHeader("headerLabel”):根据响应头的名字，获取对应的响应头

4)        open(“method”,”URL”,”[,asycFlag[,”userName”[,password]]]”):建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求。如果远程服务需要用户名、密                  码，则 提供对应的信息。

5)        send(content):发送请求。其中content是请求参数

6)        setRequestHeader(“label”,”value”):在发送请求之前，先设置请求头

2.例子

下面的页面是向服务发送请求，处理响应时将所有的响应全部输出。我们设置个多选下拉框，里面包含了“中国”、“美国”、“日本”，选择其中一个都会输出消息提示。

1)        我们需要初始化XMLHttpRequest的对象

// 定义了XMLHttpRequest对象
	var xmlrequest;
	// 完成XMLHttpRequest对象的初始化
	function createXMLHttpRequest()
	{
		if(window.XMLHttpRequest)
		{ 
			// DOM 2浏览器
			//alert("1");
			xmlrequest = new XMLHttpRequest();
		}
		else if (window.ActiveXObject)
		{
			// IE浏览器
			try
			{
				//alert("2");
				xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e)
			{
				try
				{
					//alert("3");
					xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e)
				{
				}
			}
		}
	}

2)        当选择了下拉框中的任意一个，都需要触发的事件

 // 事件处理函数，当下拉列表选择改变时，触发该事件
	function change(id)
	{
		// 初始化XMLHttpRequest对象
		createXMLHttpRequest();
		// 设置请求响应的URL
		var uri = "second.jsp?id=" + id;
		// 打开与服务器响应地址的连接
		xmlrequest.open("POST", uri, true);
		// 设置请求头
		xmlrequest.setRequestHeader("Content-Type"
		, "application/x-www-form-urlencoded");
		// 设置处理响应的回调函数
		xmlrequest.onreadystatechange = processResponse;
		// 发送请求
		xmlrequest.send(null);
	}

3)        请求好了相应的页面后，需要回调函数来提示响应信息

// 定义处理响应的回调函数
	function processResponse()
	{
		// 响应完成且响应正常
		if (xmlrequest.readyState == 4)
		{
			if (xmlrequest.status == 200)
			{
				// 信息已经成功返回，开始处理信息
				var headers = xmlrequest.getAllResponseHeaders();
				//通过警告框输出响应头
				alert("响应头的类型：" + typeof headers + "\n"
					+ headers);
				// 在页面输出所有响应头
				document.getElementById("output").innerHTML = headers;
			}
			else
			{
				// 页面不正常
				window.alert("您所请求的页面有异常。");
			}
		}

3.例子说明

上面的例子中，主要实现的功能就是，当前页面向其它页面发送异步请求，当请求成功后，getAllResponseHeaders()就会获取方法的所有请求头，并将请求头以敬告框和页面输出两种方式输出。（源码：http://pan.baidu.com/s/1bpLUsAN 密码：trws）

4.例子结果