javascript _ajax 原理初级

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 调用后台数据的简单原理模式

posted on 2018-01-10 17:08 huanying2015 阅读(175) 评论(0) 编辑收藏举报

javascript _ajax 原理 初级

javascript _ajax 原理初级