AJAX 介紹

admin發表於2019-07-23

本文在總體上對 AJAX 做一個概述，並不會對其技術細節做過多涉及。

目的是讓讀者在總體對 AJAX 有一個大致瞭解，更多內容參閱本版塊其他文章。

一.AJAX 是什麼：

AJAX 是非同步 JavaScript 和 XML，英文全稱是 Asynchronous JavaScript and XML。

也就是可以通過 JavaScript 發起 HTTP 請求，並以非同步方式獲取指定的資料。

AJAX 之前，從伺服器請求新的資料並在瀏覽器顯示，需要重新整理整個頁面，這並不是一個好的解決方案：

（1）.效能不佳，需要重新載入整個頁面。

（2）.影響使用者體驗，很可能影響使用者的其他操作。

AJAX 可以通過與後臺進行少量的資料交換，實現對區域性網頁進行非同步更新，避免重新整理整個頁面。

二.基於現有的 Internet 標準：

AJAX 並不是一門新的技術，而是基於現有的 Internet 標準與技術：

（1）.XMLHttpRequest 物件 (非同步的與伺服器交換資料)。

（2）.JavaScript/DOM (資訊顯示/互動)。

（3）.CSS (給資料定義樣式)。

（4）.XML (作為轉換資料的格式)。

特別說明：

（1）.第四條闡述在當前並不恰當，當前 JSON 在絕大多數場景下已經替代 XML 作為資料傳輸格式。

（2）.AJAX 已經成為前端指令碼發起 HTTP 請求的代名詞，所以不要糾結 AJAX 這個名稱。

三.程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function loadXMLDoc(){
  var xmlhttp;
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("show").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","demo/ajax/txt/demo.txt",true);
  xmlhttp.send();
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div id="show">
  <h2>原來的內容</h2>
</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上述程式碼點選按鈕可以通過 AJAX 寫入新的文字。

相關文章