ajax----------4、POST请求示例_ajax post请求参数示例-优快云博客

本文链接：https://blog.youkuaiyun.com/android_zyf/article/details/75059191

一,建立一个Servlet

很简单的通过response输出一个响应体.

@WebServlet(name = "AServlet",urlPatterns = "/servlet/as")
public class AServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String user = request.getParameter("user");
        String password = request.getParameter("password");
        System.out.println("POST: hello ajax---");
        response.getWriter().print("POST: Hello ajax <br/> user="+user+"&nbsp&nbsp"+"password="+password);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("hello ajax");
        response.getWriter().print("Hello ajax");
    }
}

二,建立一个Ajax2.jsp文件

在该jsp文件中,建立一个button标签,一个h1标签.
当点击button标签的时候,通过Ajax发起请求,访问服务器中的AServlet,将返回的响应体中的内容,设置到h1标签中.


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax示例2:POST请求</title>
    <script type="text/javascript">

        function createXMLHttpRequest() {
            try {
                //大多数浏览器
                return new XMLHttpRequest();
            } catch (e) {
                try {
                    //IE6.0版本
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        //IE5.5及更早版本
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {
                        alert("三个都不符合,这是不是就尴尬了");
                        throw e;
                    }
                }
            }

        }


        //文档加载完毕后执行
        window.onload = function () {
            //获得id为btn的按钮元素
            var btn = document.getElementById("btn");
            //当按钮被点击时执行
            btn.onclick = function () {
                /**
                 * 四步Ajax操作
                 * 发送请求,得到服务器的响应
                 * 将响应结果响应到h1元素中
                 */
                    //1,得到异步对象
                var xmlHttp = createXMLHttpRequest();

                /******************POST请求******************/
                //2,打开与服务器的连接
                //参数1:指定请求方式
                //参数2:指定请求的URL
                //参数3:指定是否为异步请求
                xmlHttp.open("POST", "/hajax/servlet/as", true);

                // 关于第二个参数的写法:当浏览器显示当前页面时,是以html的方式显示的,
                // 也就是说,当服务器将当前页面发送给浏览器时,已经将.jsp文件转换成.html文件了
                // 所以到客户端的时候,已经没有这种jsp标签了,到客户端的时候,就等同于:/hajax/servlet/as了
                <%--xmlHttp.open("GET","<c:url value="servlet/as"/>",true);--%>


                /******************设置请求头:Content-Type******************/
                xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                //3,发送请求
                /*************因为有请求体才使用POST请求,这里肯定是要将请求体传进去的*************/
                xmlHttp.send("user=张三&password=123");

                //4,给异步对象xmlHttp的onreadystatechange事件注册监听器
                xmlHttp.onreadystatechange = function () {
                    //当xmlHttp的状态发生变化时执行
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        //若xmlHttp的状态为4(服务器响应结束了),服务器的响应码为200(说明响应成功)

                        //获取服务器的响应结果
                        var text = xmlHttp.responseText;

                        //获取h1元素
                        var h1 = document.getElementById("h1");

                        //设置内容
                        h1.innerHTML = text;

                    }
                };
            };
        };
    </script>
</head>
<body>
<button id="btn">click here</button>
<h1 id="h1"></h1>
</body>
</html>

三,效果

AjaxPOST请求示例