ajax与服务器交互

最新推荐文章于 2021-09-25 22:54:13 发布

千篇不一律

最新推荐文章于 2021-09-25 22:54:13 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_41063141/article/details/80572671

版权

这是我的第一篇技术博文，希望对大家有用。

注【相关代码点击这里下载：https://pan.baidu.com/s/1Nzep-O5OUdr9XfQDA8c8PA 密码：m0yt 】

下面是操作步骤：

1.打开记事本，输入以下代码，将文件保存为interActive.html格式

2.打开myeclipse（不要用eclipse），新建Servlet类，输入代码，再开启服务器

3.演示效果如下

前台程序代码如下：

<html>
<head>
    <meta charset="utf-8"/>
    <script>
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                var ajax;
                try {
                    ajax = new XMLHttpRequest();
                } catch (e) {
                    ajax = new ActiveXObject("microsoft.xmlhttp");
                }
                var url
                    = "http://localhost:8080/interActive/servlet/InterActive";
                var method = "GET";
                ajax.open(method, url, true);
                ajax.send();
                ajax.onreadystatechange = function () {
                    if (ajax.readyState == 4 && ajax.status == 200) {
                        alert(ajax);
                        var curTime = ajax.responseText;
                        document.getElementById("time").innerHTML = curTime;
                    }
                }
// alert(ajax);
            }
        }
    </script>
</head>
<body>
    <input id="btn" type="button" name="btn" value="Òì²½ÇëÇó"/>
    <br>
    <span id="time"></span><br>
</body>
</html>

记事本编写post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post test</title>>
    <script>
        function send(type) {
            url = "127.0.0.1:9999/base/file/getFile/";
            xhr = new XMLHttpRequest();
            xhr.open("post", url, true);
            var data;
            if (type === "formdata") {
                data = new FormData();
                data.append("key", "value");
            } else if (type === "json") {
                xhr.setRequestHeader("Content-Type", "application/json");
				xhr.setRequestHeader("x-gasc-uid", 123456);
                data = JSON.stringify({"fileId": 723587607304339456});
            } else if (type === "text") {
                data = "key=value";
            } else if (type === "www") {
                // 这个header 其实是 传统post 表单的格式
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                data = "key=value";
            }
            xhr.send(data);
        }

    </script>
</head>
<body>
<div>
    <input type="button" onclick="send('formdata')" value="FormData"/>
    <br/>
    <input type="button" onclick="send('json')" value="application/json"/>
    <br/>
    <input type="button" onclick="send('text')" value="text"/>
    <br/>
    <input type="button" onclick="send('www')" value="application/x-www-form-urlencoded"/>
</div>
</body>
</html>>

后台程序如下：

package interActive;

import java.io.IOException;

import java.io.PrintWriter;

import java.text.SimpleDateFormat;

import java.util.Date;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


public class InterActive extends HttpServlet {

    @Override

    protected void doGet(HttpServletRequest request, HttpServletResponse

            response)

            throws ServletException, IOException {

        Date curTime = new Date();

        SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

        String format = sf.format(curTime);

        response.setContentType("text/html;charset=utf-8");

//

        传递数据回页面

        response.setHeader("Access-Control-Allow-Origin", "*");

        response.setHeader("Access-Control-Allow-Methods", "POST,GET");

        PrintWriter out = response.getWriter();

        out.write("

                现在时间是：

                "+format);

                out.close();

    }

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException {

        doGet(req, resp);

    }

}