AJAX 学习笔记(7) 发送请求参数

最新推荐文章于 2023-02-02 14:56:13 发布

原创最新推荐文章于 2023-02-02 14:56:13 发布 · 911 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #function #servlet #server #button

开发专栏收录该内容

93 篇文章

订阅专栏

本文介绍了一种在Ajax应用中使用GET和POST方法发送请求的具体实现方式，并解释了为何要将时间戳追加到URL末尾以防止浏览器缓存请求结果。

在大多数情况下,向服务器发送一个请求而没有任何参数是没有意义的.

Ajax_Get_Post.aspx （原文件名：getAdnPostExample.html,本人想在.Net上改写）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_Get_Post.aspx.cs" Inherits="Ajax_Get_Post" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Sending Request Data Using Get and Post</title>
    <script type="text/javascript">
        var xmlHttp;

        function createXmlHttpRequest(){
            if(window.ActiveXObject){
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        else if(window.XmlHttpRequest){
            xmlHttp = new XmlHttpRequest;
            }
       }

        function createQueryString(){
            var firstName = document.getElementById("firstName").value;
            var middleName = document.getElementById("middleName").value;
            var birthday = document.getElementById("birthday").value;

            var queryString = "firstName=" + firstName + "&middleName=" + middleName + "&birthday=" + birthday;
            return queryString;
        }

        function doRequestUsingGET(){
            createXmlHttpRequest();
            var queryString = "Ajax_Get_Post.aspx?";
            queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();
            xmlHttp.onreadyStateChange = handleStateChange;
            xmlHttp.open("GET", queryString, true);
            xmlHttp.send(null);
        }

        function doRequestUsingPOST(){
            createXmlHttpRequest();
            var url = "Ajax_Get_Post.aspx?timeStamp=" + new Date().getTime();
            var queryString = createQueryString();

            xmlHttp.onreadyStateChange = handleStateChange;
            xmlHttp.open("POST", url, true);
            xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlHttp.send(queryString);
        }

        function handleStateChange(){
        if(xmlHttp.readyState == 4){
            if(xmlHttp.status == 200){
                parseReqults();
                }
            }
        }

        function parseReqults(){
            var responseDIV = document.getElementById("serverResponse");
            if(responseDIV.hasChildNodes()){
                responseDIV.removeChild(responseDIV.childNodes[0]);
            }

            var responseText = document.createTextNode(xmlHttp.responseText);
            responseDIV.appendChild(responseText);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>Enter Your First Name, Middle Name and Birthdy</h1>
    <table>
    <tbody>
    <tr>
    <td>First Name:</td>
    <td><input type="text" id="firstName" /></td>
    </tr>
    <tr>
    <td>Middle Name:</td>
    <td><input type="text" id="middleName" /></td>
    </tr>
    <tr>
    <td>Birthday:</td>
    <td><input type="text" id="birthday" /></td>
    </tr>
    </tbody>
    </table>
    <input type="button" value="Send paramenters using GET" onclick="doRequestUsingGET();" />
    <br />
    <input type="button" value="Send paramenters using POST" onclick="doRequestUsingPOST();" />

    <br />
    <h2>Server Response:</h2>
    <div id="serverResponse"></div>
    </form>
</body>
</html>

请问下面这段Java Servlet 代码怎么改写，才能在Ajax_Get_Post.aspx 运行起来??

                 //Process the request in method processRequest
                 processRequest(request, response, "POST");
                }
         }