前幾天，自己用ajax將前端的查詢頁面重新寫了一下，使用非同步查詢來操作。
伺服器端使用的是PHP

var xhr;
 if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
 xhr=new XMLHttpRequest();
 }
 else{// IE6, IE5 瀏覽器執行程式碼
 xhr=new ActiveXObject("Microsoft.XMLHTTP");}

首先建立一個XMLHttpRequest物件，這裡有一個相容性的處理。之前就被ie的相容問題坑過。。

xhr.
 
onreadystatechange = function(){
                      if(xhr.readyState==4&&((xhr.status>=200&& xhr.status<300) || xhr.status==304)&&xhr.responseText.slice(0,4)!='null'){
                                          showmeeting(xhr.responseText);
                            }
                            elseif
 
(xhr.readyState==4&&xhr.status!=200){alert('請求失敗：'+xhr.status);}
                     }

為onreadystatechange事件新增一個函式，每一次readyState發生變化，都會觸發一次onreadystatechange事件，當readyState=4且status=200時，就表示非同步請求已經成功的接收了伺服器返回來的所有結果。

var cdate = document.getElementById("date").value;
xhr.open('get','m.php?date='
 
+cdate,true);
xhr.send();

這裡是使用GET方法來傳遞資料，我一開始是使用POST方法的。但是不知道為什麼伺服器端$_POST一直獲取不了值，最後耗了好久作罷。使用GET就一下子就成功了。這裡也貼出POST方法，請大神可以幫忙看看問題在哪

\\post方法
xhr.open('post','m.php',true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('date='+cdate);

使用ajax有哪些好處呢

1. 前後端分離
   在之前是使用php編寫的檔案，有一堆混在一起的編碼，需要由php輸出成為JavaScript，不方便檢視和修改。現在前端頁面的程式碼可以完全不考慮後端邏輯，只需要接收後端返回資料然後進行處理即可。
2. 維護工作簡化
   之前查詢結果的頁面有兩個，所以頁面樣式有所變動的話就需要同時更改兩個檔案，維護相對麻煩，現在在查詢邏輯不變的情況下只需要維護一個首頁檔案即可。
3. 載入速度提高
   第一次開啟頁面的速度並沒有多少變化，但是後面再次點選查詢的時候只需獲取後端返回的資料檔案即可，所需檔案大小相對之下要遠小於重新載入一整個頁面的大小。

來看看時間上的對比
正常查詢

使用ajax

正常查詢按照我原來的程式碼，是需要重新整理一整個網頁的，總的大小是43.8K，耗時180ms。使用ajax只需要接收伺服器端返回的資料大小，這個檔案的大小是427B，耗時只需10ms！是重新整理整個網頁的1/18！

但是也有缺點

1. 瀏覽器自帶的“後退”功能對於在頁面中進行的非同步操作完全沒有效果，因為這種“後退”是隻能是後退到上一個靜態的頁面。
   
   瀏覽器中自帶的“前進”、“後退”對於使用ajax操作無效
2. 在php中可以直接使用echo將變數值直接變成字串的形式，可以直接輸出一個靜態的網頁。現在使用ajax進行前後端分離之後需要使用‘data-’屬性來將對應的資訊“儲存”在div標籤中。這個主要是JavaScript的變數的時效性問題。

原來

echo  " document.getElementById(\"name\").value= ' ".$value['name']." ' ";  //直接賦值

輸出網頁會變成

document.getElementById("name").value='張三';  

現在

element.setAttribute('data-name',jsonData[i].name);  //儲存值

document.getElementById("name").value=this.getAttribute('data-name);  //使用值