ajax+servlet+css实现简单的页面刷新和显示控制

最新推荐文章于 2021-06-04 07:42:09 发布

xiaoyaoyukim

最新推荐文章于 2021-06-04 07:42:09 发布

阅读量1.2k

点赞数

文章标签： ajax css servlet xmlhttprequest jquery function

本文链接：https://blog.csdn.net/xiaoyaoyukim/article/details/6536222

版权

这两天主要学了下html，css以及javascript，顺带的看了下jquery，然后根据这些东西实现了一个简单的基于ajax的页面局部刷新

demo。应用到的主要技术有html，css，js，jquery，ajax，servlet，工具有tomcat+myeclipse，其实本来demo很简单，之所以

用的东西比较多是因为学习的需要。

主要的页面效果就是一个对一个html的form表单的输入进行局部刷新以显示提示功能，并且就不同的输入以不同的CSS控件控制其显示：

在这个窗口中输入的是a，下面的suggestion就提示所有以a开头的国家名称，同时可以看到这一行提示是红色背景的，且显示得不够规整，

这是我故意设置的通过CSS改变其显示效果，如果输入其他的字母，它相应的显示也会不一样。现在就具体的实现进行阐述：

页面展示文件：starcraft_apply.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>starcraft比赛报名</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" /> //引入相应的css文件
    <script src="lib/jquery.js" type="text/javascript"></script> //引入jquery的源文件，这样就可以使用jquery提供的功能了
    <script type="text/javascript">                                               注意jquery.js文件时放在当前html根目录的lib文件夹下
    function showHint(str)
    {
    var xmlhttp;
    if (str.length==0)
    {
    document.getElementById("txtHint").innerHTML="";
    return;
    }
    if (window.XMLHttpRequest)
     {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

//上面这一部分主要是创建XMLHttpRequest对象，XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。这也是ajax的精髓。
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    var s = xmlhttp.responseText;
    var head = s.substring(0,1).toLowerCase();
    if(head=="a"){
    $(document).ready(function() {
        $("#txtHint").addClass("red"); //运用jquery为id为txtHint的元素加上类名为red的格式控制，
    });
    }else {
        $("#txtHint").addClass("green");
    }
        }
    }
    xmlhttp.open("GET","http://localhost:8080/apply/servlet/GetHint?q="+str,true);
    xmlhttp.send();
    }
    </script>
</head>
<body>
    <h1>starcraft</h1>
    <a href="http://starcraft.org/">
    <img src="img/head_img.jpg" alt="starcraft" height="200" width="1000"/>
    </a>
    <p>
    <form action="">
    Country:<input type="text" id="txt1" οnkeyup="showHint(this.value)" />
    </form>
    <em>suggestion：</em><span id="txtHint"></span>
    <form>
    <br />
    gender:<input type="radio" name="sex" value="male"/> male
    <input type="radio" name="sex" value="female"/> female
    </form>
    <br />
    <form>
    race:
    <select name="race">
    <option value="Zerg">Zerg</option>Terran
    <option value="Terran">Terran</option>
    <option value="Protoss">Protoss</option>
    </select>
    </form>
    </p>
</body>
</html>

servlet的doGet方法：

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html");
        String[] countries = new String[]{"Albania","Afghanistan","Argentina","Egypt","Ethiopia","Ireland","Austria"
                ,"Australia","Macau","Bahamas","Paraguay","Brazil","Bulgaria","Belgium","Iceland","Poland","SouthKoera"
                ,"Denmark","China","Japan","America","England","Russia","France","Netherlands","Finland","Columbia"
                ,"Canada","Sweden","Switzerland"};
        String param = request.getParameter("q");
        String responseText = "";
        if(param.length() > 0) {
            for(int i=0; i<countries.length; i++) {
                if(param.toLowerCase().equals(countries[i].substring(0, param.length()).toLowerCase())) {
                    if(responseText=="") {
                        responseText = countries[i];
                    }else {
                        responseText = responseText + " , " +countries[i];
                    }
                }
            }
        }
        PrintWriter out = response.getWriter();
        if(responseText == "") {
            out.println("no suggestion");
        }else {
            out.println(responseText);
        }
        out.close();

} //这段代码主要实现的逻辑就是拿到requet的q参数的信息，然后拿到结果返回给显示页面，开始试验的时候发现返回的那个string一定

要设置为responseText才能在显示页面拿到结果，但后来再试验后发现不需要，这个也是情理之中的，至于为什么开始的时候改为responseText才有效可能是因为浏览器缓存导致界面刷不出来，反正做这类和浏览器相关的试验经常是功能实现正确，但是结果出不来。

相应的css代码：

style.css:

h1 {text-align:center; color:blue; font-size:50px; font-style:italic; background:yellow;}

p {color:black; font-size:20px; font-style:normal;}

.red { background-color: red; position:absolute; left:200px; top:400px;}

.green { background-color: green; position:absolute; left:250px; top:600px;}

整体逻辑比较简单，只为新手尝试。另外上面的功能其实用纯js也可以实现，现在再贴出用jquery实现其ajax方法的代码，其主要实现逻辑：

                               function(result){
                    var head = result.substring(0,1).toLowerCase();
                    if(head=="a"){
                    $(document).ready(function() {
                    $("#txtHint").addClass("red");
                    });
                    }else {
                    $("#txtHint").addClass("green");
                    }
                    $("#txtHint").html(result);
                });
            }
        });
    });
    </script>

这里我主要用的是jquery的get方法实现ajax调用，我看jquery的API文档说该方法会返回一个XMLHTTPRequest的超类，

但是我调用的时候发现返回一直为空，不知道为什么，所以我用的是直接将其result传入其内部需要自己定义的一个

callback函数，然后进行处理。

xiaoyaoyukim

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax+servlet+css实现简单的页面刷新和显示控制

这两天主要学了下html，css以及javascript，顺带的看了下jquery，然后根据这些东西实现了一个简单的基于ajax的页面局部刷新demo。应用到的主要技术有html，css，js，jquery，ajax，servlet，工具有tomcat+myeclipse，其实本来demo很简单，之所以用的东西比较多是因为学习的需要。主要的页面效果就是一个对一个html
复制链接

扫一扫