<<上一主题 下一主题>>  首页 >> Java EE Web Develop >> ajax 讨论交流中心 >> 一个简单的 ajax 请求和获取数据的演示
发表新主题 回复该帖子
主题：一个简单的 ajax 请求和获取数据的演示
jastby
帖子档案  大 小 楼主 一个简单的 ajax 请求和获取数据的演示   Post by : 2009-05-20 11:30:51.0
  • 幼儿园
  • 幼儿园
  • UID：2
  • 主题：126
  • 帖子：219
  • 加为好友 加为好友    发送短信 发送短信

本示例所需基础知识：

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> 
返回页面顶部  

CopyRight © 2008-2009 JavaWind.Net Studio All Rights Reserved
Powered By JWind.BBS Vesion 1.0.0 Beta1 Processed in 19 ms,0 (Queries)  Gzip enabled
WAP - 清除Cookies - 联系我们 - JavaWind.Net Studio - Archiver - TOP Valid XHTML 1.0 Transitional Valid CSS! 粤ICP备07511478号