2020-11-09Ajax

今日內(nèi)容

1. AJAX:
2. JSON

AJAX:

1. 概念: ASynchronous JavaScript And XML  異步的JavaScript 和 XML
    1. 異步和同步:客戶端和服務(wù)器端相互通信的基礎(chǔ)上
        * 客戶端必須等待服務(wù)器端的響應(yīng)。在等待的期間客戶端不能做其他操作不跟。
        * 客戶端不需要等待服務(wù)器端的響應(yīng)形导。在服務(wù)器處理請(qǐng)求的過(guò)程中败京,客戶端可以進(jìn)行其他的操作。

        Ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下哎甲,能夠更新部分網(wǎng)頁(yè)的技術(shù)孝冒。 [1] 
        通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換洋幻,Ajax 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新碳却。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下队秩,對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
        傳統(tǒng)的網(wǎng)頁(yè)(不使用 Ajax)如果需要更新內(nèi)容昼浦,必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面馍资。

        提升用戶的體驗(yàn)

2. 實(shí)現(xiàn)方式:
    1. 原生的JS實(shí)現(xiàn)方式(了解)
                 //1.創(chuàng)建核心對(duì)象
                var xmlhttp;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
    
                //2. 建立連接
                /*
                    參數(shù):
                        1. 請(qǐng)求方式:GET、POST
                            * get方式关噪,請(qǐng)求參數(shù)在URL后邊拼接鸟蟹。send方法為空參
                            * post方式,請(qǐng)求參數(shù)在send方法中定義
                        2. 請(qǐng)求的URL:
                        3. 同步或異步請(qǐng)求:true(異步)或 false(同步)
    
                 */
                xmlhttp.open("GET","ajaxServlet?username=tom",true);
    
                //3.發(fā)送請(qǐng)求
                xmlhttp.send();
    
                //4.接受并處理來(lái)自服務(wù)器的響應(yīng)結(jié)果
                //獲取方式 :xmlhttp.responseText
                //什么時(shí)候獲仁雇谩建钥?當(dāng)服務(wù)器響應(yīng)成功后再獲取
    
                //當(dāng)xmlhttp對(duì)象的就緒狀態(tài)改變時(shí),觸發(fā)事件onreadystatechange虐沥。
                xmlhttp.onreadystatechange=function()
                {
                    //判斷readyState就緒狀態(tài)是否為4熊经,判斷status響應(yīng)狀態(tài)碼是否為200
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                       //獲取服務(wù)器的響應(yīng)結(jié)果
                        var responseText = xmlhttp.responseText;
                        alert(responseText);
                    }
                }
    2. JQeury實(shí)現(xiàn)方式
        1. $.ajax()
            * 語(yǔ)法:$.ajax({鍵值對(duì)});
             //使用$.ajax()發(fā)送異步請(qǐng)求
                $.ajax({
                    url:"ajaxServlet1111" , // 請(qǐng)求路徑
                    type:"POST" , //請(qǐng)求方式
                    //data: "username=jack&age=23",//請(qǐng)求參數(shù)
                    data:{"username":"jack","age":23},
                    success:function (data) {
                        alert(data);
                    },//響應(yīng)成功后的回調(diào)函數(shù)
                    error:function () {
                        alert("出錯(cuò)啦...")
                    },//表示如果請(qǐng)求響應(yīng)出現(xiàn)錯(cuò)誤,會(huì)執(zhí)行的回調(diào)函數(shù)
    
                    dataType:"text"http://設(shè)置接受到的響應(yīng)數(shù)據(jù)的格式
                });
        2. $.get():發(fā)送get請(qǐng)求
            * 語(yǔ)法:$.get(url, [data], [callback], [type])
                * 參數(shù):
                    * url:請(qǐng)求路徑
                    * data:請(qǐng)求參數(shù)
                    * callback:回調(diào)函數(shù)
                    * type:響應(yīng)結(jié)果的類(lèi)型

        3. $.post():發(fā)送post請(qǐng)求
            * 語(yǔ)法:$.post(url, [data], [callback], [type])
                * 參數(shù):
                    * url:請(qǐng)求路徑
                    * data:請(qǐng)求參數(shù)
                    * callback:回調(diào)函數(shù)
                    * type:響應(yīng)結(jié)果的類(lèi)型

JSON:

1. 概念: JavaScript Object Notation       JavaScript對(duì)象表示法
    Person p = new Person();
    p.setName("張三");
    p.setAge(23);
    p.setGender("男");

    var p = {"name":"張三","age":23,"gender":"男"};

    * json現(xiàn)在多用于存儲(chǔ)和交換文本信息的語(yǔ)法
    * 進(jìn)行數(shù)據(jù)的傳輸
    * JSON 比 XML 更小欲险、更快镐依,更易解析。

2. 語(yǔ)法:
    1. 基本規(guī)則
        * 數(shù)據(jù)在名稱(chēng)/值對(duì)中:json數(shù)據(jù)是由鍵值對(duì)構(gòu)成的
            * 鍵用引號(hào)(單雙都行)引起來(lái)盯荤,也可以不使用引號(hào)
            * 值得取值類(lèi)型:
                1. 數(shù)字(整數(shù)或浮點(diǎn)數(shù))
                2. 字符串(在雙引號(hào)中)
                3. 邏輯值(true 或 false)
                4. 數(shù)組(在方括號(hào)中)    {"persons":[{},{}]}
                5. 對(duì)象(在花括號(hào)中) {"address":{"province":"陜西"....}}
                6. null
        * 數(shù)據(jù)由逗號(hào)分隔:多個(gè)鍵值對(duì)由逗號(hào)分隔
        * 花括號(hào)保存對(duì)象:使用{}定義json 格式
        * 方括號(hào)保存數(shù)組:[]
    2. 獲取數(shù)據(jù):
        1. json對(duì)象.鍵名
        2. json對(duì)象["鍵名"]
        3. 數(shù)組對(duì)象[索引]
        4. 遍歷
                 //1.定義基本格式
                var person = {"name": "張三", age: 23, 'gender': true};
        
                var ps = [{"name": "張三", "age": 23, "gender": true},
                    {"name": "李四", "age": 24, "gender": true},
                    {"name": "王五", "age": 25, "gender": false}];
        
        
        
        
                //獲取person對(duì)象中所有的鍵和值
                //for in 循環(huán)
               /* for(var key in person){
                    //這樣的方式獲取不行馋吗。因?yàn)橄喈?dāng)于  person."name"
                    //alert(key + ":" + person.key);
                    alert(key+":"+person[key]);
                }*/
        
               //獲取ps中的所有值
                for (var i = 0; i < ps.length; i++) {
                    var p = ps[i];
                    for(var key in p){
                        alert(key+":"+p[key]);
                    }
                }


3. JSON數(shù)據(jù)和Java對(duì)象的相互轉(zhuǎn)換

    * JSON解析器:
        * 常見(jiàn)的解析器:Jsonlib,Gson秋秤,fastjson宏粤,jackson
    
    1. JSON轉(zhuǎn)為Java對(duì)象
        1. 導(dǎo)入jackson的相關(guān)jar包
        2. 創(chuàng)建Jackson核心對(duì)象 ObjectMapper
        3. 調(diào)用ObjectMapper的相關(guān)方法進(jìn)行轉(zhuǎn)換
            1. readValue(json字符串?dāng)?shù)據(jù),Class)
    2. Java對(duì)象轉(zhuǎn)換JSON
        1. 使用步驟:
            1. 導(dǎo)入jackson的相關(guān)jar包
            2. 創(chuàng)建Jackson核心對(duì)象 ObjectMapper
            3. 調(diào)用ObjectMapper的相關(guān)方法進(jìn)行轉(zhuǎn)換
                1. 轉(zhuǎn)換方法:
                    * writeValue(參數(shù)1,obj):
                        參數(shù)1:
                            File:將obj對(duì)象轉(zhuǎn)換為JSON字符串灼卢,并保存到指定的文件中
                            Writer:將obj對(duì)象轉(zhuǎn)換為JSON字符串绍哎,并將json數(shù)據(jù)填充到字符輸出流中
                            OutputStream:將obj對(duì)象轉(zhuǎn)換為JSON字符串,并將json數(shù)據(jù)填充到字節(jié)輸出流中
                    * writeValueAsString(obj):將對(duì)象轉(zhuǎn)為json字符串

                2. 注解:
                    1. @JsonIgnore:排除屬性鞋真。
                    2. @JsonFormat:屬性值得格式化
                        * @JsonFormat(pattern = "yyyy-MM-dd")

                3. 復(fù)雜java對(duì)象轉(zhuǎn)換
                    1. List:數(shù)組
                    2. Map:對(duì)象格式一致

案例:

* 校驗(yàn)用戶名是否存在
    1. 服務(wù)器響應(yīng)的數(shù)據(jù)崇堰,在客戶端使用時(shí),要想當(dāng)做json數(shù)據(jù)格式使用涩咖。有兩種解決方案:
        1. $.get(type):將最后一個(gè)參數(shù)type指定為"json"
        2. 在服務(wù)器端設(shè)置MIME類(lèi)型
            response.setContentType("application/json;charset=utf-8");
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末海诲,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子檩互,更是在濱河造成了極大的恐慌特幔,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件闸昨,死亡現(xiàn)場(chǎng)離奇詭異蚯斯,居然都是意外死亡薄风,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)拍嵌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)遭赂,“玉大人,你說(shuō)我怎么就攤上這事横辆∑菜” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵龄糊,是天一觀的道長(zhǎng)逆粹。 經(jīng)常有香客問(wèn)我,道長(zhǎng)炫惩,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任阿浓,我火速辦了婚禮他嚷,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘芭毙。我一直安慰自己筋蓖,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布退敦。 她就那樣靜靜地躺著粘咖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪侈百。 梳的紋絲不亂的頭發(fā)上瓮下,一...
    開(kāi)封第一講書(shū)人閱讀 52,807評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音钝域,去河邊找鬼讽坏。 笑死,一個(gè)胖子當(dāng)著我的面吹牛例证,可吹牛的內(nèi)容都是我干的路呜。 我是一名探鬼主播,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼织咧,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼胀葱!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起笙蒙,我...
    開(kāi)封第一講書(shū)人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤抵屿,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后手趣,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體晌该,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡肥荔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了朝群。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片燕耿。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖姜胖,靈堂內(nèi)的尸體忽然破棺而出誉帅,到底是詐尸還是另有隱情,我是刑警寧澤右莱,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布蚜锨,位于F島的核電站,受9級(jí)特大地震影響慢蜓,放射性物質(zhì)發(fā)生泄漏亚再。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一晨抡、第九天 我趴在偏房一處隱蔽的房頂上張望氛悬。 院中可真熱鬧,春花似錦耘柱、人聲如沸如捅。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)镜遣。三九已至,卻和暖如春士袄,著一層夾襖步出監(jiān)牢的瞬間悲关,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工窖剑, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留坚洽,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓西土,卻偏偏與公主長(zhǎng)得像讶舰,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子需了,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361