• javaWeb核心技术第十三篇之Ajax


    Js--ajax--原理解释
            概述:异步刷新网页,不会刷新整个页面.
        
        Get原理:
                    <%@ page language="java" contentType="text/html; charset=UTF-8"
                pageEncoding="UTF-8"%>
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Insert title here</title>
    
            <script>
                function sendGetAjax(){
                    //下面的代码可以不需要练习  但不可以使用IE  浏览器兼容
                    
                    
                    //1.获得ajax引擎
                    var xmlHttp = new XMLHttpRequest();
                    
                    //2.设置回调函数--作用是 响应回来时 ajax引擎会调用回调函数 将数据返回
                    //回调函数将会被执行四次
                    xmlHttp.onreadystatechange = function(){
                        //判断 readyState 状态必须是4 表示响应结束
                        if(xmlHttp.readyState == 4 ){
                            //响应结束 不一定就是正确响应
                            //判断响应必须是成功 成功状态码是200
                            if(xmlHttp.status == 200){
                                //接受服务器的值
                                var textTemp = xmlHttp.responseText;
                                alert(textTemp);
                            }
                            
                            if(xmlHttp.status == 404){
                                alert("yyy");
                            }
                        }
                        
                    }
                    
                    //3.打开连接 建立连接
                    //参数1:请求方式 
                    //参数2:请求的路径
                    xmlHttp.open("get", "/ee66_day44/DemoServlet?username=jack2&nickname=rose2");
                    
                    //4.发送
                    //参数表示 请求体 
                    xmlHttp.send(null);
                }
            </script>
    
            </head>
            <body>
                <form action="/ee66_day44/DemoServlet" method="post">
                
                    <input type="text" name="username" value="jack"/>
                    <input type="text" name="nickname" value="rose"/>
                    <input type="submit"/>
                </form>
                <a href="javascript:void(0)" onclick="sendGetAjax()">点我发送ajax请求</a>
            </body>
            </html>
        
        Post原理:
            跟get方式相似,但需要在3和4中间加一个设置请求头的代码.
        
        Jquery -- ajax(重点)
            Jquery:底层就是js  特性:兼容浏览器,api都是封装好的.
            
            Get方式:
                            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
                <html>
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>Insert title here</title>
    
                <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
                <script>
                    function sendGetAjax(){
                        //1.导入jquery的类库
                        //2.jquery的api提供工具类
                        /**
                        url :请求的路径
                        params:请求参数
                            格式1:key=value&key=value...
                            格式2:{key:value,key:value..}  js对象
                        fn : 回调函数 function(data){}  data就是回调函数中服务器响应的数据
                        type : text 默认值 表示服务器响应的数据是文本  如果设置的是json 直接将字符串数据转换成对象
                        */
                        //$.get(url,params,fn,type);
                        //$.get("/ee66_day44/DemoServlet"); //应用场景 服务器统计访问人数
                        //$.get("/ee66_day44/DemoServlet","username=jack2&nickname=rose2");
                        //$.get("/ee66_day44/DemoServlet",{"username":"jack3","nickname":"rose3"});
                        $.get("/ee66_day44/DemoServlet","username=jack2&nickname=rose2",function(data){
                            alert(data);
                        },"text");
                    }
                </script>
    
                </head>
                <body>
                    <form action="/ee66_day44/DemoServlet" method="post">
                    
                        <input type="text" name="username" value="jack"/>
                        <input type="text" name="nickname" value="rose"/>
                        <input type="submit"/>
                    </form>
                    <a href="javascript:void(0)" onclick="sendGetAjax()">点我发送ajax请求</a>
                </body>
                </
                html>
        
        Post : 
            Post提交方式和get方式没有区别,参数一样,写法一样.
            如果涉及乱码get和post处理是不一样,建议post
        
        案例分析:
            1.失去焦点时发送ajax请求.
            2.编写函数.
            3.发送ajax请求,请求中携带参数.
                参数是username
            4.编写servlet代码.
            5.回调函数中处理响应数据
            if(1 失败) {
                用户名不可用,显示
                可用隐藏
            }else {
                用户名不可用 隐藏
                可用显示
            }
            protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            
            //1.获得
            String username = request.getParameter("username");
            //2.处理
            if("jack".equals(username)){
                //失败 返回1 
                //3.响应
                response.getWriter().print("1");
            }else{
                //成功 返回0 
                //3.响应
                response.getWriter().print("0");
            }
            
        
        }
        
        <script>
     
         //页面加载
         $(function(){
                //初始化 可用和不可用都需要隐藏
                $("#FailedId").hide();
                $("#SuccessId").hide();
                //绑定事件
                $("#username").blur(function(){
                    //获得参数
                    var usernameVal = $("#username").val();
                    //发送ajax请求  
                    $.post("${pageContext.request.contextPath}/CheckServlet",{"username":usernameVal},function(data){
                        if("1"==data){
                            //失败  用户名不可用显示 可用隐藏 
                            $("#SuccessId").hide();
                            $("#FailedId").show();
                        }else{
                            //成功 用户名不可用隐藏 可用显示
                            $("#SuccessId").show();
                            $("#FailedId").hide();
                        }
                    });
                });
            })
         </script>
        
        <div class="col-sm-4">
                        <span class="label label-success" id="SuccessId">用户名可用</span>
                        <span class="label label-danger" id="FailedId">用户名不可用</span>
        </div>
        
        Json(重点):
            Json是一种数据格式,用于通信获得数据传递数据方便.
            Json对象:
                Object:格式 {key:value,key:value....}  使用map,对象,描述
            Json数组:
                Object : 格式[obj,obj,obj...]    使用数组,list集合描述
            
            数组中可以嵌套对象,对象可以嵌套数组.
        Js--json
                    <script>
                        //js对象  json 的 和value必须用双引号包括起来  如果是数字 boolean 变量是不需要双引号的
                        var obj = {"a":"b","c":"d"};
                        //alert(obj.c);
                        
                        //var obj = "{'a':'b','c':'d'}";
                        //alert(obj.a);
                        //字符串 转换 对象
                        //1.eval可以将字符串转换成可执行的代码片段
                        //2.eval可以将字符串转换成对象
                        /* var objTemp =  eval( "(" + obj +")" );
                        alert(objTemp.a); */
                        
                        var arr = ["a" , "b" , 1 , true , obj];
                        alert(arr[4].a);
                        
                        
                        var obj2 = {"abc":arr};
                    </script>
        
            案例分析:自动联想功能
                需求:在文本框中输入值,动态的联想数据库中数据填充在下拉框下.
                    1.联想时,数据库中所有全部联想(查询所有),js前台的细节.
                    2.加上条件联想(根据条件查询)
    */                
                    首页:
                        文本框输入内容
                        1.文本框添加事件(keydown按下,keypress按住,keyup弹起)
                            使用keyup弹起事件
                        2.发送ajax,携带参数searchWord
                        3.编写servlet
                        4.回调函数中获得数据
                        将一根div显示,再往框里加数据,
                    
                    <script>
                        $(function(){
                            //1.给文本框绑定事件
                            $("#SearchId").keyup(function(){
                                //2.获得数据
                                var wordVal = $("#SearchId").val();
                                
                                if(""==wordVal){
                                    $("#completeShow").hide();
                                    return;
                                }
                                
                                //清空ul 
                                $("#showUI").html("");
                                
                                
                                //3.发送请求
                                $.post("${pageContext.request.contextPath}/SearchWordServlet",{"searchWord":wordVal},function(data){
                                    //4.遍历 往div中添加数据
                                    $(data).each(function(){
                                        //this 表示 被遍历的当前对象 当前对象表示product  List<Product>
                                        $("#showUI").append("<li class='list-group-item'><a href=''>"+this.pname+"("+this.pinyin+")"+"</a></li>");
                                    });
                                    //5.将div显示
                                    $("#completeShow").show();
                                    
                                },"json");
                            });
                        })
                    </script>
                    
                    <div id="completeShow">
                            <ul class="list-group" id="showUI">
                            </ul>
                    </div>
                    
                    服务器:servlet
                        1.获得
                        获得searchWord
                        2.处理
                        service.findByWord(searchWord)
                        返回值List<类名>
                        
                        3.响应
                        使用json-lib,将集合转换成json字符串
                    
                    public class SearchWordServlet extends HttpServlet {
                        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                            try {
                                //0.乱码
                                request.setCharacterEncoding("utf-8");
                                response.setHeader("content-type", "text/html;charset=utf-8");
                                //1.获得
                                String word = request.getParameter("searchWord");
                                //2.处理
                                ProductService  service = new ProductService();
                                List<Product> list = service.findByWord(word);
                                //3.响应
                                String json = JSONArray.fromObject(list).toString();
                                response.getWriter().print(json);
                            } catch (Exception e) {
                                e.printStackTrace();
                            }
                        }
                    public List<Product> findByWord(String word) throws SQLException {
                        QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource());
                        
                        String sql =" SELECT * FROM product WHERE pname LIKE ? OR pinyin LIKE ? ";
                        Object [] params = {
                                "%"+word+"%","%"+word+"%"
                        };
                        return queryRunner.query(sql, new BeanListHandler<Product>(Product.class), params);
                    }
  • 相关阅读:
    iOS 10 的杂碎资料
    MAC SVN Merge 操作
    iOS中AFNetworking2.0和AFNetworking3.0 的HTTPS的配置
    从字符串中获取指定字符内的内容
    判断是否是是全汉字、全字母、全数字、数字和字母等
    解析URL 获取某一个参数值
    长按TextField或TextView显示中文的粘贴复制
    TextField和TextView的限制输入长度
    抢购、距活动结束,剩余时间倒计时。
    Cell右滑 多个编辑选项栏
  • 原文地址:https://www.cnblogs.com/haizai/p/11442988.html
Copyright © 2020-2023  润新知