您的位置：首页 > 理论基础 > 计算机网络

XMLHttpRequest详情之GET和POST(二)

2012-03-12 21:50 253 查看

效果如图：

代码和（一）差不多，先上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（）函数里

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航