1.1使用php 方式获取时间：写一个time.php文件，保存在test 文件夹中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oBtn = document.querySelector("input");
oBtn.onclick = function(){
alert("<?php echo date('Y-m-d H:i:s'); ?>");
}
}
</script>
</head>
<body>
<input type="button" value="获取时间">
</body>
</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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var Obtn = document.querySelector("input.btn");
var Op = document.querySelector("p");
Obtn.onclick= function(){
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var url = 'server.php?name=huanying2015&number=99&tt='+ Math.random();
xhr.open('GET',url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
Op.innerHTML = xhr.responseText;
};
};
xhr.send( null );
};
};
</script>
</head>
<body>
<div>
<input type="button" value="getstyle获取ajax" class="btn">
<p></p>
</div>
</body>
</html>
通过服务器方式打开文件：http://localhost/aaa/yuanli/test/getstyle_time.php
运行结果：
3.2 写一个POST方式传值的poststyle_time.php 文件，保存在test文件夹中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var Obtn = document.querySelector("input.btn");
var Op = document.querySelector("p");
Obtn.onclick = function(){
// 这里是为了兼容IE5,IE6浏览器（IE5/IE6 使用new ActiveXObject("Microsoft.XMLHTTP")来创建XMLHttPRequest对象）
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var url = "server.php";
xhr.open("POST",url,true);
// post 方式要加入一个表头信息，get方式就不需要了
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
Op.innerHTML = xhr.responseText;
};
};
// post方式传值在send()函数里进行
xhr.send("name=huanying2015&number=99");
}
}
</script>
</head>
<body>
<div>
<input type="button" class="btn" value="post获取ajax">
<p></p>
</div>
</body>
</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 调用后台数据的简单原理模式