明後兩天梁言兵老師來講Ajax及其最近作過的一個真實的Ajax項目，所以，我今天講解梁老師的課程所需要的一些前置知識。
因為大家對Javascript不是很熟悉，所以我首先講解Javascript的DHTML功能。本來入學考試要求大家很好地掌握Javascript的，但是大家都不能理解我們的苦衷，並沒有專心去對待Javascript。想想我前兩年強調javascript和css的重要性時，一些培訓中心的人居然對此不屑一顧，當他們諮詢學員時，也以此來攻擊我，學員們也對這些培訓中心的蠱惑深信不疑！隨著Ajax的流行，這些人又跟風覺得Javascript重要了，現在同學們應該能靜下心來去好好學習Javascript了。
通過DHTML和Javascript可以實現網頁顯示的局部更新，先用一個動態產生表格內容的Javascript來講解，兩種方式：
表格專用的資料模型來實現：
<Script language=javaScript>
function LianJie()
{
//selValue=mainTab.rows[0].cells[0].childNodes[0].innerText;
//selValue=window.sel.innerText
selValue=window.sel.options[window.sel.selectedIndex].text
texValue=window.text1.value;
innValue=selValue+texValue;
newRow=window.mainTab[1].insertRow()
alert(newRow);
newCell=newRow.insertCell()
newCell.innerText=innValue;
}
</Script>
<Table id="mainTab">
<TR>
<TD>
<select style="width:200px;" id="sel" Name="sel">
<option>sdfsdfsdfdsfsdf</option>
<option>1111111111111</option>
<option>222222222222</option>
</select>
</TD>
<TD>
<input type=text Name="text1" id="test1">
</TD>
<TR>
<input type=button value="串連" onClick=LianJie()>
<Table>
<Table border=1 id="mainTab">
</Table>
通過標準的DOM物件模型來實現：
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<SCRIPT type="text/javascript">
function addRow()
{
alert("hehe");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
var value = document.createTextNode("1111");
td.appendChild(value);
tr.appendChild(td);
tbody.appendChild(tr);
document.getElementById("t1").appendChild(tbody);
//background="#FF0000";
//.addChild(obj);
}
</SCRIPT>
</head>
<body>
This is my HTML page. <br>
<TABLE id="t1">
<tr><td>2222</td></tr>
</TABLE>
<a href="#" onclick="addRow()">test</a>
</body>
</html>
有了動態產生表格的直觀印象後，我再告訴大家動態需要的資料不是直接從網頁的文字框中直接擷取，而是從Web伺服器上去擷取。不能讓瀏覽器直接去訪問web伺服器，因為這樣將得到一個新的網頁，而不是繼續保持原來的網頁。要保持原來的網頁，讓javascript在原來的網頁中繼續運行，應該使用網頁中的一個對象去串連web伺服器，例如applet，論壇發帖也是一個不錯的ajax應用。
在javascript可以直接使用一個XMLHttpRequest對象，來向Web伺服器發送請求和接受Web伺服器返回的結果，HTML、CSS、JavaScript、XMLHttpRequest等基本知識的結合使用就是Ajax。
接著通過一個簡單的例子講解了XMLHttpRequest的應用。
什麼時候用Ajax，在一個頁面中提交請求後，伺服器回複的頁面還是原來的，只是資料不同，或者是對頁面中的某些欄位提前進行校正。
講解了jsonrpc這種Ajax架構的作用和運行原理，它封裝了底層通訊和Javascript對象的序列化和還原序列化。
jsonrpc的用戶端的構造方法先向伺服器發請求，獲得有哪些對象和方法，然後將這些對象和方法增加到用戶端對象上，所以，用戶端可以調用jsonrpcclient.hello.sayHello這樣的方法。有時間的話，參照這個寫一個能動態向對象增加方法的實驗例子。
根據王濤的提問，詳細講解url編碼(大家對這塊實際很糊塗,出乎我的意料!),為了便於大家理解，我先從
base64編碼開始講起，接著再講url編碼。
http://www.baidu.com/s?wd=ajax+%BF%F2%BC%DC&cl=3
reqeust.getParameter("wd")得到的不是ajax+%BF%F2%BC%DC串,
getParameter返回的是一個字串,java串是unicode碼.怎樣把ajax+%BF%F2%BC%DC串變成真正的串,是getParamter的內部問題了.但它內部實在是沒有做得很好。因為HTTP協議中沒有辦法說明URL編碼時的字元集編碼，我預料在下一代的HTTP協議中應該增加這方面的功能。
想到一個學員面試時的考題:"a中b國"的GB2312編碼是一個位元組數組，從這個數組中識別出有幾個字元?首先要明白英文字元的最高bit位為0，中文字元的最高bit位為1。範例程式碼：
byte buf[] = "a中b國".getBytes("GB2312");
int count = 0;
for(int i=0; i<buf.length; i++)
{
count++;
if((buf[i] & 0x80) != 0)
{
i++;
}
}
因為梁言兵老師的項目中要用到jsp，我參照《深入體驗Java Web開發內幕》的書稿給大家先簡單過了一下jsp和jsp中如何使用JavaBean。注重強調了JSP的視圖作用，盡量將jsp放在WEB-INF或其子目錄中，why?JSP只作為視圖組件，不要在其中編寫商務邏輯，例如，不要訪問資料庫。但JSP頁面中可以有顯示邏輯。注意區分視圖model和業務model的區別，用TreeMode來理解，業務模型給TreeMode，TreeMode給視圖。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
