【DOM编程艺术】XMLHttpRequest对象
Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器脚本(客户端)与服务器之间的中间人的角色。
以往的请求都由浏览器发出,而Javascript通过这个对象可以自己发送请求,同时也自己处理响应。
不同浏览器实现XMLHttpRequest对象的方式不太一样。为了保证跨浏览器,你不得不为同样的事情写不同的代码分支。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ajax</title> </head> <body> <div id='new'></div> <script> getNewContent(); function getHTTPObject(){ if(typeof XMLHttpRequest == 'undefined'){ try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');} catch(e){} try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');} catch(e){} try{ return new ActiveXObject('Mxml2.XMLHTTP');} catch(e){} return false; }else{ return new XMLHttpRequest(); } } function getNewContent(){ var request=getHTTPObject(); //在ie7、ie8下由于XMLHTTPObject安全方面的考虑,会提示拒绝访问的错误,ie7、ie8下如果使用ActiveXObject('……')则会显示内容 chrome中也有错误 if(request){ request.open('GET','example.txt',true); request.onreadystatechange=function(){ if(request.readyState==4){
alert('Response Recived'); var para=document.createElement('p'); var txt=document.createTextNode(request.responseText); para.appendChild(txt); document.getElementById('new').appendChild(para); } } request.send(null); }else{ alert('Sorry,your browser doesn\'t support XMLHttpRequest'); }
alert('测试什么叫异步加载'); //很可能alert('测试……')的警告框会先于alert('Response Recived')的警告框。 } </script> </body> </html>
页面上输出了This was loaded asynchronously! (这是example.txt的内容)
example.txt内容
This was loaded asynchronously!
补充:1.XMLHttpRequest对象有许多的方法,其中最常用的就是open方法,他用来指定服务器上将要访问的文件,指定请求类型:GET、POST、SEND.这个方法的第三个参数用于指定请求是否以异步方式发送和处理。
2.onreadystatechange是一个事件处理函数,它会在服务器给XMLHttpRequest对象送回响应的时候被触发执行。request.onreadystatechange=function(){ }
3.在指定了请求的目标,也明确了如何处理响应之后,就可以用send方法来发送请求了。request.send(null);
4.服务器在向XMLHttpRequest对象发回响应时,该对象有许多属性可用,浏览器会在不同阶段更新readyState属性的值,它有5个可能的值
■ 0表示未初始化 ■1表示正在加载 ■2表示加载完毕 ■3表示正在交互 ■4表示完成
访问服务器发送回来的数据要通过两个属性完成。一个是responseText属性,这个属性用于保存文本字符串形式的数据。
另一个是responseXML属性,用于保存Content-Type头部中指定为text/xml的数据
其实是一个DocumentFragment对象。(你可使用各种DOM方法来处理这个对象)
而这也正是XMLHttpRequest这个名称里有XML的原因。
注意:1.Chrome会限制Ajax请求使用的协议,如果你使用file://协议从自己的硬盘里加载example.txt文件,就会看到Cross origin requests are only supported for HTTP.(跨域请求只支持HTTP协议)的错误信息
2.在使用AJAX时,千万要注意同源策略。使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一个域中的数据。
注意: 异步请求有一个容易被忽略的问题是异步性,就是脚本在发送XMLHttpRequest请求之后,仍然会继续执行,不会等待响应返回。代码中的alert('测试什么叫异步加载')有可能会先于alert('Response Recived')的警告框出现。
这就证明了脚本不会等待send的响应,而是会继续执行。之所以说“很可能”,是因为有时候服务器的响应也会非常快。如果你是从本地硬盘上加载文件,请求和响应几乎会同时发生。而如果是从手机浏览器中加载页面,那么在
收到响应之前恐怕就要等很长时间。