Ajax

AJAX的概述

什麼是AJAX
    AJAX:異步的 JavaScript And XML.
    用的是老的技術,用的是新的思想.
AJAX的功能:完成頁面的局部刷新,不中斷用戶的體驗.
    早期的時候JS技術根本不受重視.後臺開發人員常常將JS當成一種玩具式語言.JS中有一個對象XMLHttpRequest對象能夠向服務器異步發送請求.傳統的B/S結構的軟件,全部實現功能都須要在服務器端編寫代碼(胖服務器).如今有了AJAX之後,能夠將部分代碼寫到客戶端瀏覽器(RIA:Rich Internet Application).FLEX:AS腳本編程.
    XML:使用XML作爲數據傳遞的格式;JSON,也是一種傳輸格式。

XMLHttpRequest

屬性:
* readyState            :XMLHttpRequest的狀態
　　狀態         名稱     描述
　　0     Uninitialized     初始化狀態。XMLHttpRequest 對象已建立或已被 abort() 方法重置。
　　1     Open             open() 方法已調用，可是 send() 方法未調用。請求尚未被髮送。
　　2     Sent             Send() 方法已調用，HTTP 請求已發送到 Web 服務器。未接收到響應。
　　3     Receiving         全部響應頭部都已經接收到。響應體開始接收但未完成。
　　4     Loaded     HTTP     響應已經徹底接收。
* onreadystatechange    :當XMLHttpRequest狀態改變的時候觸發一個函數.
* status                :得到響應的狀態碼. 200 , 404 ...
* responseText            :得到響應的文本數據.
* responseXML            :得到響應的XML的數據.

方法:
* open(請求方式,請求路徑,是否異步)        :異步去向服務器發送請求.
* send(請求參數)                        :發送請求.
* setRequestHeader(頭信息,頭的值)        :處理POST請求方式的中文問題.

建立XMLHttpRequest對象

IE：將XMLHttpRequest對象封裝在一個ActiveXObject組件。
Firefox：直接就能夠建立XMLHttpRequest對象。

function createXmlHttp(){
   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;
 }

 

AJAX的入門

AJAX的編寫的步驟
* 第一步：建立一個異步對象.
* 第二步：設置對象狀態改變觸發一個函數.
* 第三步：設置向後臺提交的路徑
* 第四步：發送請求.
GET方式提交請求

function ajax_get() {
    // 1.建立異步對象
    var xhr = createXMLHttp();
    // 2.設置狀態改變的監聽 回調函數.        //3和4這兩步放在2以前更好理解
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){ // 請求發送成功
            if(xhr.status == 200){ // 響應也成功
                // 得到響應的數據:
                var data = xhr.responseText;
                // 將數據寫入到DIV中:
                document.getElementById("d1").innerHTML = data;
            }
        }
    }
    // 3.設置請求路徑
    xhr.open("GET","/day15/ServletDemo1?name=aaa&pass=123",true);
    // 4.發送請求
    xhr.send(null);
}

POST方式提交請求

function ajax_post(){
    // 建立異步對象:
    var xhr = createXMLHttp();
    // 設置監聽:
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                document.getElementById("d1").innerHTML = xhr.responseText;
            }
        }
    }
    // 打開路徑:
    xhr.open("POST","/day15/ServletDemo1",true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//必須在xhr.open()的後面
    // 發送請求:
    xhr.send("name=張三&pass=123");        //發送了中文參數,要在路徑的對象中,進行轉碼request.setCharacterEncoding("UTF-8");
}

異步校驗用戶名
【步驟一】：建立表和數據庫:
【步驟二】：設計一個註冊頁面
【步驟三】：在用戶名的文本框中使用onblur事件觸發一個函數.
【步驟四】：AJAX的異步操做,將文本框的值傳入到Servlet中.
【步驟五】：Servlet中根據傳入的用戶名去數據庫進行查詢.
【步驟六】：查詢到了說明用戶名已經被佔用,沒有查詢到說明用戶名能夠使用.

建立數據庫和表:
create database web_15;
use web_15;
create table user(
    id int primary key auto_increment,
    username varchar(20),
    password varchar(20),
    nickname varchar(20),
    type varchar(20)
);
insert into user values (null,'aaa','111','小鳳','user');
insert into user values (null,'bbb','111','小森','user');

代碼實現:
function checkUsername(){
    // 得到文本框的值:
    var username = document.getElementById("username").value;
    // 建立異步對象:
    var xhr = createXMLHttp();
    // 設置監聽:
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                var data = xhr.responseText;
                if(data == 1){
                    document.getElementById("s1").innerHTML = "<font color='green'>用戶名能夠使用</font>";
                    document.getElementById("regBut").disabled = false;
                }else if(data == 2){
                    document.getElementById("s1").innerHTML = "<font color='red'>用戶名已經被佔用</font>";
                    document.getElementById("regBut").disabled = true;
                }
            }
        }
    }
    // 打開鏈接:
    xhr.open("GET","/day15/ServletDemo2?username="+username,true);
    // 發送請求:
    xhr.send(null);
}

異步校驗用戶名

 

【JQuery的AJAX】
JQuery的AJAX部分方法
　　Jq的對象.load(路徑,參數,回調函數);
　　$.get(路徑,參數,回調函數,數據類型);
　　$.post(路徑,參數,回調函數,數據類型);
　　$.ajax();
　　serialize(); -- JQ的AJAX傳遞參數的時候須要使用的方法.

JQ異步校驗用戶名
【步驟一】：建立表和數據庫:
【步驟二】：設計一個註冊頁面
【步驟三】：在用戶名的文本框中使用onblur事件觸發一個函數.
【步驟四】：使用JQ的AJAX完成異步操做,將文本框的值傳入到Servlet中.
【步驟五】：Servlet中根據傳入的用戶名去數據庫進行查詢.
【步驟六】：查詢到了說明用戶名已經被佔用,沒有查詢到說明用戶名能夠使用.

$(function(){
    $("#username").blur(function(){
        // 得到文本框的值:
        var username = $(this).val();
        // 演示load方法:
        // $("#s1").load("/day15/ServletDemo3",{"username":username});
        // 演示get/post方法:
        $.get("/day15/ServletDemo3",{"username":username},function(data){
            if(data == 1){
                $("#s1").html("<font color='green'>用戶名能夠使用</font>");
                $("#regBut").attr("disabled",false);
            }else if(data == 2){
                $("#s1").html("<font color='red'>用戶名已經存在</font>");
                $("#regBut").attr("disabled",true);
            }
        });
    });
});

JQ異步校驗用戶名

 

JQ完成輸入框提示
【步驟一：】設計一個商品的搜索頁面.
【步驟二：】keyup事件觸發一個函數.
【步驟三：】得到文本框的值,提交到Servlet中
【步驟四：】在Servlet中根據提交名稱查詢相應信息.(顯示5個)

create table words(
    id int primary key auto_increment,
    word varchar(20)
);

代碼實現:
$(function(){
    // 爲文本框綁定事件:
    $("#word").keyup(function(){
        // 得到文本框的值:
        var word = $(this).val();
        // 異步發送請求:
        if(word != ""){
            $.post("/day15/ServletDemo4",{"word":word},function(data){
                $("#d1").show().html(data);
            });
        }else{
            $("#d1").hide();
        }
    });
});

JQ完成輸入框提示

 

JQ完成省市聯動
【AJAX的響應的數據】
文本,一段HTML的數據,XML,JSON
【使用工具生成XML的文件】
一般使用xStream工具. 將集合,數組,對象轉成XML.

【步驟一】：使用註冊頁面中省市的下拉列表.
【步驟二】：當省份發生變化,觸發一個事件.
【步驟三】：將選擇的省份的信息傳入到Servlet中.
【步驟四】：根據省份信息查詢市的信息.
【步驟五】：將查詢到市的信息轉成XML.
【步驟六】：得到XML的指定信息,顯示到第二個列表中.

Jsp引入的js把選擇的省份id傳入,再把結果返回給js中function的data
public class ServletDemo6 extends HttpServlet { 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //接收數據
            String pid = request.getParameter("pid");
            //調用業務層查詢全部的市的信息
            ProvinceService provinceService = new ProvinceService();
            List<City> list = provinceService.findByid(pid);
            //將list生成XML
            XStream xStream = new XStream();
            //修改標籤名
            xStream.alias("city", City.class);    //改變list中對象的生成的標籤名
            //將類中屬性做爲標籤的屬性
            /*xStream.useAttributeFor(City.class, "cid");
            xStream.useAttributeFor(City.class,"cname");
            xStream.useAttributeFor(City.class,"pid");*/
            
            String xmlStr = xStream.toXML(list);
            //System.out.println(xmlStr);
            response.setContentType("text/xml;charset=UTF-8");
            response.getWriter().println(xmlStr);
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException();
        }
    }
...
}

$(function(){
    // 爲省份下拉列表綁定事件:
    $("#province").change(function(){
        // 得到選中的省份的id:
        var pid = $(this).val();
        // alert(pid);
        $.post("/day15/ServletDemo6",{"pid":pid},function(data){
            // alert(data);
            var $city = $("#city");
            $city.html("<option>-請選擇-</option>");
            $(data).find("city").each(function(){
                var cid = $(this).children("cid").text();
                var cname = $(this).children("cname").text();
                
                $city.append("<option value='"+cid+"'>"+cname+"</option>");
            });
        });
    });
});

JQ完成省市聯動

 

JQ完成省市聯動——使用JSON做爲響應數據
JSONLIB 轉換JSON數據
　　JSONArray：將數組或List集合轉成JSON。
　　JSONObject：將對象或Map集合轉成JSON。

Jsp引入的js把選擇的省份id傳入,再把結果返回給js中function的data
public class ServletDemo8 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            String pid = request.getParameter("pid");
            ProvinceService provinceService = new ProvinceService();
            List<City> list = provinceService.findByid(pid);
            
            //將list集合轉成json
            JsonConfig config = new JsonConfig();
            config.setExcludes(new String[]{"pid"});
            JSONArray jsonArray = JSONArray.fromObject(list,config);    //生成的json對象不包含pid
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().println(jsonArray.toString());
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException();
        }
    }
...
}

$(function(){
    // 爲省份下拉列表綁定事件:
    $("#province").change(function(){
        var pid = $(this).val();
        $.post("/day15/ServletDemo8",{"pid":pid},function(data){
            // alert(data);
            // JS識別JSON:
            // var json = eval(data);
            var $city = $("#city");
            $city.html("<option>-請選擇-</option>");
            $(data).each(function(i,n){
                // alert(n.cname);
                $city.append("<option value='"+n.cid+"'>"+n.cname+"</option>");
            });
        },"json");
    });
});

JQ完成省市聯動——使用JSON做爲響應數據