ajax簡單介紹

admin發表於2018-08-31
本章節對ajax總體上做一個簡單介紹，讓讀者能夠對其有一個簡單的瞭解，然後在後面幾章節繼續深入介紹。

一.ajax是什麼:

（1）.ajax是非同步 JavaScript 和 XML，英文全程是Asynchronous JavaScript and XML。

（2）.ajax可以通過與後臺進行少量的資料交換，實現對區域性網頁進行非同步更新，避免了要重新整理這個頁面的情況。

在通常情況下，如果要更新網頁的資料，需要重新整理整個頁面，如果利用ajax，那麼就可以只進行區域性重新整理即可。

二.AJAX是基於現有的Internet標準:

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

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

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

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

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

三.程式碼例項:

上面對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>
<button type="button" id="bt">檢視效果</button>
</body>
</html>

相關文章