第六章 ajax

標籤：功能   索引   syn   自身   優雅   方便   object   strong   瀏覽器   

　　ajax應用程式通常只不過是一個針對HTML的代碼塊請求。這種被稱作AHAH（asynchronous HTTP and HTML，非同步HTTP和HTML）的技術，通過jQuery來實現。

　　所有的Ajax請求在預設情況下都是非同步。

　　對於必須要延遲到載入完成才能繼續的操作，jQuery提供了一個回呼函數沒通過回呼函數可以再某些效果完成之後執行操作。Ajax回調的功能與此類似，只不過是在資料從伺服器返回後執行操作。

　　1、追加HTML

　　2、操作javascript

　　取得JSON

　　前面我們曾經看到過，JavaScript對象是有一些“鍵-值”對組成的，而且還可以方便的使用花括弧{}來定義。另一方面，JavaScript的數組則可以使用方括弧【】和飲食聲明的

逐漸遞增的鍵進行動態定義。將這兩種文法組合起來，可以輕鬆的表達複雜而且龐大的資料結構。

　　Douglas Crockford為了這種簡單的文法起了一個名字，叫做JSON（javascript object notation ，javascript對象標記法）。通過這種表示方法能夠方便的取代資料量龐大的XML格式：

{"key":"value","key1":[   "array",    "of",    "items"]}

　　在對象字面量和數字字面量的基礎上，JSON格式的文法具有很強的表達能力，但對其中的值也有一定的限制。例如，JSON規定多有的對象鍵以及所有的字串值，都必須包含在雙引號中。而且函數也不是有效JSON值。由於存在這些限制，開發人員最好不手工編輯JSON，而應該用伺服器端語言來產生。

　　要取得這些資料，可以使用$.getJSON()方法。這個方法會在取得相應檔案後對檔案進行處理，會解析這個字串，並將處理得到的JavaScript對象提供給調用代碼。

　　使用全域jQuery函數

　　到目前為止，我們使用的多有jquery方法都需要通過$()函數構建一個jQuery對象進行調用。通過選擇符運算式，我們可以指定一組要操作的DOM記額點，然而再用這些jQuery方法以某種方式對他們進行操作。$.getJSON()函數卻不一樣。從邏輯上說，沒有該方法適用的DOM元素；座位結果的對象只能提供給指令碼，而不能插入到頁面中。為此，gerJSON（）是作為全域jQuery對象（有jQuery庫定義的jQuery活$對象）的方法定義的，也就是說，他不是個別jQuery對象執行個體（即通過$()函數建立的對象）的方法。

　　如果javascript中有類似其他物件導向語言中的類，那我們可以把$.getJSOn()稱為類似方法。為了便於理解，我們在這裡稱其為全域函數；實際上為了不與其他函數名稱發生衝突，這些全域函數使用的是jQuery命名空間。

　　$.getJSON()函可以接受第二個參數，這個參數是當家在完成時調用的函數。如上所述，Ajax請求的都是非同步，回呼函數提供了一種等待資料返回的方式，而不是立刻執行代碼。回呼函數也需要一個參數，改參數中儲存著返回的資料。

$.getJSON(‘b.json‘,function(data))

可以通過data變數來遍曆JSON資料結構了。具體來說 需要迭代頂級數組，為每個項構建相應的HTML代碼。雖然可以再這裡使用標準的for迴圈，但是我們需要藉此機會介紹jQuery的另一個實用全域函數$.each()。對應方法是.each()。$.each()函數不操作jQuery對象，它以數組或者對象作為第一個參數，以回呼函數作為第二個參數。此外，還需要將每次迴圈中數組或對象的當前索引和當前項座位回呼函數的兩個參數。

關於加粗位置，需要仔細閱讀，數組或對象作為第一參數（data），以回呼函數作為第二個參數 function（entryIndex，entry）{}entry是建立div的className//有點不太懂這塊。注意下面這段話

　　這裡通過$.each()函數一次遍曆每個項，使用entry對象的內容構建起HTML代碼結構。構建好HTML之後，通過.html（）把他插入到<div>中替換以前的內容。

通過這段話將其理解為。entry是要建立的對象，並且看為資料庫輸入的對象。

　　儘管JSON格式很簡潔，但他卻不容許任何錯誤。包括方括弧、花括弧、引號和逗號都必須合理且正確的使用，否則檔案不會載入。並且在多數瀏覽器中，當檔案載入失敗時我們看不到任何錯誤資訊；指令碼知識靜默的徹底終止運轉。

　　3、執行指令碼

　　雖然可以在需要時動態引入<script>標籤，但諸如需要代碼的更優雅的方式則是通過jQuery直接載入.js檔案。

　　向頁面中注入指令碼與載入HTML片段一樣簡單。但在這種情況下，需要使用全域函數$.getScript（），這個全域函數與他的同輩函數類似，接受一個URL參數以尋找指令檔。

$.getScript（‘c.js）；

　　以這種方式取得的指令碼在當前頁面的全域環境下執行。這意味著指令碼有權訪問在全域環境中定義的函數和變數，當然也包括jQuery自身。

 這裡先中斷一下，要瞭解學習一下XML。

第六章 ajax