客户端javascript脚本
1 <html> 2 <head> 3 <title>Ajax Example</title> 4 <script type="text/javascript"> 5 var xmlobj; //定义XMLHttpRequest对象 6 function CreateXMLHttpRequest() 7 { 8 if(window.ActiveXObject) 9 //如果当前浏览器支持ActiveXObject，则创建ActiveXObject对象 10 { 11 xmlobj = new ActiveXObject("Microsoft.XMLHTTP"); 12 } 13 else if(window.XMLHttpRequest) 14 //如果当前浏览器支持XMLHttp Request，则创建 15 XMLHttpRequest对象 16 { 17 xmlobj = new XMLHttpRequest(); 18 } 19 } 20 21 function ReqHtml() //主程序函数 22 { 23 CreateXMLHttpRequest(); //创建对象 24 xmlobj.onreadystatechange = StatHandler; //判断URL调用的状态值并处理 25 xmlobj.open("GET", "test.php", true); //调用test.html 26 xmlobj.send(null); //设置为不发送给服务器任何数据 27 } 28 29 function StatHandler() //用于处理状态的函数 30 { 31 if(xmlobj.readyState == 4 && xmlobj.status == 200) 32 //如果URL成功访问，则输出网页 33 { 34 document.getElementById("webpage").innerHTML = xmlobj.responseText; 35 } 36 } 37 </script> 38 </head> 39 <body> 40 <p><a href="#" onclick="ReqHtml();">Request HTML page</a></p> 41 <p><div id="webpage"></div></p> 42 </body> 43 </html>
test.php文件
1 <?php 2 echo '<table width="500" border="1" cellspacing="3" cellpadding="3"> 3 <tr> 4 <td><strong>Name</strong></td> 5 <td><strong>Sex</strong></td> 6 <td><strong>Age</strong></td> 7 <td><strong>Band</strong></td> 8 <td><strong>Salary</strong></td> 9 </tr> 10 <tr> 11 <td>Simon</td> 12 <td>Male</td> 13 <td>20</td> 14 <td>1</td> 15 <td>1,000.00</td> 16 </tr> 17 <tr> 18 <td>Elaine</td> 19 <td>Female</td> 20 <td>21</td> 21 <td>2</td> 22 <td>2,000.00</td> 23 </tr> 24 <tr> 25 <td>Susan</td> 26 <td>Female</td> 27 <td>22</td> 28 <td>3</td> 29 <td>3,000.00</td> 30 </tr> 31 </table> 32 '; 33 34 35 36 ?>