Ajax之基础运用

今天了解一下Ajax ,看到这个可能会觉得比较陌生，但是生活中经常会用到

作用呢：就是不跳转页面传递值（这样可以减少缓存刷新）

JavaScript：更新局部的网页

XML：一般用于请求数据和响应数据的封装

XMLHttpRequest对象：发送请求到服务器并获得返回结果

Ajax有三种传递传递data的方式：

• json字符串格式
• json格式
• 标准参数模式

今天了解的是字符串格式：

---

首先用from表单获取输入值：

<form action="">
        用户名：<input type="text" id="uname" ><br>
        密码：<input type="password" id="upwd" οnblur="login()"><br>
        <span id="sp"></span>
        <input  type="submit" value="登录">
        <input  type="reset" value="重置">
</form>

传给servlet,servlet连接数据库做出判断

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("来了 老弟");
        //接收数据
        
        String uname = req.getParameter("uname");
        String upwd = req.getParameter("upwd");
        System.out.println("uname:"+uname);
        System.out.println("upwd:"+upwd);
        resp.setCharacterEncoding("utf-8");
        
        //获取响应的 输出流
        PrintWriter out = resp.getWriter();
        UserBiz ub=new UserBiz_imp();
        User u=ub.login(uname, upwd);
        if(u!=null) {
            out.print("ok");
        }else {
            out.print("no");
        }
        
        out.close();
    }

接收判断值，做出反应

注意：readyState 对应数值的意思;

就绪状态码	说    明
0	XMLHttpRequest对象没有完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应，还没有结束
4	XMLHttpRequest对象读取响应结束

<script type="text/javascript">
    function  login() {
        //接收用户名
        var uname = document.getElementById("uname").value;
        var upwd = document.getElementById("upwd").value;
        //声明一个xmlhttpRequest对象
        var xmlhttp;
        try{
            xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
        }
        catch(e){
            xmlhttp=new XMLHttpRequest();
        }
        //连接服务器
        xmlhttp.open("post","LoginServlet?uname="+uname+"&upwd="+upwd,true);
        //设置请求头信息
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //设置回调函数
        xmlhttp.onreadystatechange=function(){
            //判断请求响应结束
            if(xmlhttp.readyState==4){
                //服务器正常
                if(xmlhttp.status==200){
                    //接收响应的数据
                    var str = xmlhttp.responseText;
                    alert(str);
                    if(str=="ok"){
                        document.getElementById("sp").innerHTML="✔";
                    }else{
                        document.getElementById("sp").innerHTML="×";
                    }
                }
            }
        }
        //发送
        xmlhttp.send(null);
    }

注意：如果接收到的值为集合，则需要

                    //把字符串解析为集合然后再遍历：
        如下：

            var slist = eval(str);
                    var tstr = "<table class="table table-hover" border='1' align='center'>";
                

                for(var i=0;i<slist.length;i++){
                        tstr+="<tr οnmοuseοver='over(this)' οnmοuseοut=out(this);>";
                            tstr+="<td>";
                                tstr+=slist[i].uidd;
                            tstr+="</td>";
                            
                            tstr+="<td>";
                                tstr+=slist[i].uname;
                            tstr+="</td>";
                            
                            tstr+="<td>";
                                tstr+=slist[i].upwd;
                            tstr+="</td>";
                            
                            tstr+="<td>";
                                tstr+=slist[i].uinfo;
                            tstr+="</td>";
                            
                        tstr+="</tr>";
                    }
                    tstr +="</table>";