Ajax基礎1
1，ajax是什麽？
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。AJAX 不是新的編程語言，而是一種使用現有標準的新方法。AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。
ajax工作原理：
瀏覽器端激發事件，生成一個xmlhttp請求，發送xmlhttp請求到服務器，服務器處理和響應ajax發送的請求，瀏覽器端接收響應，用js處理響應，然後展示在網頁上。
AJAX是基於現有的Internet標準
AJAX是基於現有的Internet標準，並且聯合使用它們：
- XMLHttpRequest 對象 (異步的與服務器交換數據)
- JavaScript/DOM (信息顯示/交互)
- CSS (給數據定義樣式)
- XML (作為轉換數據的格式)
2，ajax實例（灰常重要）
XMLHttpRequest 是 AJAX 的基礎。XMLHttpRequest是一個對象，object。作用在於它可以在後臺與服務器交換數據，從而實現更新某部分網頁的作用。現代所有的瀏覽器都有內建的XMLHttpResquest對象，老版的ie5和ie6瀏覽器不支持XMLResquest()對象，但是它們支持ActiveXObject("Microsoft.XMLHTTP")對象。所以為了嚴謹，還是需要提前判斷一下到底用哪個。
<body>
<script> functionloadXMLDoc() //自定義一個函數，這個函數可以下載和展示服務端響應的文件。 { var xmlhttp; //聲明一個空變量，這個變量在後面將會成為一個實例對象， if (window.XMLHttpRequest) //如果這個頁面有XMLHttpResquest響應，那xmlhttp就會成為XMLHttpRequest()對象的實例對象。 { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xmlhttp=new XMLHttpRequest(); //xmlhttp是XMLHttpRequest的一個實例對象，所謂實例對象，我的理解就是它繼承了XMLHttpResRequest的屬性和方法，並且還可以自定義自己的屬性和方法 }else //如果我們的頁面沒有XMLHttpResquest響應（我意思就是它內建對象中沒有XMLHttpResquest），那我們就可以確定它是比較老的ie瀏覽器，我們可以用ActiveXObjext（“Microsoft。XMLHTTP”）來實現一樣的功能。xmlhttp變量仍舊會成為一個實例對象，它可以調用父對象的方法和屬性。 { // IE6, IE5 瀏覽器執行代碼 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
//到這裏xmlhttp已經成為一個繼承了父對象方法和屬性的實例對象。
xmlhttp.onreadystatechange=function() //發送請求後，服務器在傳輸數據回來以前，會先發一個狀態碼，如果本地的readyState改變了，就觸發onreadystatechange事件， if (xmlhttp.readyState==4 && xmlhttp.status==200) //如果收到了服務器響應，觸發了onreadystatechange事件，這個事件是動態的1-4分別是建立連接，接收，處理中，處理完成，我們一邊處理一邊更新readystate，我們處理到4而且網站發回的狀態碼是200，我們就可以準備向用戶展示數據了 { document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//有兩種參數可以使用：responseText(獲得字符串形式的響應數據)，responseXML獲取xml形式的響應數據。然後寫到合適的位置 } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); //規定請求的類型（get方式，文件的地址，確實是異步的）async就先不要設置成false了，如果是false的話，就不用判斷服務器返回的狀態碼了，比較復雜且沒啥用，留後 xmlhttp.send();//真正地把請求發出去 } </script>
<div id="myDiv"><p>ajax將會替代這句話</p><div>
<button type="button" onlick="loadXMLDoc()">修改內容</button>
</body>
3,xml請求(XMLHttpRequest)
XMLHttpRequest對象用於和服務器交換數據。
將請求發送到服務器兩種方法：
xmlhttp.open(method,url,async)：規定請求的類型、URL 以及是否異步處理請求。
- method：請求的類型；GET 或 POST
- url：文件在服務器上的位置
- async：true（異步）或 false（同步）
xmlhttp.send(string):將請求發送到服務器，執行
- string：僅用於 POST 請求
補充get和post區別：
與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。多用get，然而，在以下情況中，請使用 POST 請求：
- 無法使用緩存文件（更新服務器上的文件或數據庫）
- 向服務器發送大量數據（POST 沒有數據量限制）
- 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
針對上邊的xmlhttp.open和send語句，我們也可以做一些操作：
get請求主要是請服務器返回信息
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true); //在url後邊加上問好加上一些無關的數字，保證獲得最新的信息，因為有可能我們的瀏覽器已經把內容緩存好了
xmlhttp.send();
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true); //問號後面加的是用戶有關的信息
xmlhttp.send();
post請求主要是提交一些信息到服務器上
xmlhttp.open("POST","/try/ajax/demo_post.php",true); //普通的post請求
xmlhttp.send();
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
//setRequestHeader(header,value) 向請求添加 HTTP 頭，header: 規定頭的名稱，value規定頭的值
解析服務器的響應：
如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
| 屬性 | 描述 |
|---|---|
| responseText | 獲得字符串形式的響應數據。 |
| responseXML | 獲得 XML 形式的響應數據。 |
AJAX - onreadystatechange 事件比較重要，目前不甚理解：
當請求被發送到服務器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。
下面是 XMLHttpRequest 對象的三個重要的屬性：
在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。
當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：
註意： onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-1、1-2、2-3、3-4，對應著 readyState 的每個變化。並不是只被觸發一次
調用回調函數：
挺復雜的，不過大體意思就是，如果一個網頁上有好幾個異步程序，那可以用function，形參，等包裝一下。
4，ajax asp/php實例
http://www.runoob.com/ajax/ajax-asp-php.html
這個實例厲害了，需要好好研究一下，此外，還得補充php表單的相關知識，還有html裏的事件。
5，ajax數據庫實例
http://www.runoob.com/php/php-ajax-database.html 這個為主，ajax和php交互的
6，xml實例
Ajax基礎1