Ajax

第一個課程ajax：

全局重新整理： 整個浏覽器被新的資料覆寫。 在網絡中傳輸大量的資料。 浏覽器需要加載，渲染頁面。

局部重新整理： 在浏覽器器的内部，發起請求，擷取資料，改變頁面中的部分内容。

其餘的頁面無需加載和渲染。 網絡中資料傳輸量少， 給使用者的感受好。

ajax是用來做局部重新整理的。局部重新整理使用的核心對象是 異步對象（xmlhttprequest）

這個異步對象是存在浏覽器記憶體中的 ，使用javascript文法建立和使用xmlhttprequest對象。

asynchronous: 異步的意思 javascript：javascript腳本，在浏覽器中執行 and : 和 xml : 是一種資料格式

ajax是一種做局部重新整理的新方法（2003左右），不是一種語言。 ajax包含的技術主要有javascript,

dom,css, xml等等。 核心是javascript 和 xml 。

javascript：負責建立異步對象， 發送請求， 更新頁面的dom對象。 ajax請求需要伺服器端的資料。

xml： 網絡中的傳輸的資料格式。 使用json替換了xml 。

1）建立異步對象 ​<code>​var xmlhttp = new xmlhttprequest();​</code>​

2）給異步對象綁定事件。onreadystatechange ：當異步對象發起請求，擷取了資料都會觸發這個事件。

這個事件需要指定一個函數， 在函數中處理狀态的變化。

btn.onclick = fun1()

function fun1(){

alert("按鈕單擊");

}

​ 異步對象的屬性 readystate 表示異步對象請求的狀态變化

0：建立異步對象時， new xmlhttprequest();

1: 初始異步請求對象， xmlhttp.open()

​ 2：發送請求， xmlhttp.send()

​ 3: 從伺服器端擷取了資料，此時3， 注意3是異步對象内部使用， 擷取了原始的資料。

4：異步對象把接收的資料處理完成後。 此時開發人員在4的時候處理資料。

​ 在4的時候，開發人員做什麼 ？ 更新目前頁面。

​ 異步對象的status屬性，表示網絡請求的狀況的， 200， 404， 500， 需要是當status==200

​ 時，表示網絡請求是成功的。

初始異步請求對象

異步的方法open().

​<code>​xmlhttp.open(請求方式get|post, "伺服器端的通路位址", 同步|異步請求（預設是true，異步請求）)​</code>​

例如：

xmlhttp.open("get", "loginservlet?name=zs&amp;pwd=123",true);

4)使用異步對象發送請求

​<code>​ xmlhttp.send()​</code>​

擷取伺服器端傳回的資料， 使用異步對象的屬性 responsetext .

使用例子：​<code>​xmlhttp.responsetext ​</code>​

回調：當請求的狀态變化時，異步對象會自動調用onreadystatechange事件對應的函數。

​

ajax發起請求-------servlet（傳回的一個json格式的字元串 { name:"河北", jiancheng:"冀","shenghui":"石家莊"}）

json分類：

json對象 ，jsonobject ,這種對象的格式 名稱:值， 也可以看做是 key:value 格式。

json數組， jsonarray, 基本格式 [{ name:"河北", jiancheng:"冀","shenghui":"石家莊"} , { name:"山西", jiancheng:"晉","shenghui":"太原"} ]

為什麼要使用json ：

json格式好了解

json格式資料在多種語言中，比較容易處理。 使用java， javascript讀寫json格式的資料比較容易。

json格式資料他占用的空間下，在網絡中傳輸快， 使用者的體驗好。

處理json的工具庫： gson（google）； fastjson（阿裡），jackson， json-lib

在js中的，可以把json格式的字元串，轉為json對象， json中的key，就是json對象的屬性名。這裡使用​<code>​jackson​</code>​

​<code>​servlet中​</code>​

​<code>​js中​</code>​

作者：g0rez​