Ajax&Java - flypie

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）

是一种基于浏览器的XMLHttpRequest对象实现的创建交互式网页应用的网页开发技术。

用JS创建XMLHttpRequest对象并调用其方法实现基本的Ajax请求：

            xmlhttp = new XMLHttpRequest();         //创建XMLHttpRequest对象
            xmlhttp.onreadystatechange = f;         //设置请求完成后的回调函数
            xmlhttp.open("GET", url, true);         //打开指定的url
            xmlhttp.send();                         //发送请求

这发送的是一个GET请求，如果要发送POST请求要记得设置请求投（GET请求数据可以通过url附加，POST请求可以发送时附加）

            xmlhttp = new XMLHttpRequest();         //创建XMLHttpRequest对象
            xmlhttp.onreadystatechange = f;         //设置请求完成后的回调函数
            xmlhttp.open("POST", url, true);        //打开指定的url
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")       //设置请求头
            xmlhttp.send(data);                 //发送请求，并附加数据

注意：回调函数务必在发送请求前设置

回调函数的内容：

            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    var data = xmlhttp.responseText;
                    var test = document.getElementById("test");
                    test.innerHTML += data + "<br>";
                }
            }

其中xmlhttp.readyState表示请求执行的状态（4表示请求完成），而xmlhttp.status表示http的响应返回状态码。

下面写一个小例子实现Ajax向后端请求数据：

服务端代码（Java实现）

@WebServlet(name = "AddServlet", urlPatterns = "/AddServlet")
public class AddServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().write("helloworld");
    }
}

客户端代码：

<html>
<head>
    <script>

        var xmlhttp;

        function loadGetHttp(url, f) {
            xmlhttp = new XMLHttpRequest();         //创建XMLHttpRequest对象
            xmlhttp.onreadystatechange = f;         //设置请求完成后的回调函数
            xmlhttp.open("GET", url, true);         //打开指定的url
            xmlhttp.send();                         //发送请求
        }

        function loadPostHttp(url, data, f) {
            xmlhttp = new XMLHttpRequest();         //创建XMLHttpRequest对象
            xmlhttp.onreadystatechange = f;         //设置请求完成后的回调函数
            xmlhttp.open("POST", url, true);        //打开指定的url
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")       //设置请求头
            xmlhttp.send(data);                 //发送请求，并附加数据
        }

        function cfunc() {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    var data = xmlhttp.responseText;
                    var test = document.getElementById("test");
                    test.innerHTML += data + "<br>";
                }
            }
        }

        window.onload = function () {
            var button = document.getElementById("button");
            button.onclick = function () {
                loadGetHttp("AddServlet", cfunc);
            }
        }

    </script>
</head>
<body>

<input type="button" id="button" value="test"/>

<div id="test"></div>

</body>
</html>

这里写了两个通用的函数loadGetHttp和loadPostHttp来实现请求的加载，这样在使用时只要传人对应的URL和回调函数即可。

这里只是简单的举例子，实际使用中会将数据打包成XML或JSON格式，也有很多方便的实现Ajax的类库（如Jquery、EXT.JS......)

posted on 2016-01-23 22:01 flypie 阅读(1107) 评论(0) 收藏举报

刷新页面返回顶部