學習是為了明天，為了更好的明天，需要更努力的學習！

??1 XMLHttpRequest是Ajax的基礎對象。異步的數據請求是通過這個對象來實現的。下面的代碼是建立XMLHttpRequest對象的示例?。
??2
??3 代碼在IE6、FireFox1. 5 、NetScape8. 1 、Opera8.54調試通過。服務器為Window2000? + ?IIS5
??4
??5 1 、創建XMLHTTPREQUEST對象
??6
??7 var?xhr;
??8 var?requestType? = ? "" ;
??9
?10 // xhr?=?new?XMLHttpRequest();
?11
?12 function?createXMLHttpRequest()
?13 {
?14 ???? if ?(window.ActiveXObject)??? // ?IE下創建XMLHTTPREQUEST
?15 ???? {
?16 ????????xhr? = ? new ?ActiveXObject( " Microsoft.XMLHTTP " );
?17 ????}
?18 ???? else ? if ?(window.XMLHttpRequest)??? // ?其他瀏覽器創建XMLHTTPREQUEST
?19 ???? {
?20 ????????xhr? = ? new ?XMLHttpRequest();
?21 ????}
?22 }
?23
?24 這種方法對于低版本的IE不適合。
?25
?26 2 、XMLHTTPREQUEST對象請求數據
?27
?28 function?startRequest(requestedList)
?29 {
?30 ???? if ?(xhr)
?31 ???? {
?32 ????????requestType? = ?requestedList;
?33 ????????createXMLHttpRequest();
?34 ????????xhr.onreadystatechange? = ?handleStateChange;
?35 ????????xhr.open( " GET " , " ../ajax/paraseXML.xml " , true );
?36 ????????xhr.send( null );
?37 ????}
?38 ???? else
?39 ????????alert( " XMLHTTPREQUEST?IS?FALSE " );
?40 }
?41
?42 這是個處理XML文檔的示例，請求的文件是paraseXML.xml文件
?43 這里需要說明的是：如果請求的是一個HTML文件，服務器對象會將所有的標簽全部返回，包括 < HTML > 、 < head > 、 < meta > 等標簽。響應數據如果包含HTML標簽，最好把這些標簽去掉。
?44
?45 3 、XMLHTTPREQUEST對象返回數據處理
?46
?47 function?handleStateChange()
?48 {
?49 ???? if ?(xhr.readyState? == ? 4 )
?50 ???? {
?51 ???????? if ?(xhr.status? == ? 200 )
?52 ???????? {
?53 ???????????? if ?(requestType? == ? " north " )
?54 ???????????? {
?55 ????????????????listNorthStates();
?56 ????????????}
?57 ???????????? if ?(requestType? == ? " all " )
?58 ???????????? {
?59 ????????????????listAllStates();
?60 ????????????}
?61 ????????}
?62 ????}
?63 }
?64
?65 4 、數據處理函數
?66
?67 function?listNorthStates()
?68 {
?69 ???? // ?xhr?為XMLHTTPREQUEST對象
?70 ???? // ?xmlDoc為XMLHTTPREQUEST響應的XML文檔對象
?71 ????var?xmlDoc? = ?xhr.responseXML;??? // ?取得XML文檔對象
?72 ????var?northNode? = ?xmlDoc.getElementsByTagName( " north " )[ 0 ];??? // ?取得所有處于北方的節點
?73 ????var?northStates? = ?northNode.getElementsByTagName( " state " );??? // ?在處于北方的節點中提取省份數據
?74 ????outputList( " north?States " ,?northStates);??? // ?輸出省份數據
?75 }
?76
?77 function?listAllStates()
?78 {
?79 ????var?xmlDoc? = ?xhr.responseXML;
?80 ????var?allStates? = ?xmlDoc.getElementsByTagName( " state " );??? // ?取得所有的省份數據
?81 ????outputList( " All?States?in?document? " ,allStates);??? // ?輸出省份的數據
?82 }
?83 /**?*/ /** ********************************************************
?84 //?輸出數據
?85 //?title:?輸出數據的標題
?86 //?states:?輸出數據來源
?87 ******************************************************* */
?88 function?outputList(title,states)
?89 {
?90 ????var?out? = ?title;
?91 ????var?currentState? = ? null ;??? // ?初始化省份對象
?92 ???? for ?(var?i? = ? 0 ;?i? < ?states.length;?i ++ )??? // ?列出Ststes對象的所有數據,生成輸出串
?93 ???? {
?94 ????????currentState? = ?states[i];??? // ?取得當前的省份
?95 ???????? // ???生成輸出HTML字符串
?96 ????????out? = ?out? + ? " <ul><font?face='仿宋_GB2312'><span?style='font-size:?9pt'> " ;
?97 ????????out? = ?out? + ? " <li> " ? + ?currentState.childNodes[ 0 ].nodeValue? + ? " </li> " ;
?98 ????????out? = ?out? + ? " </span></font></ul> " ;
?99 ????}
100 ???? // ?取得輸出串的對象,輸出生成的字符串
101 ????var?test? = ?document.getElementById( " test " );
102 ????test.innerHTML? = ?out;
103 }
104
105 5 、完整示例文件
106
107 <! DOCTYPE?html?PUBLIC? " -//W3C//DTD?XHML?1.0?Strict//EN " ? " http://www.w3.org/TR/xHML/DTD/xhtml-strict.dtd " >
108 < html?xmlns = " http://www.w3.org/1999/xhtml " >
109
110 < head >
111 < meta?http - equiv = " Content-Type " ?CONTENT = " text/html;?charset=gb2312 " >
112 < meta?http - equiv = " Cache-Control " ?CONTENT = " no-cache " > ?
113 < meta?http - equiv = " Pragma " ?CONTENT = " no-cache " >
114 < meta?http - equiv = " Expires " ?CONTENT = " 0 " > ??????
115
116 < title > AJAX?測試 </ title >
117 < script?type = " text/javascript " >
118 //// /?創建XMLHttpRequest對象
119 var?xhr;
120 var?requestType? = ? "" ;
121
122 // xhr?=?new?XMLHttpRequest();
123
124 function?createXMLHttpRequest()
125 {
126 ???? if ?(window.ActiveXObject)
127 ???? {
128 ????????xhr? = ? new ?ActiveXObject( " Microsoft.XMLHTTP " );
129 ????}
130 ???? else ? if ?(window.XMLHttpRequest)
131 ???? {
132 ????????xhr? = ? new ?XMLHttpRequest();
133 ????}
134 }
135 //// /?ＸＭＬ文檔處理
136 function?startRequest(requestedList)
137 {
138 ???? if ?(xhr)
139 ???? {
140 ????????requestType? = ?requestedList;
141 ????????createXMLHttpRequest();
142 ????????xhr.onreadystatechange? = ?handleStateChange;
143 ????????xhr.open( " GET " , " ../ajax/paraseXML.xml " , true );
144 ????????xhr.send( null );
145 ????}
146 ???? else
147 ????????alert( " XMLHTTPREQUEST?IS?FALSE " );
148 }
149
150 function?handleStateChange()
151 {
152 ???? if ?(xhr.readyState? == ? 4 )
153 ???? {
154 ???????? if ?(xhr.status? == ? 200 )
155 ???????? {
156 ???????????? if ?(requestType? == ? " north " )
157 ???????????? {
158 ????????????????listNorthStates();
159 ????????????}
160 ???????????? if ?(requestType? == ? " all " )
161 ???????????? {
162 ????????????????listAllStates();
163 ????????????}
164 ????????}
165 ????}
166 }
167
168 function?listNorthStates()
169 {
170 ????var?xmlDoc? = ?xhr.responseXML;
171 ????var?northNode? = ?xmlDoc.getElementsByTagName( " north " )[ 0 ];
172 ????var?northStates? = ?northNode.getElementsByTagName( " state " );
173 ????outputList( " north?States " ,?northStates);
174 }
175 function?listAllStates()
176 {
177 ????var?xmlDoc? = ?xhr.responseXML;
178 ????var?allStates? = ?xmlDoc.getElementsByTagName( " state " );
179 ????outputList( " All?States?in?document? " ,allStates);
180 }
181 function?outputList(title,states)
182 {
183 ????var?out? = ?title;
184 ????var?currentState? = ? null ;
185 ???? for ?(var?i? = ? 0 ;?i? < ?states.length;?i ++ )
186 ???? {
187 ????????currentState? = ?states[i];
188 ????????out? = ?out? + ? " <ul><font?face='仿宋_GB2312'><span?style='font-size:?9pt'> " ;
189 ????????out? = ?out? + ? " <li> " ? + ?currentState.childNodes[ 0 ].nodeValue? + ? " </li> " ;
190 ????????out? = ?out? + ? " </span></font></ul> " ;
191 ????}
192 ????var?test? = ?document.getElementById( " test " );
193 ????test.innerHTML? = ?out;
194 }
195 </ script >
196
197 </ head >
198
199 < body >
200
201 < form?action = " # " >
202 ???? <!-- XML文檔請求? -->
203 ???? < input?type = “button " ?value= " AJAX?Test?north " ?onclick= " startRequest( ' north ' ); " />
204 ???? < input?type = " button " ?value = " AJAX?Test?all " ?onclick = " startRequest('all'); " />
205 ???? <!-- SP.Net請求? -->
206 ???? < input?type = " button " ?value = " AJAX?Test?ASPX " ?onclick = " startRequestFromServer(); " />
207 ???? <!-- DOM對象的清除與創建? -->
208 ???? < input?type = " button " ?value = " search " ?onclick = " startRequestFromLanguage() " />
209 </ form >
210
211 < div?id = " test " >< font?face = " 仿宋_GB2312 " >< span?style = " font-size:?9pt " ></ span ></ font >
212 </ div >
213 </ body >
214
215 </ html >
216
217 6 、參考書籍
218
219 《Ajax基礎教程》人民郵電出版社
220
221 本程序為該書的一些示例，僅供入門參考
222
223 7 、補充
224
225 忘記XML文件:?paraseXml.xml
226 將該文件與上面的HTML文件放在相同的目錄下即可
227
228 <? xml?version = " 1.0 " ?encoding = " UTF-8 " ?>
229 < states >
230 ???? < north >
231 ???????? < state > 遼寧 </ state >
232 ???????? < state > 吉林 </ state >
233 ???????? < state > 黑龍江 </ state >
234 ???????? < state > 內蒙古 </ state >
235 ???? </ north >
236 ???? < south >
237 ???????? < state > 福建 </ state >
238 ???????? < state > 廣東 </ state >
239 ???????? < state > 云南 </ state >
240 ???????? < state > 廣西 </ state >
241 ???? </ south >
242 ???? < east >
243 ???????? < state > 上海 </ state >
244 ???????? < state > 浙江 </ state >
245 ???????? < state > 江蘇 </ state >
246 ???????? < state > 安徽 </ state >
247 ???? </ east >
248 ???? < west >
249 ???????? < state > 新疆 </ state >
250 ???????? < state > 陜西 </ state >
251 ???????? < state > 山西 </ state >
252 ???????? < state > 寧夏 </ state >
253 ???? </ west >
254 </ states >