AJAX學習總結
學習任務
-
AJAX的主要作用/目的
-
實現原理
-
工作步驟
-
XMLHttPRequest對象
-
實例AJAX的一般步驟
AJAX的主要作用/目的
AJAX，我們都知道它的主要作用是異步傳輸，那什麼叫異步傳輸呢？
異步傳輸是 通過在後臺與服務器進行少量數據交換，使網頁實現局部刷新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。以前的時候，瀏覽器與服務器之間的交互，都是客戶端重新發送請求，服務器響應請求，響應的是整個頁面。可能我們只是改了頁面的很小一部分，其他都沒變，但是服務器依然會給我們發送一個新的應答。導致客戶端上的與服務器發來的有相關多的一部分是重複的。但是AJAX可以使我們局部刷新，使服務器給我們發我們需要的那部分。
那爲什麼它可以實現局部刷新呢？
這個問題我們放到結尾來回答。
實現原理
瀏覽器訪問服務器時，標準的請求響應時，瀏覽器的動作是同步操作。如瀏覽器請求某地址。
工作步驟
- 第一步瀏覽器中觸發某個事件，創建XMLHttpRequest對象。
- 通過這個對象來向服務器發送請求。
- 服務器接收到該請求後，處理該請求，向瀏覽器做出回覆。
- 瀏覽器中通過js代碼來局部修改頁面內容。
XMLHttPRequest對象
瞭解AJAX的小夥伴們，會發現在AJAX異步傳輸的過程中有一個對象至關重要且始終存在，它就是XMLHTTPRequest，下面我沒來詳細瞭解一下這個對象
XMLHttpRequest 用於在後臺與服務器交換數據。沒有它的存在，將不會有異步傳輸。
- 通過var xmlhttp = new XMLHttpRequest();來創建該對象。
- xmlhttp.onreadystatechange=function(){ 執行 接受服務器響應和對服務器響應做出操作}，該對象的onreadystatechange方法中，每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState的值表示此次請求的狀態信息，也就是XMLHttpRequest對象的狀態信息。
- xmlhttp.open("GET/POST","URL",true);open()方法用來設置該請求的一些信息，第一個參數是請求類型（GET/POST），第二個參數是服務器目標文件的地址。第三個參數是，是否執行AJAX異步。
- xmlhttp.send();用來發送該請求。
實例AJAX的一般步驟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h1>哈哈哈哈</h1></div>
<button type="button" onclick="loadXMLDoc()">AJAX傳值</button>
</body>
</html>
現在來解決開頭的那個問題，爲什麼AJAX可以實現局部刷新呢？
- js可以獲取網頁中個元素的對象，然後修改它們
- 服務器的響應通過js來截斷。然後通過js來實現網頁的局部刷新
所以說AJAX是依託於js的，爲什麼ajax放在js代碼中，就是因爲js的這種局部修改的特殊性。