javaWeb核心技术第十三篇之Ajax

Posted haizai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);
                

 

以上是关于javaWeb核心技术第十三篇之Ajax的主要内容,如果未能解决你的问题,请参考以下文章

javaWeb核心技术第十四篇之easyui

javaWeb核心技术第十二篇之分页和条件

javaWeb核心技术第五篇之jQuery

SpringCloud- 第十三篇 Zuul高层架构

javaWeb核心技术第九篇之JSP

javaWeb核心技术第八篇之Cookie和Session