Ajax基础-XMLHttpRequest对象的创建、数据请求和处理

  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 >

原地址： http://dev.csdn.net/author/crywolfwang/063be8aeb9e94284871ce597da36d253.html