XMLHttpRequset发送GET请求

标签：

1.前言

通常情况下，GET请求用于从服务器上获取数据，POST请求用于向服务器发送数据。GET请求将所有请求参数换成一个查询字符串，并将该字符串加到请求的URL之后，因而可以在请求的URL后看到请求参数名、请求参数值。如果将某个的action属性设置为GET，则请求将会将表单中各个字段名和值转换成字符串，并附加到URL之后。下面的例子，我们用GET请求将请求的ID作为参数发送，然后得到响应的信息。

2. 例子

1)        我们定义个多选框，当选中了其中一个后，在多选框的右边会显示该国家的信息。所以我们在first.html定义单击的事件。（源码链接：http://pan.baidu.com/s/1kUDWo0f 密码：07pg）

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

2)        请求URL之后，对应的页面会返回信息，所以我们要写回调函数来读取这些信息，后将其显示在右边的框中。依然是在first.html中添加。

// 定义处理响应的回调函数
	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("您所请求的页面有异常。");
			}
		}
	}

3)        从面可以看出我们请求的是second.js，所以也要在这个页面中添加下面的代码

<%@ page contentType="text/html; charset=GBK" language="java" %>
<%
String idStr = (String)request.getParameter("id");
int id = idStr == null ? 1 : Integer.parseInt(idStr);
System.out.println(id);
switch(id)
{
	case 1:
%>
上海$广州$北京
<%
	break;
	case 2:
%>
华盛顿$纽约$加州
<%
	break;
	case 3:
%>
东京$大板$福冈
<%
	break;
}
%>

3.例子结果

   当我们使用GET来发送请求时，我们需要传入id值，当请求id为1时，返回三个中国城市；当请求为2时，返回三个美国城市；当请求为3时，返回三个日本城市。运行结果如下：

XMLHttpRequset发送GET请求

标签：

原文地址：http://blog.csdn.net/owen_william/article/details/51337921