2.2 发送请求 2.2.3 发送POST请求

发表于 更新于 分类于 ， Waline： 本文字数： 4.2k 阅读时长 ≈ 4 分钟

2.2 发送请求 2.2.3 发送POST请求

发送步骤

发送POST请求通常需要执行如下三个步骤:

  • 1.使用open方法打开连接时,指定使用POST方式发送请求。
  • 2.设置正确的请求头,对于POST请求通常应设置Content-Type请求头。
  • 3.发送请求,把请求参数转换为查询字符串(就是key=value&key=value...这种形式),将该字符串作为send()方法的参数。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 事件处理函数，当下拉列表选择改变时，触发该事件
function change(id) {
    // 2.设置请求响应的URL
    var uri = "second.jsp";
    // 2.打开与服务器响应地址的连接
    xhr.open("POST", uri, true);
    // 3.设置处理响应的回调函数
    xhr.onload = processResponse;
    // 4.设置POST请求的请求头
    xhr.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded");
    // 5.发送请求,请求参数设为为查询字符串(也就是这种形式:key=value&...)
    xhr.send("id=" + id);
}

事实上,即使采用POST方式发送请求,一样可以将请求参数附加在请求的URL之后。将change函数改为如下形式也可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 事件处理函数，当下拉列表选择改变时，触发该事件
function change(id) {
    // 2.post请求也可以把请求参数放到URL的查询字符串中
    var uri = "second.jsp?id="+id;
    // 2.打开与服务器响应地址的连接
    xhr.open("POST", uri, true);
    // 3.设置处理响应的回调函数
    xhr.onload = processResponse;
    // 4.设置POST请求的请求头
    xhr.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded");
    // 5.发送请求,请求参数设为为查询字符串(也就是这种形式:key=value&...)
    xhr.send();
}

完整代码

项目结构

1
2
3
4
5
6
7
8
E:\workspace_web2\post
└─WebContent
  ├─first.html
  ├─META-INF
  │ └─MANIFEST.MF
  ├─second.jsp
  └─WEB-INF
    └─lib

这是一个java web项目把这下两个文件放在Java web项目的根目录下即可运行.
first.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发送GET请求</title>
<style type="text/css">
select {
    width: 160px;
    font-size: 11pt;
}
</style>
</head>
<body>
    <!-- 一级菜单 -->
    <select name="first" id="first" size="4"
        onchange="change(this.value);">
        <option value="1" selected="selected">中国</option>
        <option value="2">美国</option>
        <option value="3">日本</option>
    </select>
    <!-- 二级菜单 -->
    <select name="second" id="second" size="4">
    </select>
    <script type="text/javascript">
                    // 1.创建XMLHttpRequest对象
                    var xhr = new XMLHttpRequest();
//                     // 事件处理函数，当下拉列表选择改变时，触发该事件
//                     function change(id) {
//                         // 2.设置请求响应的URL
//                         var uri = "second.jsp";
//                         // 2.打开与服务器响应地址的连接
//                         xhr.open("POST", uri, true);
//                         // 3.设置处理响应的回调函数
//                         xhr.onload = processResponse;
//                         // 4.设置POST请求的请求头
//                         xhr.setRequestHeader("Content-Type",
//                                 "application/x-www-form-urlencoded");
//                         // 5.发送请求,请求参数设为为查询字符串(也就是这种形式:key=value&...)
//                         xhr.send("id=" + id);
//                     }
                    // 事件处理函数，当下拉列表选择改变时，触发该事件
                    function change(id) {
                        // 2.post请求也可以把请求参数放到URL的查询字符串中
                        var uri = "second.jsp?id="+id;
                        // 2.打开与服务器响应地址的连接
                        xhr.open("POST", uri, true);
                        // 3.设置处理响应的回调函数
                        xhr.onload = processResponse;
                        // 4.设置POST请求的请求头
                        xhr.setRequestHeader("Content-Type",
                                "application/x-www-form-urlencoded");
                        // 5.发送请求,请求参数设为为查询字符串(也就是这种形式:key=value&...)
                        xhr.send();
                    }
                    // 定义处理响应的回调函数
                    function processResponse() {
                        //如果响应成功
                        if (xhr.status == 200) {
                            // 将服务器响应以$符号分隔成字符串数组
                            var cityList = xhr.responseText.split("$");
                            // 获取用于显示菜单的下拉列表
                            var displaySelect = document
                                    .getElementById("second");
                            // 将目标下拉列表清空
                            displaySelect.innerHTML = "";
                            // 以字符串数组的每个元素创建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("您所请求的页面有异常。");
                        }
                    }
                    //页面加载完成时调用
                    document.body.onload = change(1);
                </script>
</body>
</html>

second.jsp:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ page contentType="text/html; charset=utf-8" 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;
}
%>