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);
                }

原文地址:https://www.cnblogs.com/haizai/p/11442988.html

时间: 2024-11-05 18:51:49

javaWeb核心技术第十三篇之Ajax的相关文章

javaWeb核心技术第五篇之jQuery

- 概述 - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作.并且jQuery有非常丰富的插件,大多数功能都有相应的插件解决方案.jQuery的宗旨是write less, do more. (写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可 "eg:<script sr

javaWeb核心技术第七篇之HTTP、Tomcat、Servlet、Request和Response

- Web服务器 - 概念: - web资源: "英文直译"网"的意思 资源:一切数据文件 web资源:通过网络可以访问到的资源,通常指的是一切放在服务器上的文件" - web资源的分类: - 静态的web资源: " 内容是一成不变的" - 动态的web资源: " 内容有可能在不同的时间或者不同的人访问的时候会发生改变的" - web技术分类 - 静态的web技术 " 例如: html css js .....&qu

javaWeb核心技术第六篇之BootStrap

概述: Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 作用: 开发响应式的页面 响应式:就是一个网站能够兼容多个终端 节约开发成本,提高开发效率 入门: 下载BootStrap www.bootcss.com 官网地址 模版 1.导入BootStrap的css 2.导入jquery的js(1.8+) 3.导入BootStrap的js 4.设置视口(支持移动设备) <meta name="viewport"

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

会话技术: 会话是什么? 浏览器和服务器交互,浏览器打开网页访问服务器,会话开始,正常交互. 浏览器关闭,会话结束. 会话能干什么? 会话可以共享数据. Cookie和session将数据保存在不同的位置 进行数据共享 Cookie入门案例 1.创建一个cookie对象 a. Cookie cookie = new Cookie(String name,String value); 2.响应给浏览器 a.Response.addCookie(cookie) 3.再次请求时需要获得cookie a

javaWeb核心技术第十篇之Filter

Web中有三大组件(需要配置web.xml) servlet:服务器端的小程序. Filter(过滤器):运行在服务器,对请求的资源进行过滤,对响应进行包装. 经典案例: 自动登录,网站全局编码,非法文字过滤... Filter编写流程: 1.创建一个类,实现一个javax.servlet.Filter接口. 2.配置web.xml 配置解释如下: <!-- <filter>通知tomcat需要加载过滤器 <filter-name>给filter命名,名称任意,web.xml

第十三篇 Integration Services:SSIS变量

本篇文章是Integration Services系列的第十三篇,详细内容请参考原文. 简介在前一篇我们结合了之前所学的冒泡.日志记录.父子模式创建一个自定义的SSIS包日志记录模式.在这一篇,我们将升级我们的解决方案为SQL Server 2012 Integration Services,演示SSIS变量,变量配置和表达式管理动态值.在前面的练习中我们已经使用过变量,但我们没有深入学习,这一篇,我们将关注SSIS变量.…………一旦安装好,你可以设置主题颜色,工具->选项->环境->常

SQL Server 索引的自动维护 &lt;第十三篇&gt;

在有大量事务的数据库中,表和索引随着时间的推移而碎片化.因此,为了增进性能,应该定期检查表和索引的碎片,并对具有大量碎片的进行整理. 1.确定当前数据库中所有需要分析碎片的表. 2.确定所有表和索引的碎片. 3.考虑一下因素以确定需要进行碎片整理的表和索引. 高的碎片水平-avg_fragmentation_in_percent大于20%: 不是非常小的表或索引-也就是page_count大于8的: 4.整理具有大量碎片的表和索引: 这里给出一个样板SQL存储过程,它执行以下操作: 遍历系统上的

第二十三篇 责任与义务

第二十三篇  责任与义务 我们来到这个世界,本身就有自身的责任与义务.如果没有责任与义务,我们就失去了生活的意义,因为一个人必须活出价值才有意义:没有价值地活着,那就成为了宇宙的累赘.以这样的方式来为亲人们讲解我们的"责任与义务"非常有必要.如果一个人活在这个世界上都不明白自己的责任与义务是什么,那就会失去方向.这一篇我就为亲人们简单地讲解我们在这个宇宙中的责任与义务. 人类作为高智慧物种,如果没有责任与义务也就不会出现在宇宙中.因为创造者在创造我们人类这个物种的时候就给到了定位:也是

NHibernate 操作视图 第十三篇

NHibernate 操作视图 第十三篇 在NHibernate中,可以把视图当表一样操作,只需要记住一点就是,视图是只读的,因此映射实体的setter应该改为protected. 新建一个视图如下: 持久化类: public class CountryPersonModel { public virtual int PersonId { get; protected set; } public virtual string PersonName { get; protected set; }