JavaWeb-Ajax&Jquery

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

​

須要獲取數據


    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. 定義首頁

    

    

   黑馬

   <input type="text" name="word" id="word" style="width: 600px ; height: 50px  ;font-size: 20px;">
   <input type="button" value="黑馬一下"  style="height: 55px ; width: 100px ; ">
   
   <div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid blue; display: none"></div>

    

    

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"%>

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

${wordBean.words}

使用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數據