JavaWeb基礎知識day15——Ajax技術介紹

案例1-使用原生的ajax判斷使用者名是否占用(了解)

需求:

    當我們在注冊頁面上輸入使用者名之後,點選下一個地方,去資料庫中查詢有無該使用者名,最後提示資訊

技術分析:

    ajax

ajax

    異步JavaScript和XML,

    AJAX 是一種用于建立快速動态網頁的技術。

    通過在背景與伺服器進行少量資料交換，AJAX 可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

    傳統的網頁（不使用 AJAX）如果需要更新内容，必須重載整個網頁頁面。

/

ajax入門程式:

    步驟:

        1.建立一個核心對象 XMLHttpRequest

            xmlhttp = null;

            if (window.XMLHttpRequest) {// code for IE7, Firefox, Opera, etc.

                xmlhttp = new XMLHttpRequest();

            } else if (window.ActiveXObject) {// code for IE6, IE5

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

            }

        2.編寫一個回調函數

            xmlhttp.onreadystatechange=function(){

                函數體;

            }

        3.編寫請求方式和請求的路徑(open操作)

            xmlhttp.open("post/get",url);

        4.發送請求(send操作)

            xmlhttp.send();

ajax-api詳解

常用屬性:

    onreadystatechange:檢測readyState狀态改變的時候

    readyState:ajax核心對象的狀态

        0:核心對象建立

        1:調用了open方法

        2:調用了send方法

        3:部分響應已經生成(沒有意思)

        4:響應已經完成(使用的是這個狀态)

    status:狀态碼

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

        }

    responseText:響應回來的文本

常用方法:

    open("請求方式","請求路徑"[,"是否異步"]):設定請求的方式和請求的路徑

    send(["參數"]):發送請求 參數是請求方式為post的時候的參數

    setRequestHeader("content-type","form表單enctype屬性"):設定post請求的參數的類型 必須放在send方法之前.

///

案例2-使用jquery的ajax判斷使用者是否被占用

技術分析:

    jquery中的ajax

///

四種:

    了解:jquery對象.load(url,params,function(資料){});

    ★: $.get(url,params,function(資料){},type);

        發送get請求的ajax

            url:請求的路徑

            params:請求的參數 參數為key\value的形式 key=value  {"":"","":""}

            fn:回調函數 參數就是伺服器發送回來的資料

            type:傳回内容格式，xml, html, script, json, text, _default。    以後用"json"

    ★: $.post(url,params,function(資料){},type);

        發送post請求的ajax

        若結果為json格式,  列印傳回值的時候是一個對象 

            例如若json為 {"result":"success","msg":"成功"}

            擷取msg 隻需要    參數.msg

    了解:

        $.ajax([選項]);

            選項的可選值:

                url:請求路徑

                type:請求方法

                data:發送到伺服器的資料

                success:fn 成功以後的回調

                error:fn 異常之後的回調

                dataType:傳回内容格式 經常使用json

                async:設定是否是異步請求

            例如:

                $.ajax({

                    url:"/day15/demo1",

                    type:"post",

                    data:"username=tom",

                    success:function(d){

                        alert(d.msg);

                    },

                    error:function(){},

                    dataType:"json"

                });

//

步驟分析:

    将js原生ajax修改成jquery的ajax

案例3-模仿百度搜尋

需求:

    在一個文本框中輸入一段内容,keyup的時候發送一個ajax請求,去資料庫中查找相應的内容,在頁面上展示

步驟分析:

    1.表

        create table keyword(

            id int primary key auto_increment,

            kw varchar(20)

        );

    2.頁面

    3.在文本框輸入内容 keyup的時候 發送ajax請求 将輸入值傳遞到背景

    4.将傳回的資料展示

///

案例4-省市關聯

需求:

    先有一個省份的下拉選,根據選擇省份,進而動态的市下拉選中加載所有的市.

步驟分析:

    1.表

    2.頁面上有兩個下拉選 省份的下拉選一般是固定的 頁面加載的時候讀取所有的省份

    3.當省份改變的時候,擷取省份的資訊,發送一個ajax請求,去市的表中查詢相應省份的所有市,然後将他們加載到市下拉選上

    4.selectProServlet selectCityServlet

    //

技術分析:

    json

        JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。它基于ECMAScript的一個子集。

    json格式:

        格式1:value可以為任意值

            {"key":value,"key1":value1}

        格式2:e可以為任意值

            [e1,e2]

    jsonlib工具類,可以使對象轉換成json資料

        1.導入jar包

        2.使用api

            JSONArray.fromObject(對象)  數組和list  

            JSONObject.fromObject(對象) bean和map