AJAX（Asynchronous Javascript And Xml）

百度關(guān)于ajax的介紹

Ajax即Asynchronous Javascript And XML（異步JavaScript和XML）在 2005年被Jesse James Garrett提出的新術(shù)語，用來描述一種使用現(xiàn)有技術(shù)集合的‘新’方法夷蚊，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技術(shù)網(wǎng)頁應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上度硝，而不需要重載（刷新）整個頁面实蔽，這使得程序能夠更快地回應(yīng)用戶的操作卷扮。

AJAX本質(zhì)

• AJAX不能稱為一種技術(shù)羞迷，它是多種技術(shù)的綜合產(chǎn)物。
• AJAX代碼屬于WEB前端的JS代碼画饥。和后端的java沒有關(guān)系，后端也可以是php語言浊猾，也可以是C語言抖甘。
• AJAX可以讓瀏覽器發(fā)送一種特殊的請求，這種請求可以是：異步的

為什么要發(fā)送異步的請求?

我們來假設(shè)一下這樣一個業(yè)務(wù)場景：

在互聯(lián)網(wǎng)開荒的2G時代葫慎，Jack非常喜歡在知名二次元網(wǎng)站Bilibili上觀看電影衔彻，有一天，Jack在B站觀看《肖申克的救贖》這部影片時偷办，界面彈出一個小框艰额，需要大會員才能觀看完整電影，Jack二話不說椒涯，立刻沖了一個大會員柄沮，并進(jìn)行登錄，如果此時我們重新加載頁面废岂，Jack當(dāng)前電影的緩存就要重新從0加載祖搓，讓他一夜回到解放前。此時如果登錄會員賬戶這個操作不會影響已經(jīng)加載好的網(wǎng)頁湖苞，那么Jack的用戶體驗就會提高許多拯欧，我們可以用ajax發(fā)送異步請求來解決這個問題。

異步與同步的區(qū)別

• 什么是異步财骨，什么是同步镐作？
  • 假設(shè)有t1和t2線程藏姐，t1和t2線程并發(fā)，就是異步该贾。
  • 假設(shè)有t1和t2線程羔杨，t2在執(zhí)行的時候，必須等待t1線程執(zhí)行到某個位置之后t2才能執(zhí)行靶庙，那么t2在等t1问畅，顯然他們是排隊的，排隊的就是同步六荒。
  • AJAX是可以發(fā)送異步請求的护姆。也就是說，在同一個瀏覽器頁面當(dāng)中掏击，可以發(fā)送多個ajax請求卵皂，這些ajax請求之間不需要等待，是并發(fā)的砚亭。

AJAX的效果

• AJAX 應(yīng)用程序可能使用 XML 來傳輸數(shù)據(jù)灯变，但將數(shù)據(jù)作為純文本或 JSON 文本傳輸也同樣常見。
• AJAX可以更新網(wǎng)頁的部分捅膘，而不需要重新加載整個頁面添祸。（頁面局部刷新）
• AJAX可以做到在同一個網(wǎng)頁中同時啟動多個請求，類似于在同一個網(wǎng)頁中啟動“多線程”寻仗，一個“線程”一個“請求”刃泌。
• 對AJAX異步請求的理解.png

AJAX同步與異步的區(qū)別

• AJAX同步請求
• AJAX同步請求.png

• AJAX異步請求
• AJAX異步請求.png

XMLHttpRequest對象

• XMLHttpRequest對象是AJAX的核心對象，發(fā)送請求以及接收服務(wù)器數(shù)據(jù)的返回署尤，全靠它了耙替。

• XMLHttpRequest對象，現(xiàn)代瀏覽器都是支持的曹体，都內(nèi)置了該對象俗扇。直接用即可。

• 創(chuàng)建XMLHttpRequest對象

  • var xhr = new XMLHttpRequest();
    

• XMLHttpRequest對象的方法

• XMLHttpRequest對象的屬性

AJAX GET請求

AJAX請求四步法

1. 第一步：創(chuàng)建AJAX核心對象

   我們通常頁面加載完畢串稀，并且某個事件發(fā)生后才需要發(fā)送ajax請求啥酱，顯然，這部分代碼要在具體事件注冊函數(shù)中

   var xhr = new XMLHttpRequest();   
   

2. 第二步：注冊回調(diào)函數(shù)

   onreadystatechange函數(shù)在readystate屬性變化時調(diào)用厨诸，

   具體的readystate屬性值對應(yīng)的是镶殷，發(fā)送請求后服務(wù)器對該請求的處理所處的一個階段，見下圖

XMLHttpRequest的readyState屬性.png

我們通常在readystate == 4時（請求已完成且響應(yīng)已就緒的）注冊好相應(yīng)的函數(shù)

通常微酬，我們還會使用http狀態(tài)碼status來選擇響應(yīng)成功之后進(jìn)行的操作

xhr.onreadystatechange = function(){
    if (this.readyState == 4) {
        if (this.status == 200) {
           
        }else{
            alert(this.status)
        }
    }
}

3. 打開服務(wù)器與瀏覽器之間的通道

   xhr.open("GET", "/項目名/請求路徑?name=value&name=value", true)
   // true --> 開啟異步
   // false --> 開啟同步
   

4. 發(fā)送請求

    xhr.send()
   

AJAX get請求如何提交數(shù)據(jù)呢绘趋？

• get請求提交數(shù)據(jù)是在“請求行”上提交颤陶，格式是：url?name=value&name=value&name=value....
• 其實這個get請求提交數(shù)據(jù)的格式是HTTP協(xié)議中規(guī)定的，遵循協(xié)議即可

后端處理AJAX的GET請求

與正常處理前端發(fā)送的請求一致

@WebServlet("/前端訪問的路徑")
public class AjaxRequest2Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 設(shè)置響應(yīng)的內(nèi)容類型以及字符集
        response.setContentType("text/html;charset=UTF-8");
        // 獲取響應(yīng)流
        PrintWriter out = response.getWriter();
        // 響應(yīng)
        out.print("<font color='red'>后端處理AJAX的get請求</font>");
    }
}

AJAX GET請求的緩存問題

• 對于低版本的IE瀏覽器來說陷遮，AJAX的get請求可能會走緩存滓走。存在緩存問題。對于現(xiàn)代的瀏覽器來說帽馋，大部分瀏覽器都已經(jīng)不存在AJAX get緩存問題了搅方。
• 什么是AJAX GET請求緩存問題呢？
  • 在HTTP協(xié)議中是這樣規(guī)定get請求的：get請求會被緩存起來绽族。
  • 發(fā)送AJAX GET請求時姨涡，在同一個瀏覽器上，前后發(fā)送的AJAX請求路徑一樣的話吧慢，對于低版本的IE來說涛漂，第二次的AJAX GET請求會走緩存，不走服務(wù)器检诗。
• POST請求在HTTP協(xié)議中規(guī)定的是：POST請求不會被瀏覽器緩存匈仗。
• GET請求緩存的優(yōu)缺點：
  • 優(yōu)點：直接從瀏覽器緩存中獲取資源，不需要從服務(wù)器上重新加載資源逢慌，速度較快悠轩，用戶體驗好。
  • 缺點：無法實時獲取最新的服務(wù)器資源攻泼。
• 瀏覽器什么時候會走緩存哗蜈？
  • 第一：是一個GET請求
  • 第二：請求路徑已經(jīng)被瀏覽器緩存過了。第二次發(fā)送請求的時候坠韩，這個路徑?jīng)]有變化，會走瀏覽器緩存炼列。
• 如果是低版本的IE瀏覽器只搁，怎么解決AJAX GET請求的緩存問題呢？
  • 可以在請求路徑url后面添加一個時間戳俭尖，這個時間戳是隨時變化的氢惋。所以每一次發(fā)送的請求路徑都是不一樣的，這樣就不會走瀏覽器的緩存問題了稽犁。
  • 可以采用時間戳："url?t=" + new Date().getTime()
  • 或者可以通過隨機(jī)數(shù)："url?t=" + Math.random()
  • 也可以隨機(jī)數(shù)+時間戳....

AJAX POST請求

AJAX POST請求和GET請求的代碼區(qū)別焰望？只是前端代碼有區(qū)別，后端代碼沒有區(qū)別

1. AJAX的post請求需要提前設(shè)置好請求頭

   // 設(shè)置請求頭的內(nèi)容類型已亥。模擬form表單提交數(shù)據(jù)
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") 
   

2. send()發(fā)送請求的時候需要將參數(shù)信息寫入

   // 獲取表單中的數(shù)據(jù)
   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;
   // send函數(shù)中的參數(shù)就是發(fā)送的數(shù)據(jù)熊赖，這個數(shù)據(jù)在“請求體”當(dāng)中發(fā)送。    
   xhr.send("username="+username+"&password="+passwor