AJAX初探01

AJAX概念

概念：即"Asynchronous JavaScript And XML"
通過在後臺與服務器進行少量數據交換，AJAX可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。（傳統的網頁（不使用AJAX）如果需要更新內容，必須重載整個網頁頁面或者使用iframe。）

AJAX寫法
瀏覽器兼容

if(window.ActiveXObject){
           xmlHttp = new ActiveXObject("Micr0soft.XMLHTTP");
       }else if(window.XMLHttpRequest){
           xmlHttp = new XMLHttpRequest();
       }
 

狀態碼
readyState
存在XMLHTTPRequest的狀態

0: 請求未初始化

1: 服務器連接已建立

2: 請求已接收

3: 請求處理中

4: 請求已完成，且響應已就緒

status

200: "OK"

404: 未找到頁面

<button onclick="update()">數據更新</button>
<br/>
    <div id="dataArea">
   展示服務器返回的數據
    </div>

<script>
   function update() {
       var xmlHttp;
       if(window.ActiveXObject){
           xmlHttp = new ActiveXObject ("Micr0soft.XMLHTTP");//IE678 opera OLD 老舊瀏覽器
       }else if(window.XMLHttpRequest){
           xmlHttp = new XMLHttpRequest(); // 新瀏覽器
       }
       xmlHttp.open("","");//打開和服務器的鏈接
       // xmlHttp.open("獲取方式（get / post）","文件名");
       xmlHttp.send("null");//send動作才是真正的給服務器按照上面open的url發送請求
       //  on (當) ready (準備) state (狀態) change (改變)
       xmlHttp.onreadystatechange = function () {
           if(xmlHttp.readyState === 4&& xmlHttp.status === 2){
               document.getElementById("dateArea").innerHTML = xmlHttp.responseText;
           }
       }
   }
 

HTML筆記05------AJAX