這種人我還帶他出去玩么？
有一次我和我朋友去動(dòng)物園，就先去了老校區(qū)轉(zhuǎn)轉(zhuǎn)串慰，結(jié)果就轉(zhuǎn)到了藝術(shù)設(shè)計(jì)學(xué)院导狡。去了人家的實(shí)驗(yàn)室，當(dāng)時(shí)有四個(gè)女生在做設(shè)計(jì)圖敞嗡，我們主動(dòng)去幫忙畫圖。我們幫她們畫了一個(gè)小時(shí)的圖冗锁，期間有個(gè)女生挺好看的潘悼，個(gè)子有170吧律秃，聽她說(shuō)話，估計(jì)還打LOL治唤，而且歌唱的也好聽棒动。我的朋友要去吃飯，說(shuō)還要去動(dòng)物園宾添，我不太想去（畢竟這里有妹子嘛!）船惨。那四個(gè)女生聽了，就是那個(gè)唱歌好聽的女生說(shuō)缕陕，別去什么動(dòng)物園了粱锐，我這就有四只動(dòng)物，看吧扛邑！可是我那朋友呢怜浅，非要去動(dòng)物園看狗熊。我磨嘰了半小時(shí)鹿榜，我剛要出門海雪，那個(gè)女生就問我要手機(jī)號(hào)，而且說(shuō)了兩遍舱殿，但是同時(shí)奥裸，另外三個(gè)女生在嘰嘰喳喳說(shuō)話，我沒聽清沪袭，我朋友還拉著我出門湾宙。我特么內(nèi)心此時(shí)千萬(wàn)個(gè)草泥馬奔騰而過，他還讓我以后帶他去西藏玩冈绊，能帶嗎侠鳄？？而且最后去了動(dòng)物園也沒看見狗熊 〒▽〒

略略略.jpg

gitHub地址

AJAX概述##

1.什么是AJAX

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”死宣。即使用JavaScript語(yǔ)言與服務(wù)器進(jìn)行異步交互伟恶，傳輸?shù)臄?shù)據(jù)為XML（當(dāng)然，傳輸?shù)臄?shù)據(jù)不只是XML）
AJAX還有一個(gè)最大的特點(diǎn)就是毅该，當(dāng)服務(wù)器響應(yīng)時(shí)博秫，不用刷新整個(gè)瀏覽器頁(yè)面，而是可以局部刷新眶掌。

2.同步交互和異步交互

*同步交互：客戶端發(fā)出一個(gè)請(qǐng)求后挡育，需要等待服務(wù)器響應(yīng)結(jié)束后，才能發(fā)出第二個(gè)請(qǐng)求朴爬；

*異步交互：客戶端發(fā)出一個(gè)請(qǐng)求后即寒，無(wú)需等待服務(wù)器響應(yīng)結(jié)束后，就可以發(fā)出第二個(gè)請(qǐng)求。

同步交互和異步交互.png

3.AJAX的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)
1.AJAX使用JavaScript技術(shù)向服務(wù)器發(fā)送異步請(qǐng)求母赵；
2.AJAX無(wú)需刷新整個(gè)頁(yè)面逸爵；
3.因?yàn)榉?wù)器響應(yīng)內(nèi)容不再是整個(gè)頁(yè)面，而是頁(yè)面的局部凹嘲，所以AJAX性能高痊银；
缺點(diǎn)
1.AJAX并不適合所有場(chǎng)景，很多時(shí)候還是使用同步交互施绎；
2.AJAX雖然提高了用戶體驗(yàn)，但無(wú)形中向服務(wù)器發(fā)送的請(qǐng)求次數(shù)增多了贞绳，導(dǎo)致服務(wù)器壓力增加谷醉；
3.因?yàn)锳JAX是在瀏覽器中使用JavaScript技術(shù)完成的，所以還需要處理瀏覽器兼容性問題冈闭；

AJAX技術(shù)

1.AJAX第一例

1.1準(zhǔn)備工作####

因?yàn)锳JAX也需要請(qǐng)求服務(wù)器俱尼，異步請(qǐng)求也是請(qǐng)求服務(wù)器，所以需要先寫好服務(wù)器端代碼萎攒，即編寫一個(gè)Servlet

public class AServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("Hello AJAX");
        response.getWriter().print("Hello AJAX");
    }
}

1.2AJAX核心####

其實(shí)AJAX就是在JavaScript中多添加了一個(gè)對(duì)象XMLHttpRequest對(duì)象遇八。所有的異步交互都是使用XMLHttpRequest對(duì)象完成的。也就是說(shuō)耍休，我們只需要學(xué)習(xí)一個(gè)JavaScript的新對(duì)象即可刃永。
注意：各個(gè)瀏覽器對(duì)XMLHttpRequest的支持也是不同的！大多數(shù)瀏覽器都支持DOM2規(guī)范羊精，都可以使用xmlHttp = new XMLHttpRequest();來(lái)創(chuàng)建對(duì)象斯够；但是IE有所不同，IE5.5以及更早版本需要：xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");來(lái)創(chuàng)建對(duì)象喧锦；而IE6需要：xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");來(lái)創(chuàng)建對(duì)象读规；而IE7以及更新版本也支持DOM2規(guī)范。
為了處理瀏覽器兼容問題燃少，給出了下面方法來(lái)創(chuàng)建XMLHttpRequest對(duì)象：

function createXMLHttpRequest() {
        var xmlHttp;
        //適用于大多數(shù)瀏覽器束亏，以及IE7和更高版本
        try {
            xmlHttp = new XMLHttpRequest();
        } catch(e) {
            //適合于IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                //適合于IE5.5以及更早版本
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e) {
                    
                }
            }
        }
};

1.3打開與服務(wù)器的連接(open方法)####

當(dāng)?shù)玫絏MLHttpRequest對(duì)象后，就可以調(diào)用該對(duì)象的open()方法打開與服務(wù)器的連接了阵具。open()方法的參數(shù)如下

open(method,url,async);

method:請(qǐng)求方式碍遍，通常為GET或POST
url:請(qǐng)求的服務(wù)器地址，例如/ajaxdemo1/AServlet怔昨，若為GET請(qǐng)求雀久，還可以在url后追加參數(shù)；
async:這個(gè)參數(shù)可以不給趁舀，默認(rèn)值為true赖捌，表示異步請(qǐng)求

var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET","/AServlet",true);

1.4發(fā)送請(qǐng)求####

當(dāng)使用open打開連接后，就可以調(diào)用XMLHttpRequest對(duì)象的send()方法發(fā)送請(qǐng)求了。send()方法的參數(shù)為POST請(qǐng)求參數(shù)越庇，即對(duì)應(yīng)HTTP協(xié)議的請(qǐng)求體內(nèi)容罩锐，若是GET請(qǐng)求，需要在URL后連接參數(shù)卤唉。
注意：若沒有參數(shù)涩惑，需要給出null為參數(shù)，若不給出null參數(shù)桑驱，可能會(huì)導(dǎo)致FireFox瀏覽器不能正常發(fā)送請(qǐng)求

xmlHttp.send(null);

1.5接受服務(wù)器響應(yīng)####

當(dāng)請(qǐng)求發(fā)送出去后竭恬，服務(wù)器端Servlet就開始執(zhí)行了，但服務(wù)器端的響應(yīng)還沒有接收到熬的。接下來(lái)我們來(lái)接受服務(wù)器的響應(yīng)痊硕。
XMLHttpRequest對(duì)象有一個(gè)onreadystatechange事件，它會(huì)在XMLHttpRequest對(duì)象的狀態(tài)發(fā)生變化時(shí)被調(diào)用押框。下面介紹一下XMLHttpRequest對(duì)象的5種狀態(tài)：
0:初始化未完成狀態(tài)岔绸，只是創(chuàng)建了XMLHttpRequest對(duì)象，還未調(diào)用open()方法
1:請(qǐng)求已開始橡伞，open()方法已調(diào)用盒揉，但還沒調(diào)用send()方法
2:請(qǐng)求發(fā)送完成狀態(tài)，send()方法已調(diào)用
3:開始讀取服務(wù)器響應(yīng)
4:讀取服務(wù)器狀態(tài)響應(yīng)結(jié)束
onreadystatechange事件會(huì)在狀態(tài)為1兑徘、2刚盈、3、4時(shí)引發(fā)道媚。
下面的代碼會(huì)被執(zhí)行四次扁掸！對(duì)應(yīng)XMLHttpRequest的四種狀態(tài)

xmlHttp.onreadystatechange = function() {
        alert("Hello");
    };

但通常我們只關(guān)心最后一種狀態(tài)，即讀取服務(wù)器響應(yīng)結(jié)束后最域，客戶端才會(huì)做出改變谴分。我們可以通過XMLHttpRequest對(duì)象的readyState屬性來(lái)得到XMLHttpRequest對(duì)象的狀態(tài)。

xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4) {
            alert("Hello");
        }
};

其實(shí)我們還要關(guān)心服務(wù)器響應(yīng)的狀態(tài)碼是否為200镀脂，其服務(wù)器響應(yīng)為404牺蹄，或500，那么就表示請(qǐng)求失敗了薄翅。我們可以通過XMLHttpRequest對(duì)象的status屬性得到服務(wù)器的狀態(tài)碼沙兰。
最后，我們還需要獲取到服務(wù)器響應(yīng)的內(nèi)容翘魄，可以通過XMLHttpRequest對(duì)象的responseText得到服務(wù)器響應(yīng)內(nèi)容鼎天。

xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 && xmlHttp.status== 200) {
            alert(xmlHttp.responseText);
        }
};

1.6小結(jié)####

創(chuàng)建XMLHttpRequest對(duì)象
調(diào)用open()方法打開與服務(wù)器的連接
調(diào)用send()方法發(fā)送請(qǐng)求
為XMLHttpRequest對(duì)象指定onreadystatechange事件函數(shù)，這個(gè)函數(shù)會(huì)在XMLHttpRequest的1暑竟、2斋射、3、4，四種狀態(tài)時(shí)被調(diào)用
XMLHttpRequest對(duì)象的status屬性表示服務(wù)器狀態(tài)碼罗岖，它只有在readyState為4時(shí)才能獲取到
XMLHttpRequest對(duì)象的responseText屬性表示服務(wù)器響應(yīng)內(nèi)容涧至，它只有在readyState為4時(shí)才能獲取到！

2.AJAX第二例（發(fā)送POST請(qǐng)求）

POST請(qǐng)求必須設(shè)置ContentType請(qǐng)求頭的值為application/x-www.form-encoded桑包。表單的enctype默認(rèn)值就是為application/x-www.form-encoded南蓬！因?yàn)槟J(rèn)值就是這個(gè)，所以大家可能會(huì)忽略這個(gè)值哑了！當(dāng)設(shè)置了<form>的enctype=” application/x-www.form-encoded”時(shí)赘方，等同與設(shè)置了Cotnent-Type請(qǐng)求頭。
但在使用AJAX發(fā)送請(qǐng)求時(shí)弱左，就沒有默認(rèn)值了蒜焊，這需要我們自己來(lái)設(shè)置請(qǐng)求頭

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

當(dāng)沒有設(shè)置Content-Type請(qǐng)求頭為application/x-www-form-urlencoded時(shí)，Web容器會(huì)忽略請(qǐng)求體的內(nèi)容科贬。所以，在使用AJAX發(fā)送POST請(qǐng)求時(shí)鳖悠，需要設(shè)置這一請(qǐng)求頭榜掌，然后使用send()方法來(lái)設(shè)置請(qǐng)求體內(nèi)容。

3.AJAX第三例(用戶名時(shí)候已被注冊(cè))

3.1功能介紹####

在注冊(cè)表單中乘综，當(dāng)用戶填寫了用戶名后憎账，把光標(biāo)移開后，會(huì)自動(dòng)向服務(wù)器發(fā)送異步請(qǐng)求卡辰。服務(wù)器返回true或false胞皱，返回true表示這個(gè)用戶名已經(jīng)被注冊(cè)過，返回false表示沒有注冊(cè)過九妈。
客戶端得到服務(wù)器返回的結(jié)果后反砌，確定是否在用戶名文本框后顯示“用戶名已被注冊(cè)”的錯(cuò)誤信息！

3.2案例分析####

regist.jsp頁(yè)面中給出注冊(cè)表單萌朱；
在username表單字段中添加onblur事件宴树，調(diào)用send()方法；
send()方法獲取username表單字段的內(nèi)容晶疼，向服務(wù)器發(fā)送異步請(qǐng)求酒贬，參數(shù)為username；
RegistServlet：獲取username參數(shù)翠霍，判斷是否為“itcast”锭吨，如果是響應(yīng)true，否則響應(yīng)false寒匙；

3.3代碼####

regist.jsp

<script type="text/javascript">
function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();
    } catch (e) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
}

function send() {
    var xmlHttp = createXMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            if(xmlHttp.responseText == "true") {
                document.getElementById("error").innerHTML = "用戶名已被注冊(cè)零如！";
            } else {
                document.getElementById("error").innerHTML = "";
            }
        }
    };
    xmlHttp.open("POST", "/RegistServlet", true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var username = document.getElementById("username").value;
    xmlHttp.send("username=" + username);
}
</script>
<h1>注冊(cè)</h1>
<form action="" method="post">
        用戶名：<input id="username" type="text" name="username" onblur="send()" /><span
            id="error"></span><br /> 密 碼：<input type="text" name="password" /><br />
        <input type="submit" value="注冊(cè)" />
</form>

RegistServlet.java

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        
        String username = request.getParameter("username");

        if("itcast".equals(username)) {
            response.getWriter().print(true);
        } else {
            response.getWriter().print(false);
        }       
}

JSON###

1.什么是JSON####

JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式。
JSON是用字符串來(lái)表示JavaScript對(duì)象，例如可以在Servlet中發(fā)送一個(gè)JSON格式的字符串給客戶端JavaScript埠况，JavaScript可以執(zhí)行這個(gè)字符串耸携，得到一個(gè)JavaScript對(duì)象

2.JSON對(duì)象語(yǔ)法####

JSON語(yǔ)法：
數(shù)據(jù)在名稱/值對(duì)中
數(shù)據(jù)有逗號(hào)分隔
花括號(hào)保存對(duì)象
方括號(hào)保存數(shù)組

var person = {"name":"zhangSan","age":"18","sex":"male"};
alert(person.name+","+person.age+","+person.sex);

注意：key也要在雙引號(hào)中