無名

大猫咪与小狮子

导航

XMLHttpRequest动态加载php脚本进行数据交互

客户端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 ?>

 

posted on 2012-04-14 11:20  xiezhengcai  阅读(3398)  评论(0)  编辑  收藏  举报