Ajax&&jquery

Version:0.9StartHTML:00000097EndHTML:00073598StartFragment:00000199EndFragment:00073560#Ajax & Jquery

##Ajax

* 是什么?

> “Asynchronous Javascript And XML”（异步JavaScript和XML），

> 并不是新的技术，只是把原有的技术，整合到一起而已。

           1.使用CSS和XHTML来表示。

           2. 使用DOM模型来交互和动态显示。

           3.使用XMLHttpRequest来和服务器进行异步通信。

           4.使用javascript来绑定和调用。

* 有什么用?

> 咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。  就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。

##数据请求 Get

1.创建对象

            function  ajaxFunction(){

               var xmlHttp;

               try{ // Firefox, Opera 8.0+, Safari

                    xmlHttp=new XMLHttpRequest();

                }

                catch (e){

                   try{// Internet Explorer

                         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

                      }

                    catch (e){

                      try{

                         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

                      }

                      catch (e){}

                      }

                }

                return xmlHttp;

             }

    2. 发送请求

        //执行get请求

    function get() {

        //1. 创建xmlhttprequest 对象

        var request = ajaxFunction();

        //2. 发送请求。

        // http://localhost:8080/day16/demo01.jsp

        //http://localhost:8080/day16/DemoServlet01

        /*    

            参数一： 请求类型  GET or  POST

            参数二： 请求的路径

            参数三： 是否异步， true  or false

        */

        request.open("GET" ,"/day16/DemoServlet01" ,true );

        request.send();

    }

    如果发送请求的同时，还想获取数据，那么代码如下

    //执行get请求

    function get() {

        //1. 创建xmlhttprequest 对象

        var request = ajaxFunction();

        //2. 发送请求

        request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );

        //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法

        request.onreadystatechange = function(){

            //前半段表示 已经能够正常处理。  再判断状态码是否是200

            if(request.readyState == 4 && request.status == 200){

                //弹出响应的信息

                alert(request.responseText);

            }

        }

        request.send();

    }

##数据请求 Post

​

    //1. 创建对象

    function  ajaxFunction(){

       var xmlHttp;

       try{ // Firefox, Opera 8.0+, Safari

            xmlHttp=new XMLHttpRequest();

        }

        catch (e){

           try{// Internet Explorer

                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

              }

            catch (e){

              try{

                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

              }

              catch (e){}

              }

        }

        return xmlHttp;

     }

    function post() {

        //1. 创建对象

        var request = ajaxFunction();

        //2. 发送请求

        request.open( "POST", "/day16/DemoServlet01", true );

        //如果不带数据，写这行就可以了

        //request.send();

        //如果想带数据，就写下面的两行

        //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据

        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        //带数据过去  ， 在send方法里面写表单数据。 

        request.send("name=aobama&age=19");

    }

    需要获取数据

        function post() {

            //1. 创建对象

            var request = ajaxFunction();

            //2. 发送请求

            request.open( "POST", "/day16/DemoServlet01", true );

            //想获取服务器传送过来的数据， 加一个状态的监听。 

            request.onreadystatechange=function(){

                if(request.readyState==4 && request.status == 200){

                    alert("post："+request.responseText);

                }

            }

            //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据

            request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //带数据过去  ， 在send方法里面写表单数据。 

            request.send("name=aobama&age=19");

        }

##校验用户名是否可用

###1. 搭建环境

1. 页面准备

用户名:

密码

邮箱

简介

2. 数据库准备

###2. Servlet代码

        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        try {

            request.setCharacterEncoding("UTF-8");

            //1. 检测是否存在

            String name = request.getParameter("name");

            System.out.println("name="+name);

            UserDao dao = new UserDaomImpl();

            boolean isExist = dao.checkUserName(name);

            //2.  通知页面，到底有还是没有。

            if(isExist){

                response.getWriter().println(1);  //存在用户名

            }else{

                response.getWriter().println(2); //不存在该用户名

            }

        } catch (SQLException e) {

            e.printStackTrace();

        }

    }

###3. Dao代码

        public class UserDaomImpl implements UserDao{

            @Override

            public boolean checkUserName(String username) throws SQLException {

                QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());

                String sql = "select count(*) from t_user where username =?";

                runner.query(sql, new  ScalarHandler(), username);

                Long result = (Long) runner.query(sql, new  ScalarHandler(), username); 

                return result > 0 ;

            }

        }

###jsp页面显示

​

    function checkUserName() {

        //获取输入框的值 document 整个网页

        var name = document.getElementById("name").value; // value  value() val val()

        //1. 创建对象

        var request = ajaxFunction();

        //2. 发送请求

        request.open("POST"  ,"/day16/CheckUserNameServlet" , true );

        //注册状态改变监听，获取服务器传送过来的数据

        request.onreadystatechange = function(){

            if(request.readyState == 4 && request.status == 200){

                //alert(request.responseText);

                var data = request.responseText;

                if(data == 1){

                    //alert("用户名已存在");

                    document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";

                }else{

                    document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";

                    //alert("用户名未存在");

                }

            }

        }

        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        request.send("name="+name);

    }

##JQuery

* 是什么?

> javascript 的代码框架。

* 有什么用?

> 简化代码，提高效率。

* 核心

> write less do more , 写得更少，做的更多。

###load

    <a href="" onclick="load()">使用JQuery执行load方法</a>

    有两次刷新，  先走 onClick的方法，取到数据回来之后，赋值显示。 接着 走 href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。

    //找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示

    $("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {

            //找到id为text01的元素， 设置它的value属性值为 responseText 对应的值

            $("#aaa").val(responseText);

        }); 

###Get

    $.get("/day16/DemoServlet02"  , function(data ,status) {

            $("#div01").text(data);

        });

#赋值显示

* val("aa");

> 只能放那些标签带有value属性

* html("aa"); ---写html代码

* text("aa");

> 其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

###load & get

* load

$("#元素id").load(url地址);

$("#div1").load(serlvet); ---> 使用的get请求，回来赋值的时候， 使用text（）;去赋值

* get

语法格式 ： $.get(URL,callback);

        使用案例： $.get("/day16/DemoServlet02"  , function(data ,status) {

            $("#div01").text(data);

        });

* post

语法格式：$.post(URL,data,callback);

        function post() {

            $.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {

                //想要放数据到div里面去。 --- 找到div

                $("#div01").html(data);

            });

        }

###使用JQuery去实现校验用户名

        function checkUserName() {

            //1. 获取输入框的内容

            var name = $("#name").val();

            //2. 发送请求

            $.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){

                //alert(data);

                if(data == 1){//用户名存在

                    //alert("用户名存在");

                    $("#span01").html("<font color='red'>用户名已被注册</font>");

                }else{

                    //alert("用户名可用");

                    $("#span01").html("<font color='green'>用户名可以使用</font>");

                }

            } );

            //3. 输出响应的数据到页面上。

        }

## 实现百度搜索提示

###搭建环境

1. 定义首页

黑马

2. 定义数据库

###捕获键盘弹起

$(function(){

    $("#word").keyup(function() {

        alert("键盘弹起了..");

    })

});

###JS请求

    $(function(){

        $("#word").keyup(function() {

            //2。 获取输入框的值 

            //var word = $("#word").val();

            //this  对应就是执行这个方法的那个对象， $("#word")

            var word = $(this).val();

            if(word == ""){

                $("#div01").hide();

            }else{

                //3. 请求数据。

                $.post("find",{word:word} ,function(data , status){

                    //alert(data);

                    $("#div01").show();

                    $("#div01").html(data);

                });

            }

        })

    });

###Servlet代码

            protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            request.setCharacterEncoding("utf-8");

            try {

                //1. 先获取参数

                String word = request.getParameter("word");

                System.out.println("word="+word);

                //2. 让dao执行查询

                WordsDao dao = new WordsDaoImpl();

                List<WordBean> list = dao.findWords(word);

                for (WordBean wordBean : list) {

                    System.out.println("==="+wordBean.toString());

                }

                request.setAttribute("list", list);

                //3. 返回数据

                response.setContentType("text/html;charset=utf-8");

                //response.getWriter().write("数据是：");

                request.getRequestDispatcher("list.jsp").forward(request, response);

            } catch (SQLException e) {

                e.printStackTrace();

            }

        }

###list.jsp

        <%@ page language="java" contentType="text/html; charset=UTF-8"

            pageEncoding="UTF-8"%>

         <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

​

        <table style="width: 100%">

            <c:forEach items="${list }" var="wordBean">

                <tr>

                    <td>${wordBean.words}</td>

                </tr>

            </c:forEach>

        </table>

##使用JQuery实现 省市联动

###环境准备

1. 准备数据库

2 。 准备页面

        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

            <script type="text/javascript" src="js/city.js"></script>

            </head>

            <body>

            省份: <select name="province" id ="province">

                    <option value="" >-请选择 -

                    <option value="1" >广东

                    <option value="2" >湖南

                    <option value="3" >湖北

                    <option value="4" >四川

                </select>

            城市: 

                <select name="city" id="city">

                    <option value="" >-请选择 -

                </select>

            </body>

###XStream的使用

        //3. 返回数据。手动拼  ---> XStream  转化 bean对象成 xml

            XStream xStream = new XStream();

            //想把id做成属性

            xStream.useAttributeFor(CityBean.class, "id");

            //设置别名

            xStream.alias("city", CityBean.class);

            //转化一个对象成xml字符串

            String xml = xStream.toXML(list);

###JS代码

        $(function() {

        //1。找到省份的元素

        $("#province").change(function() {

            //2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据

            //$("#province").varl();

            var pid = $(this).val();

            /*<list>

                <city>

                    <id>1<id>

                    <pid>1</pid>

                    <cname>深圳</cname>

                </city>

                <city >

                    <id>2<id>

                    <pid>1</pid>

                    <cname>东莞</cname>

                </city>

            </list>*/

            $.post( "CityServlet",{pid:pid} ,function(data,status){

                //alert("回来数据了:"+data);

                //先清空以前的值：

                $("#city").html("<option value='' >-请选择-")

                //遍历： 

                //从data数据里面找出所有的city  ， 然后遍历所有的city。

                //遍历一个city，就执行一次function方法

                $(data).find("city").each(function() {

                    //遍历出来的每一个city，取它的孩子。 id , cname

                    var id = $(this).children("id").text();

                    var cname = $(this).children("cname").text();

                    $("#city").append("<option value='"+id+"' >"+cname)

                });

            } );

        });

    });

##服务器和客户端数据传输的方式

* xml

1

1

深圳

2

1

东莞

* json

阅读性更好 、 容量更小。

{"name":"aaa" , "age":19}

        把javaBean  转化成 json数据

        //3. 把list ---> json数据

            //JSONArray ---> 变成数组 ， 集合  []

            //JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}

            JSONArray jsonArray = JSONArray.fromObject(list);

            String json = jsonArray.toString();

##使用json格式数据显示省市联动效果

    serlvet代码：

        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        try {

            //1. 获取参数

            int pid = Integer.parseInt(request.getParameter("pid"));

            //2 找出所有的城市

            CityDao dao = new CityDaoImpl();

            List<CityBean> list = dao.findCity(pid);

            //3. 把list ---> json数据

            //JSONArray ---> 变成数组 ， 集合  []

            //JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}

            JSONArray jsonArray = JSONArray.fromObject(list);

            String json = jsonArray.toString();

            response.setContentType("text/html;charset=utf-8");

            response.getWriter().write(json);

        } catch (SQLException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        };

    }

    js代码

        $(function() {

            //1。找到省份的元素

            $("#province").change(function() {

                //2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据

                //$("#province").varl();

                var pid = $(this).val();

                /*[

                    {

                        "cname": "深圳",

                        "id": 1,

                        "pid": 1

                    },

                    {

                        "cname": "东莞",

                        "id": 2,

                        "pid": 1

                    }

                    ...

                ]*/

                $.post( "CityServlet02",{pid:pid} ,function(data,status){

                    //先清空

                    $("#city").html("<option value='' >-请选择-");

                    //再遍历，追加

                    $(data).each(function(index , c) {

                        $("#city").append("<option value='"+c.id+"' >"+c.cname)

                    });

                },"json" );

            });

        });

##总结

###Ajax  

    发送get请求

    发送post请求

    都要求带数据 + 获取数据＋　放置到元素上。

###JQuery

    发送get请求

    发送post请求

    都要求带数据 + 获取数据＋　放置到元素上。

---------------------------------------

    1. 服务器返回xml数据

    2. 服务器返回json数据