查看完整版本: [-- 一个简单的 ajax 请求和获取数据的演示 --]

风信Java论坛 ›› ajax 讨论交流中心 ›› 一个简单的 ajax 请求和获取数据的演示 登录 -> 注册

1F 一个简单的 ajax 请求和获取数据的演示   jastby Post by : 2009-05-20 11:30:51.0

本示例所需基础知识：

XMLHttpRequest对象

readyState的五种状态详解

本示例通过输入一个网址，然后使用ajax请求该网址，得到所请求的整个网页代码，最后把代码写到 textarea 当中 和 div 中进行预览：

   xhtml代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.  <head> 
  4.   <title> new document </title> 
  5.   <meta name="generator" content="editplus" /> 
  6.   <meta name="author" content="www.javawind.net" /> 
  7.   <meta name="keywords" content="javawind" /> 
  8.   <meta name="description" content="javawind" /> 
  9.  </head> 
  10.  
  11.  <body> 
  12.   <script type="text/javascript"> 
  13.   <!--  
  14.     // 根据ID找元素对象  
  15.     var $=function(id){  
  16.         return document.getElementById(id);  
  17.     }  
  18.  
  19.     // 把当前页面的基地址设置为请求的URL，以正常显示图片，但是CSS不能正常  
  20.     function setBase(url){    
  21.         var base = document.createElement("base");  
  22.         base.href = url;  
  23.         var head = document.getElementsByTagName("head")[0];  
  24.         head.appendChild(base);  
  25.     }  
  26.  
  27.     function getHtml(url){  
  28.         setBase(url);   //可省略  
  29.  
  30.         var xmlhttp;  
  31.         // 尝试创建可用的 XMLHTTP 对象，因为每个浏览器的对象都不一样  
  32.         try{  
  33.             xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");  
  34.         }catch(e){  
  35.             try{  
  36.                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
  37.             }catch(e){  
  38.                 try{  
  39.                     xmlhttp= new XMLHttpRequest();  
  40.                 }catch(e){}  
  41.             }  
  42.         }  
  43.  
  44.         // 当 xmlhttp 对象状态变化时 触发该方法  
  45.         xmlhttp.onreadystatechange=function(){  
  46.             if(xmlhttp.readyState==4){  
  47.                 if(xmlhttp.status==200){  
  48.                     // xmlhttp.responseText 为请求返回的数据  
  49.                     $("html").value = xmlhttp.responseText;  
  50.                     $("view").innerHTML = xmlhttp.responseText;  
  51.                 }else{  
  52.                     alert("请求错误");  
  53.                 }  
  54.             }  
  55.         }  
  56.  
  57.         // 发送请求  
  58.         xmlhttp.open("GET",url, true);  
  59.         xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');  
  60.         xmlhttp.send(null);  
  61.     }  
  62.   //--> 
  63.   </script>    
  64.   <input type="text" name="url" id="url" size="30" value="http://www.javawind.net" /> 
  65.   <input type="button" value="Load it" onclick="getHtml($('url').value);" /> 
  66.   <br /> 
  67.   <textarea name="html" id="html" rows="10" cols="100">html代码区域</textarea> 
  68.  
  69.   <br /><br /> 
  70.   页面预览:  
  71.   <div id="view" style="border:1px solid #FF9900">预览区域</div> 
  72.  </body> 
  73. </html> 

风信Java论坛 ›› ajax 讨论交流中心 ›› 一个简单的 ajax 请求和获取数据的演示 登录 -> 注册

查看完整版本: [-- 一个简单的 ajax 请求和获取数据的演示 --]
CopyRight © 2008-2009 JavaWind.Net Studio All Rights Reserved
Powered By JWind.BBS Vesion 1.0.0 Beta1 Processed in 5 ms,0 (Queries)  Gzip enabled
粤ICP备07511478号