先上原理圖:

背景：

     1.傳統的Web網站，提交表單，需要重新加載整個頁面。

     2.如果服務器長時間未能返回Response，則客戶端將會無響應，用戶體驗很差。

     3.服務端返回Response后，瀏覽器需要加載整個頁面，對瀏覽器的負擔也是很大的。

     4.瀏覽器提交表單后，發送的數據量大，造成網絡的性能問題。

問題：

     1.如何改進？

     2.AJAX是什么？

     3.有什么優勢？

     4.有什么缺點？

一、什么是 AJAX

1.為什么需要AJAX

當需要從服務器獲取數據，并刷新頁面的操作，如果不采用AJAX，則需要用提交整個表單的方式，當提交表單時，發送請求給服務器，頁面需要等待服務器發送完response后，頁面才能恢復操作。

2.AJAX的概念：

     1.AJAX = 異步 JavaScript 和 XML。

     2.AJAX 是一種用于創建快速動態網頁的技術。

     3.通過在后臺與服務器進行少量數據交換，可以使網頁實現異步更新。

     4.可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

3.什么叫異步

當前頁面發送一個請求給服務器，當前頁面不需要等待服務器響應才能操作網頁。發送完請求之后，當前頁面可以繼續瀏覽，操作。

4.什么叫局部刷新

我們可以用兩種方式來實現部分刷新。

1. iframe頁面重載的方式。

這種方式雖然實現了部分刷新，但是是頁面的重載，所以也會帶來性能上的問題。

Step1.在頁面中定義一個Iframe

<iframe id="indexFrame" name="index" width="1000" height="800"    frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="margin-top:100px;"></iframe>

Step2.設置Iframe的src

var indexFrame = document.getElementById("indexFrame");indexFrame.src = "introduction.php";

Step3.添加一個button的點擊事件，當點擊這個button時，重新設置Iframe的src，實現iframe里面的頁面刷新。Iframe外面的內容不刷新。

<button id="room" onclick='IndexClick("room")'>Click Me!</button>

function IndexClick(moduleKey) { var indexFrame = document.getElementById("indexFrame"); if(indexFrame == null) {   indexFrame = parent.document.getElementById("indexFrame"); } var url = "introduction.php"; switch (moduleKey) {  case "introduction":   url = "introduction.php";   break;  case "room":   url = "room.php";   break;  default:   {   } } indexFrame.src = url;}