1.1使用php 方式获取时间：写一个time.php文件，保存在test 文件夹中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script> 9 window.onload = function(){ 10 var oBtn = document.querySelector("input"); 11 oBtn.onclick = function(){ 12 alert("<?php echo date('Y-m-d H:i:s'); ?>"); 13 } 14 } 15 </script> 16 </head> 17 <body> 18 <input type="button" value="获取时间"> 19 </body> 20 </html>
1.2 通过服务器方式打开文件：http://localhost/aaa/yuanli/test/time.php
运行结果：这里是使用PHP方式输出的时间
2. 写一个server.php 文件，保存在test文件夹中
<?php header("Content-Type:text/html;charset=utf-8"); if(isset($_GET['name'])){ echo $_GET['name'].'(即编号'.$_GET['number'].')读到的时间是：'.date("Y-m-d H:i:s"); }else if(isset($_POST['name'])){ echo $_POST['name'].'(即编号'.$_POST['number'].')读到的时间是：'.date("Y-m-d H:i:s"); }else{ echo "传值错误，没有可以使用的参数！请重新传值。"; } ?>
通过服务器方式打开文件：http://localhost/aaa/yuanli/test/time.php
运行结果：因为没有传入POST或者GET的参数，所以结果如下：
3.1 写一个GET方式传递参数的getstyle_time.php文件，保存在test文件夹中
备注：这里在url 变量后面加入Math.random()函数，是为了兼容IE浏览器，这样才能进行更新ajax
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script> 9 window.onload = function(){ 10 var Obtn = document.querySelector("input.btn"); 11 var Op = document.querySelector("p"); 12 Obtn.onclick= function(){ 13 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 14 var url = 'server.php?name=huanying2015&number=99&tt='+ Math.random(); 15 xhr.open('GET',url,true); 16 xhr.onreadystatechange = function(){ 17 if(xhr.readyState==4 && xhr.status==200){ 18 Op.innerHTML = xhr.responseText; 19 }; 20 }; 21 xhr.send( null ); 22 }; 23 }; 24 </script> 25 </head> 26 <body> 27 <div> 28 <input type="button" value="getstyle获取ajax" class="btn"> 29 <p></p> 30 </div> 31 </body> 32 </html>
通过服务器方式打开文件：http://localhost/aaa/yuanli/test/getstyle_time.php
运行结果：
3.2 写一个POST方式传值的poststyle_time.php 文件，保存在test文件夹中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script> 9 window.onload = function(){ 10 var Obtn = document.querySelector("input.btn"); 11 var Op = document.querySelector("p"); 12 Obtn.onclick = function(){ 13 // 这里是为了兼容IE5,IE6浏览器（IE5/IE6 使用new ActiveXObject("Microsoft.XMLHTTP")来创建XMLHttPRequest对象） 14 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 15 var url = "server.php"; 16 xhr.open("POST",url,true); 17 // post 方式要加入一个表头信息，get方式就不需要了 18 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); 19 xhr.onreadystatechange = function(){ 20 if(xhr.readyState==4 && xhr.status==200){ 21 Op.innerHTML = xhr.responseText; 22 }; 23 }; 24 // post方式传值在send()函数里进行 25 xhr.send("name=huanying2015&number=99"); 26 } 27 } 28 </script> 29 </head> 30 <body> 31 <div> 32 <input type="button" class="btn" value="post获取ajax"> 33 <p></p> 34 </div> 35 </body> 36 </html>
通过服务器方式打开文件：http://localhost/aaa/yuanli/test/poststyle_time.php
运行结果：
3.3 在上述get 方式中修改getstyle_time.php 文件中的 url = 'server.php?number=99&tt='+ Math.random(); 或者poststyle_time.php文件中的 xhr.send("number=99");
则将的不到时间结果，如下结果显示（get方式）：
以上即是 javascript 调用后台数据的简单原理模式