Ajax 和 XML: 五種 Ajax 反模式(7)
編輯：AJAX詳解
清單 9. Antipat3_data.XML
圖 3. 復雜的電影清單頁面
清單 10. Antipat3_fixed.Html
<movies>
<movie>
<year>1993</year>
<title>Jurassic Park</title>
</movie>
<movie>
<year>1997</year>
<title>The Lost World: Jurassic Park</title>
</movie>
<movie>
<year>2001</year>
<title>Jurassic Park III</title>
</movie>
</movIEs>
可以看到如 圖 3 所示的結果。
圖 3. 復雜的電影清單頁面
這其實不是糟糕的代碼。只不過是用大量的代碼執行一個實際上相當簡單的任務。產生的頁面一點兒都不復雜。它不能在客戶端對頁面進行排序和搜索。事實上，幾乎沒有理由對 XML 和 Html 進行復雜的轉換。
難道不能像 清單 10 那樣讓服務器返回 Html 而不是 XML，從而變得更簡單點兒嗎？
清單 10. Antipat3_fixed.Html
<html><script>
var req = null;
function processReqChange() {
if (req.readyState == 4 && req.status == 200 ) {
var dobj = document.getElementById( 'tableDiv' );
dobj.innerHTML = req.responseText;
}
}
function loadUrl( url ) { ... }
var url = window.location.toString();
url = url.replace( /antipat3_fixed.html/, 'antipat3_content.html' );
loadUrl( url );
</script><body><div id="tableDiv"></div></body></Html>
小編推薦
熱門推薦