Ajax学习案例一

最新推荐文章于 2020-03-27 13:44:05 发布

xingquanxiang

最新推荐文章于 2020-03-27 13:44:05 发布

阅读量162

点赞数

分类专栏： Ajax html

本文链接：https://blog.csdn.net/weixin_41808843/article/details/98486872

版权

html 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

前端html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        // 创建 XMLHttpRequest 对象
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        var count = 1;
        function fun() {
        // 建立连接

            xmlhttp.open("GET", "ajaxServlet?username=xqx&count="+count,true);
            xmlhttp.send();

            xmlhttp.onreadystatechange=function()
            {
                //XMLHttpRequest 的状态
                /**
                 *
                 * readyState
                 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成，且响应已就绪

                 status:
                    200: "OK"
                     404: 未找到页面
                 */
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    count++;
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
        }

    </script>
</head>
<body>
    <button id="but1" type="button" onclick="fun()">发送ajax请求</button>
    <input type="text" />
<div id="myDiv"></div>
</body>
</html>

后端servlet代码：（注意：继承HttpServlet类需要导入servlet-api.jar）

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * createAuthor：xingquanxiang
 * createTime：2019/8/5 13:44
 * description:
 */
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String count = req.getParameter("count");
        int count1 = Integer.parseInt(count);
        System.out.println("username = " + username);
        resp.setContentType("text/html; charset=utf-8");
        if(count1%2==1) {
            resp.getWriter().write("hello：" + username);
        }else{
            resp.getWriter().write("hello：" + "zyx");
        }
        System.out.println("count = " + count);
    }
}

代码写完，启动tomcat：

执行结果如下：

成功实现局部请求刷新！

xingquanxiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习案例一

前端html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // 创建 XML...
复制链接

扫一扫

专栏目录