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文件夹中

  1. <?php
  2.     header("Content-Type:text/html;charset=utf-8");
  3.     if(isset($_GET['name'])){
  4.         echo $_GET['name'].'(即编号'.$_GET['number'].')读到的时间是：'.date("Y-m-d H:i:s");
  5.     }else if(isset($_POST['name'])){
  6.         echo $_POST['name'].'(即编号'.$_POST['number'].')读到的时间是：'.date("Y-m-d H:i:s");
  7.     }else{
  8.         echo "传值错误，没有可以使用的参数！请重新传值。";
  9.     }
  10. ?>

通过服务器方式打开文件：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 调用后台数据的简单原理模式

javascript _ajax 原理 初级的更多相关文章

  1. JavaScript作用域原理（三）——作用域根据函数划分

    一.一个for实例 <p id="scope3" style="color:red"></p> var pscope3 = docume ...

  2. JavaScript作用域原理（二）——预编译

    JavaScript是一种脚本语言, 它的执行过程, 是一种翻译执行的过程.并且JavaScript是有预编译过程的,在执行每一段脚本代码之前, 都会首先处理var关键字和function定义式(函数 ...

  3. JavaScript作用域原理（一）——作用域链

    一.作用域的描述 JavaScript权威指南中对作用域有一句很精辟的描述:“JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.” 在JavaScript中,作用域的 ...

  4. 深入理解JavaScript Hijacking原理

    最近在整理关于JavaScript代码安全方面的资料,在查关于JavaScript Hijacking的资料时,发现关于它的中文资料很少,故特意整理一下. 一.JavaScript Hijacking ...

  5. JavaScript内部原理实践——真的懂JavaScript吗？（转）

    通过翻译了Dmitry A.Soshnikov的关于ECMAScript-262-3 JavaScript内部原理的文章, 从理论角度对JavaScript中部分特性的内部工作机制有了一定的了解. 但 ...

  6. How Javascript works (Javascript工作原理) (三) 内存管理及如何处理 4 类常见的内存泄漏问题

    个人总结: 1.两种垃圾回收机制: 1)引用标记算法:如果检测到一个对象没有被引用了,就清除它. ***这种算法不能处理循环引用的情况*** 2)标记—清除算法:从根(全局变量)开始向后代变量检测,任 ...

  7. How Javascript works (Javascript工作原理) (二) 引擎，运行时，如何在 V8 引擎中书写最优代码的 5 条小技巧

    个人总结: 一个Javascript引擎由一个标准解释程序,或者即时编译器来实现. 解释器(Interpreter): 解释一行,执行一行. 编译器(Compiler): 全部编译成机器码,统一执行. ...

  8. How Javascript works (Javascript工作原理) (一) 引擎，运行时，函数调用栈

    个人总结:该系列文章对JS底层的工作原理进行了介绍. 这篇文章讲了 运行时:js其实是和AJAX.DOM.Settimeout等WebAPI独立分离开的 调用栈:JavaScript的堆内存管理 和 ...

  9. How Javascript works (Javascript工作原理) (九) 网页消息推送通知机制

    个人总结: 1.介绍了网页消息推送通知机制 全文地址:https://github.com/Troland/how-javascript-works 这是 JavaScript 工作原理的第九章. 现 ...

随机推荐

  1. python模块: hashlib模块, configparse模块, logging模块,collections模块

    一. hashlib模块 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通常用 ...

  2. VI使用手册（常见命令）

    VI使用手册 模式切换 i键开始进入编辑模式,Esc进入一般模式,保存退出:wq,不保存退出q,强制退出q! 如何定位到行文档首位,行首位? gg或者1G命令将光标移动到文档开头G命令将光标移动到文档 ...

  3. springboot+mybatis整合(单元测试，异常处理，日志管理，AOP)

    我用的事IDEA,jdk版本是1.7.新建项目的时候这个地方的选择需要注意一下,springboot版本是1.5的,否则不支持1.7的jdk pom.xml <dependency> &l ...

  4. Delphi根据方法名调用方法

    type   TForm1 = class(TForm) public published     procedure DoJsCall(str:string);                   ...

  5. C# Microsoft.Office不存在空间名称Interop和Excel

    在实际开发过程中,我们经常会对Excel表进行操作.相信大家都都已经很熟悉C#操作Excel的步骤:添加引用->COM->Microsoft Office Excel 11 Object. ...

  6. courator - create

    0. retry policy RetryPolicy retryPolicy = new ExponentialBackoffRetry(3000,3); 1. client 1) recipes ...

  7. ubuntu 16.04 配置静态ip 后默认的网卡eno1变成eth0了不能联网的问题解决

    我这次是在真实机器上面安装的ubuntu16.04 在配置了静态ip后不懂什么原因默认的eno1网卡变回了eth0网卡之后就不能上网, 同一个网段的其他集群节点也不能ping 通 因为ubuntu16 ...

  8. KVM总结-KVM性能优化之磁盘IO优化

    前面讲了KVM CPU(http://blog.csdn.net/dylloveyou/article/details/71169463).内存(http://blog.csdn.net/dyllov ...

  9. C#常用类操作

    C#提供了许多可以直接使用的类代码. 1. Convert类 Convert类提供了很多静态方法成员,用于实现数据类型的转换. Convert类的常用方法                        ...

  10. CF 966E May Holidays

    /* 考虑对于询问分块, 每根号n个询问做一次 考虑一次询问, 我们建立出虚树来每条链上的更改一定是一样的, 然后会有根号条链 对于每条链上的点按照w基数排序并且合并相同, 然后每次更改 就是一个指针 ...