Ajax发送GET和POST请求案例

使用ajax实现菜单联动

通常情况下，GET请求用于从服务器上获取数据，POST请求用于向服务器发送数据。

 

需求：选择第一个下拉框的值，根据第一个下拉框的值显示第二个下拉框的值

 

  1. 首先使用GET方式。

 

客户端HTML页面显示第一个下拉选择框，给当前下拉选择框选择某个选项后，通过XMLHttpRequest向服务器发送请求，请求动态显示第二个下拉选择框。下面是对应的HTML页面的代码。

程序清单：Ajax02request/get/first.html

  1 <!DOCTYPE html>
  2 
  3 <html>
  4 
  5 <head>
  6 
  7 <meta name="author" content="silvan" />
  8 
  9 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 10 
 11 <title>发送GET请求</title>
 12 
 13 <!-- 给select标签添加样式 -->
 14 
 15 <style type="text/css">
 16 
 17 select {
 18 
 19     width: 160px;
 20 
 21     font-size: 11pt;
 22 
 23 }
 24 
 25 </style>
 26 
 27 </head>
 28 
 29 <body>
 30 
 31     <select name="first" id="first" onchange="change(this.value);">
 32 
 33        <option value="0">---请选择---</option>
 34 
 35        <option value="1" >中国</option>
 36 
 37        <option value="2">美国</option>
 38 
 39        <option value="3">日本</option>
 40 
 41     </select>
 42 
 43     <select name="second" id="second"></select>
 44 
 45     <script type="text/javascript">
 46 
 47     // 定义了XMLHttpRequest对象
 48 
 49     var xmlrequest;
 50 
 51     // 完成XMLHttpRequest对象的初始化
 52 
 53     function createXMLHttpRequest(){
 54 
 55        if(window.XMLHttpRequest){
 56 
 57            // DOM 2浏览器
 58 
 59            xmlrequest = new XMLHttpRequest();
 60 
 61        }else if (window.ActiveXObject){
 62 
 63            // IE浏览器
 64 
 65            try{
 66 
 67               xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
 68 
 69            }catch (e){
 70 
 71               try{
 72 
 73                   xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
 74 
 75               }catch (e){
 76 
 77               }
 78 
 79            }
 80 
 81        }
 82 
 83     }
 84 
 85     // 事件处理函数，当下拉列表选择改变时，触发该事件
 86 
 87     function change(id){
 88 
 89        // 初始化XMLHttpRequest对象
 90 
 91        createXMLHttpRequest();
 92 
 93        // 设置请求响应的URL
 94 
 95        var uri = "second.jsp?id=" + id;
 96 
 97        // 设置处理响应的回调函数
 98 
 99        xmlrequest.onreadystatechange = processResponse;
100 
101        // 打开与服务器响应地址的连接
102 
103        xmlrequest.open("GET", uri, true);
104 
105        // 发送请求
106 
107        xmlrequest.send(null);
108 
109     }
110 
111     // 定义处理响应的回调函数
112 
113     function processResponse(){
114 
115        //响应完成且响应正常
116 
117        if (xmlrequest.readyState == 4){
118 
119            if (xmlrequest.status == 200){
120 
121               // 将服务器响应以$符号分隔成字符串数组
122 
123               var cityList = xmlrequest.responseText.split("$");
124 
125               // 获取用于显示菜单的下拉列表
126 
127               var displaySelect = document.getElementById("second");
128 
129               // 将目标下拉列表清空
130 
131               displaySelect.innerHTML = null;
132 
133               // 以字符串数组的每个元素创建option，
134 
135               // 并将这些选项添加到下拉列表中
136 
137               for (var i = 0 ; i < cityList.length ; i++){
138 
139                   // 创建一个<option.../>元素
140 
141                   var op = document.createElement("option");
142 
143                   op.innerHTML = cityList[i];
144 
145                   // 将新的选项添加到列表框的最后
146 
147                   displaySelect.appendChild(op);
148 
149               }
150 
151            }else{
152 
153               //页面不正常
154 
155               window.alert("您所请求的页面有异常。");
156 
157            }
158 
159        }
160 
161     }
162 
163 // 指定页面加载完成后指定change(id)函数
164 
165 document.body.onload = change(document.getElementById("first").value);
166 
167 </script>
168 
169 </body>
170 
171 </html>

采用GET请求将父菜单的ID作为参数发送，根据ID显示第二个下拉框的值。服务器响应页面的代码如下。 

程序清单：Ajax02request/get/second.jsp

<%@ page contentType="text/html; charset=UTF-8" language="java"%>

<%

    String idStr = (String)request.getParameter("id");

    int id = idStr == null ? 1 : Integer.parseInt(idStr);

    switch(id){

       case 1:

           out.println("上海$广州$北京");

           break;

       case 2:

           out.println("华盛顿$纽约$加州");

           break;

       case 3:

           out.println("东京$大板$福冈");

           break;

    }

%>

 上面jsp页面作为服务器响应非常简单：先读取请求参数，当请求id为1时，返回三个中国城市；当请求id为2时，返回三个美国城市；当请求id为3时，返回三个日本城市。

在浏览器中浏览该页面，并改变左边下拉列表的选中项，将看到下图效果：

 

　　2. 使用POST方式

 

POST请求的适应性更广，可使用更大的请求参数。而且POST请求的请求参数在页面跳转时，不能在链接地址中直接看到，保密性更好。因此在使用Ajax发送请求时，尽量采用POST方式而不是GET方式发送请求。发送POST请求通常需要如下三个步骤：

  • 使用open方法打开连接时，指定使用POST方式发送请求。
  • 设置正确的请求头，POST请求通常应设置Content-Type请求头。
  • 发送请求，把请求参数转为查询字符串，将该字符串作为send（）方法的参数。

对于上面的应用，使用POST方式实现，只需要改一个请求的发送方法，如下所示：

// 事件处理函数，当下拉列表选择改变时，触发该事件
    function change(id) {
        // 初始化XMLHttpRequest对象
        createXMLHttpRequest();
        // 设置请求响应的URL
        var uri = "second.jsp";
        // 设置处理响应的回调函数
        xmlrequest.onreadystatechange = processResponse;
        // 设置以POST方式发送请求，并打开连接
        xmlrequest.open("POST", uri, true); 
        // 设置POST请求的请求头,表示数据被编码为名称/值对
        xmlrequest.setRequestHeader("Content-Type"
            , "application/x-www-form-urlencoded");
        // 发送请求
        xmlrequest.send("id="+id);
    }

其余的部分则无须改变，应用的执行效果与采用GET方式发送请求的效果完全一样。事实上，即使采用POST方式发送请求，一样可以将请求参数附加在请求的URL之后。如果send方法没有请求参数，应传入null，因为有些浏览器规定了send方法必须传入参数。代码如下：

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

 

posted @ 2017-08-30 11:33  silvan_happy  阅读(2068)  评论(0)  编辑  收藏  举报