[音樂播放] 道格·勞埃德：所以多一個 那種概念了 排序的保護傘下瀑布 JavaScript是一種叫AJAX。 直到此時，我們的 使用JavaScript交互 已被限制推 按鈕，有事。 具體而言，在 發生的事情 我們的網站的外觀和感覺的變化。 對？ 像，特別是在 文檔對象模型的視頻， 我改變了背景色。 但是，當我這樣做，我沒有 做任何特殊的額外的請求。 我沒有要求了 服務器給我一個新的一頁。 我只是改變了我已經有了。 我沒有重裝我的網頁， 而事情的確改變了， 所以這是很大的。 但肯定有一些 手動的用戶交互參與。 AJAX是一個很酷的技術，它允許 我們更新頁面內容， 而不僅僅是它的外表和 感覺，無需重新加載。 

並通過具體什麼時候我 說更新網頁的內容， 我不是說我們重寫 使用JavaScript的網頁。 我是說，我們其實要求 從服務器的詳細信息 無需重新載入我們的頁面。 

現在那種有點的 更先進的技術 我們要談 關於這部影片。 我們將有一些互動。 但是，當我們這樣做，我會是 發出請求到萬維網服務器。 在這種情況下，只是什麼 運行我的Apache Web服務器。 我將要作出更多 請求，而我訪問一個網頁， 但我的網頁不會刷新。 

它只是要 異步更新我的網頁。 而這，其實， 這AJAX表示， 是異步JavaScript和XML。 XML是另一種標記 語言，你可以排序的 想起來了，就像HTML。 這是不太一樣的東西，但 它基本上只是一種標記語言。 所以這是一個異步 JavaScript和標記語言。 

因此，為了使用該 AJAX technique-- AJAX 不是單獨的編程語言。 這只是形式的 集techniques--我們的 需要創建一個特殊的 JavaScript對象，其中 被稱為一個XMLHttpRequest。 現在，它是很容易做到這一點。 我們只說無功，無論 我們要調用這個對象， 等於新的XMLHttpRequest。 現在，我們現在已經獲得 一個AJAX類的對象， 或者一個XMLHttpRequest 對象，這將允許 我們異步更新我們的頁面。 

之後，我們已經得到了這個新 對象，XMLHttpRequest的， 我們必須做一些事來了 onreadystatechange的行為。 的onreadystatechange 行為實際上只是 當你提出要求 到一個網頁，在網頁 經過許多步驟。 首先，一個請求未被發送。 然後，該請求已 發送，但沒有採取行動。 然後請求已經採取行動。 然後該請求是 被發回給你。 

然後，該請求是 在你的頁面完全加載。 那些是不同的狀態。 因此，我們需要設置我們的 新的XMLHttpRequest對象 更改就緒狀態發生變化時。 而通常情況下，我們做到這一點， 定義一個匿名函數，該函數 我們熟悉的 JavaScript的現在， 被稱為就緒狀態發生變化時。 這真的不是遠不止於此。 我們只是被限定 那種匿名函數，喜歡什麼 我們正在做的 JavaScript的，在這裡我們將 有匿名函數 對點擊響應的， 或者當我們在做的地圖 在一個陣列中的各個對象。 

事情發生時， 東西被點擊。 在這種情況下，它只是東西 發生在我們的頁面的狀態 的變化。 有兩個其他屬性 被排序of--他們不 這是唯一的屬性 固有的XMLHttpRequest， 但他們非常重要的。 有一種叫做readyState的， 正如你可能已經猜到了， 是的onreadystatechange有關。 這實際上告訴你 readyState的是什麼。 0，1，2，3和4是 可能性有， 和排序，他們大致 對應於什麼 我只是在談論一秒鐘前。 

然後地位，這 希望如果一切正常， 是200，這是短 對，當然，OK， 這是我們所熟悉的從http。 因此，我們希望我們的準備狀態 為四，而我們的狀態是200。 如果我們的準備狀態 為四，並且響應 準備好被提上 頁，且狀態為200， 我們能夠做 一切順利， 現在我們可以異步 更新我們的網頁 而無需重新加載 它的全部內容。 

之後我們定義會發生什麼 到onreadystatechange的行為， 我們已經檢查過的readyState 是4和狀態是200， 那麼我們需要做的是 打開一個異步 的要求，這是剛剛製作 一個HTTP一般GET請求。 只是這樣做編程， 而不是通過我們的網絡瀏覽器。 然後我們發送請求。 那麼，這也許 看起來像背景？ 因此，這裡的一個函數， 用AJAX請求交易。 好不好？ 我也隨便說 它接受一個參數。 而這一類的 這裡一般的骨架。 開始的時候，我們得到 自己一個新的XMLHttpRequest對象。 然後，我需要設置 onreadystatechange的行為。 所以我要說 當readyState的變化， 我希望你能調用這個函數。 

這是會問 問題，如果readyState的 是4，如果readyState的已改變 為4，狀態為200， 所以我們有一個成功的請求，我 想要做一些事來的頁面。 我們來看看 在一個例子什麼 的東西可能是在一秒鐘。 那麼，現在我已經定義 我的匿名函數， 我的響應函數，只要 readyState的變化。 

於是我只需要打開一個 要求，使用Open方法。 然後，我將請求發送。 讓我們來看看 一個更具體的例子 什麼AJAX可以在我們的網頁做。 所以，我這裡有一個很簡單的 所謂home.html的頁面。 而且我有一個信息去 在這裡和某種形式的下拉菜單中。 

我們會在一秒鐘內重溫這一點。 但我認為，我們現在應該採取 看看實際的源代碼。 所以，我要打開home.html的。 我們可以看到這是怎麼回事。 所以，起來在最高層在這裡，我有 一些JavaScript的東西，是怎麼回事。 

在這裡，我顯然有 一個div一個ID為infodiv， 有些信息 會去那裡。 然後，我有這樣的形式。 而這裡面 形式，我有話 被稱為選擇，這 僅僅是一個下拉菜單 與一群不同的選擇。 而且很顯然，當改變，當 已被選擇的選項 變了，我要去打電話 一些功能cs50Info， 然後我要去 傳中THIS.VALUE， 其中，這是指 該選項被選中， 和值是這些人在這裡，選項 值=等於空，“布隆伯格” “鮑登”，“陳”和“馬蘭”。 

那麼，實際上可能 發生在這裡，當我做到這一點？ 那麼，讓我們一起來 看blumberg.html。 看起來這只是一個 摘錄一些HTML的。 而事實上，我所希望 即將在這裡發生 是我將能夠堵塞 這個網站直接進入我的網頁 而無需重新加載 的頁面，使得當 我從下拉列表中選擇漢娜 菜單中，約漢娜的信息， 特別是，該信息 在這裡blumberg.html， 是什麼顯示在頁面上。 而且我沒有刷新。 如果我選擇了別人， 他們的信息會顯示出來。 我該怎麼做呢？ 再次，這需要 我們可以使用一些AJAX。 因此，我們將開闢ajax.js. 這裡是該函數，cs50Info。 如果名字是什麼，我回。 我不會，如果做任何事情 空的選項已被選定。 否則，我要去 創建一個新的XMLHttpRequest。 然後，我會說，當 readyState的變化，調用這個函數。 

而如果readyState為 4，狀態為200， 這裡有一點點 jQuery的第13行的。 但是，所有我做的是說， 改變infodiv的內容 是什麼我回來作為 響應從我的HttpRequest。 

什麼是我的HttpRequest？ 嗯，這是正確的 在這裡在線18和19。 第18行，我基本上準備 一個GET請求名稱+ html的。 再次，名字在這裡是 這是爭論 傳過來的參數cs50Info。 

所以基本上，我在路過別人的 名字，這是一組選項 我們在看到 下拉菜單的形式。 我得到這個名字。 而且我說我想你 請獲得我file.html， 然後發送該請求。 

並且使得onreadystatechange的是要 在聽和等待，等待 等待，直到readyState的 為4，狀態為200。 因此，它已經準備好提供服務， 並請求成功。 然後如果是這樣，這將 改變infodiv的內容 要我回來的響應文本。 

因此，讓我們看看這個 可能實際工作。 因此，我們將頭部到我的瀏覽器 窗口，我們將看看在這裡。 因此，讓我們一起來看看 怎麼在這裡對AJAX。 因此，我們將選擇誰 從下拉菜單中。 所以在此情況下，讓我們 只是選擇漢娜。 並注意漢娜的 信息已改變， 但我沒有any--我 頁面並沒有完全重裝。 的東西留了下來。 大部分的東西留了下來。 AJAX測試沒有變化。 按鈕本身，這 下拉菜單並沒有改變。 但信息有沒有改變。 和取決於如何 很快我的電腦動作， 你實際上可能會看到的內容 消失，然後重新出現真正 很快。 這是內容 從infodiv刪除， 然後以一取代 新的異步請求。 

所以，如果我切換它被說， Rob--並再次，看一看， 也許我們將真正看到它 消失，重新出現快速。 你看到了嗎？ 它是如何只是突然離開， 然後將其重新填充？ 這是AJAX請求 排序發生。 等視 人我選擇，我 使得不同的異步 要求到不同的文件 我有我的服務器上。 及的內容，我 infodiv正在更新， 在此基礎上對這些我選擇。 所以這就是所有要做就是AJAX。 它使我們能夠使這些異步 請求，更新到頁面。 而不必 刷新整個頁面， 我們將獲得新的 從它的內容通過 一個新的新鮮的請求到服務器。 因此，我們的網頁能夠成為 相當多的活力。 

當我們得到更多的 和更先進的，則 可能會像 比方說，你的電子郵件收件箱， 在這裡，你不必做任何事情。 你不必點擊 下拉菜單或點擊任何東西， 和突然，你的最新的 電子郵件顯示在頂部。 這也只是一個Ajax請求。 阿賈克斯請求您 服務器，電子郵件服務器， 送過來的所有信息 有關最新的電子郵件， 並改變你在看 屏幕是你最新的一組電子郵件。 如果你有一個新的 該分區的存在，則內容 將改變，以反映 的更新的內容。 我是道格·勞埃德。 這是CS50。