XMLHttpRequest详情之GET和POST(二)

效果如图：

代码和（一）差不多，先上first.html代码

<body>
<select name="first" id="first" size="3"
	onchange="change(this.value);">
	<option value="1" selected="selected">中国</option>
	<option value="2">美国</option>
	<option value="3">日本</option>
</select>
<select id="second" size="3"></select>
<script type="text/javascript">
//定义了XMLHttpRequest对象
var xmlrequest;
//完成XMLHttpRequest对象的初始化
function createXMLHttpRequest()
{
	if(window.XMLHttpRequest)
	{ 
		//DOM 2浏览器
		xmlrequest = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		// IE浏览器
		try
		{
			xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			try
			{
				xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e)
			{
			}
		}
	}
}
//事件处理函数，当下拉列表选择改变时，触发该函数
function change(id)
{
	//初始化XMLHttpRequest对象
	createXMLHttpRequest();
	//设置请求响应的URL
	var uri = "second.jsp?id="+id;
	//打开与服务器资源的连接
	xmlrequest.open("GET", uri, true);
	//设置处理响应的回调函数
	xmlrequest.onreadystatechange = processResponse;
	//发送请求
    xmlrequest.send(null);
}
//定义处理响应的回调函数
function processResponse()
{
	//响应完成且响应正常
	if (xmlrequest.readyState == 4)
	{
		if (xmlrequest.status == 200)
		{
			//将服务器相应以$符号分隔成字符串数组
			var cityList = xmlrequest.responseText.split("$");
			//获取用于显示菜单的下拉列表
			var displaySelect = document.getElementById("second");
			//将目标下拉列表清空
			displaySelect.innerHTML = null;
			//以字符串数组的每个元素创建option，并将这些选项添加到下拉列表中
			for (var i = 0 ; i < cityList.length ; i++)
			{
				//创建一个<option.../>元素
				var op = document.createElement("option");
				op.innerHTML = cityList[i];
				//将新的选项添加到列表框的最后
				displaySelect.appendChild(op);
			}
		}
		else
		{
			//页面不正常
			window.alert("您所请求的页面有异常。");
		}
	}
}
</script>
</body>

GET格式：

	var uri = "second.jsp?id="+id;
	//打开与服务器资源的连接
	xmlrequest.open("GET", uri, true);
	//设置处理响应的回调函数
	xmlrequest.onreadystatechange = processResponse;
	//发送请求
    	xmlrequest.send(null);

注意到GET方式如果要发送请求参数，应将请求参数转化成查询字符串，并追加到请求的URL之后

假如在xmlrequest.send()中换成send（“id=”+id）则有异常，只能将参数加到url后面

而POST方式：

var uri = "second.jsp";
//设置以POST方法发送请求，并打开连接
xmlrequest.open("POST", uri, true); 
//设置POST请求的请求头
xmlrequest.setRequestHeader("Content-Type"
, "application/x-www-form-urlencoded");
//确定XMLHttpRequest对象的状态改变时的回调函数
xmlrequest.onreadystatechange = processResponse;
//发送请求，在发送请求时发送请求参数
xmlrequest.send("id="+id);

可以看到post方式与GET方式的不同，必须有请求头，而请求参数既可以跟get一样在url后，也可以像上面一样在send（）函数里