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

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. IntelliJ IDEA 2018破解方法

    1.下载idea:https://download.jetbrains.8686c.com/idea/ideaIU-2018.2.exe 2.安装idea 3.下载破解补丁:http://idea.l ...

  2. Java Web项目如何做到升级不断掉服务，同时涉及到的相关问题

    Java Web项目如何做到升级不断掉服务,同时涉及到的相关问题 原文地址:https://m.oschina.net/question/737237_2203576 现在容器用的是tomcat,做维 ...

  3. Css学习(4)

    文档流(标准流) 元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行. 浮动布局 float:  left   |   right 特点: ★元素浮动之后不占据原来的 ...

  4. npm 淘宝镜像

    npm config set registry https://registry.npm.taobao.org

  5. nvm use 指定版本后无效 win7

    如图所示,nvm install 6.12.3之后,使用命令nvm use 6.12.3,提示切换成功,但是执行node app.js时,报错没有node命令,执行nvm ls查看,发现没有任何版本是 ...

  6. redis的哨兵集群,redis-cluster

    #主从同步redis主从优先1.保证数据安全,主从机器两份数据一主多从2.读写分离,缓解主库压力主redis,可读可写slave身份,只读   缺点1.手动主从切换假如主库挂了,得手动切换master ...

  7. 可恶的 0xc0000005异常

    昨天快下班的时候自己写的代码突然跑出了这个异常,,搞的我特别的无语,因为昨天女朋友要过来了,给我出现了这么一个bug,心里很不爽,果断低下班了,另外一个原因就是公司其他人都跑了,每次基本都是我一个人最 ...

  8. leetcode 852. Peak Index in a Mountain Array

    Input: [0,1,0] Output: 1 Input: [0,2,1,0] Output: 1解: 比较数组中的i和i-1的大小,如果前一位大于后一位数字,前一位则是结果 let ans = ...

  9. 【Git使用】SourceTree+Git简单使用(Windows)（转）

    导读: 本人过去Git的可视化工具用的是TortoiseGit,虽然Android Studio也能进行版本管理,但是用下来,感觉SoureTree这款工具是最舒服的(免费的),下面就给大家介绍下我的 ...

  10. day2----python的基本类型

    本文档的大致内容:(python使用版本3.6.4) 1 数字--int 2 布尔--bool 3 字符串--str 4 元祖--() 5  列表---['a','b'] 6 字典--{} 运算符: ...