1. 首先你要有php的环境，关于php环境的搭建，php本地站点的搭建，此处不再重复请看这里：http://www.cnblogs.com/Gabriel-Wei/p/5950465.html
    我们把wamp打开，并且在Dreamweaver里面新建一个phpStudy站点。
    这篇文章我们需要两个文件，一个test.html前端的页面，一个tigong.php数据的提供页，下面分别进行介绍。
  2. tigong.php
    我们在Dreamweaver,phpStudy站点下面，新建一个tigong.php页面，里面内容如下： 
     <?php
    
 echo"hello Tom";
    
 ?>

    为了让里面支持中文，我们加入这句话header("content-type:text/html;charset=utf-8")，此时的tigong.php如下

    <?php
    
header("content-type:text/html;charset=utf-8");
    
echo"Hello 李明";
    
？>

    用我们的浏览器跑一下，如图：

    将地址栏的信息地址复制一份，用postman测一下数据，如果不知道什么是postman，请自行百度，后面的数据交互文章会一直用到postman。（简而言之，postman就是测试一下给的接口能不能正常接收数据），如图：

    tigong.php文件准备好了，接下来我们写我们的前端页面。

  3. test.html 我们设置为点击按钮获取数据 
    <!doctype html>
    
<html>
    
<head>
    
<script type="text/javascript">
    
 window.onload=function(){
    
     var bt1=document.getElementById("bt1");
    
     var div1=document.getElementById("div1");
    
     //给bt1绑定事件，一会做onload完毕以后装在数据
    
     bt1.onclick=function(){
    
         //第一步：创建ajax对象
    
         //写兼容
    
         if(window.XMLHttpRequest){
    
             var xmlHttp=new XMLHttpRequest();
    
             }else{
    
                               //兼容IE6
    
                 var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
    
                 }
    
         //第二步：获取要放送的数据。这个例子没有
    
         //第三步：设置一下要发送的方式和请求目标地址
    
         xmlHttp.open("GET","tigong.php");
    
         //第三个参数不写默认是异步

         //第四步：设置请求的编码
    
         xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

         //第五步：监控整个过程，绑定onreadystatechange事件，总共调了四次0-1.1-2.2-3.3-4，我们需要的是4和200
    
         xmlHttp.onreadystatechange=function(){
    
             if(xmlHttp.readyState==4 && xmlHttp.status==200){
    
                 //后台数据输出什么，我们的responseText就得到什么
    
                 div1.innerHTML=xmlHttp.responseText;
    
                 }
    
             };
    
        //第六步：发送请求
    
        xmlHttp.send();
    
         };
    
     };
    
</script>
    
<meta charset="utf-8">
    
<style>
    
 #div1{
    
     background:#f00;
    
     color:#fff;
    
     font-weight:bold;
    
     width:200px;
    
     height:200px;
    
     }
    
img{
    
    width:200px;
    
    }
    
</style>
    
<title>ajax</title>
    
</head>
    
<div id="div1">
    
  <!--在数据没有过来的时候，我们显示一张loading的图片，百度搜loading一大推-->
    
  <img src="data:images/1.gif">
    
</div><br>
    
<input type="button" id="bt1" value="点击获取数据">
    
<body>
    
</body>
    
</html>

    如图所示：

    点击之后：

    可以看到，我们的php页面里面的数据回来了。

  4. 查看一下chrome的开发工具
     在network监控里面选择all，可以查看所有文件，如果没有，就刷新一下页面，

    点击tigong.php

使用原生ajax访问后台数据并将其展现在前端页面中（小菜鸟自己整理玩的，大神勿喷）的更多相关文章

  1. js - 原生ajax访问后台读取数据并显示在页面上

    1.前台调用ajax访问后台方法,并接收数据 <%@ page contentType="text/html;charset=UTF-8" language="ja ...

  2. 用ajax获取后台数据，返回json数据，怎么在前台使用？

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  3. js页面用定时任务通过AJAX获取后台数据，但是从这个页面跳转到其他页面后，定时任务仍然在定时请求后台

    setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...

  4. 前台返回json数据的常用方式+常用的AJAX请求后台数据方式

    我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...

  5. JS 操作 HTML 和 AJAX 请求后台数据

    为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...

  6. ajax 请求后台数据返回异常 及 提示404方法名不存在

    1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/ge ...

  7. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  8. Ajax请求后台数据

    一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

随机推荐

  1. ASP.NET MVC载入页面常用方法

    @RenderBody 在Razor引擎中没有了“母版页”,取而代之的是叫做“布局”的页面(_Layout.cshtml)放在了共享视图文件夹中.在这个页面中,会看到标签里有这样一条语句: @Rend ...

  2. FPGA芯片内部硬件介绍

    FPGA芯片内部硬件介绍 FPGA(Filed programmable gate device):现场可编程逻辑器件 FPGA基于查找表加触发器的结构,采用SRAM工艺,也有采用flash或者反熔丝 ...

  3. logging 模块

    import logging logging.basicConfig(filename='log.log', format='%(asctime)s - %(name)s - %(levelname) ...

  4. 由Memcached升级到 Couchbase的 Java 客户端的过程记录（二）

    Shiro提供了类似于Spring的Cache抽象,即Shiro本身不实现Cache,但是对Cache进行了又抽象,方便更换不同的底层Cache实现. shiro对缓存的支持 shiro并没有实现缓存 ...

  5. MQTT开发笔记之《MQTT Server》

    MQTT SERVER 性能测试报告 : http://w3yyb.sinaapp.com/archives/1601各个MQTT SERVER功能列表: http://blog.lenix.xyz/ ...

  6. 《JavaScript DOM编程艺术（第二版）》读书总结

    这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,Jav ...

  7. AE套宗获取内环

    主要根据IPolygon4的get_InteriorRingBag方法. IGeometry geo = null; IRing exring = null; (geo as IPolygon2).Q ...

  8. Recall, Precision and F-score

    F1 score (also F-score or F-measure) ,调和平均数稍微有点不好理解,最关键的是,不知道分子的情况下,采用调和平均数.

  9. Shell文件权限和脚本执行

    一.预备知识 1.shell的作用   2.常识 (1)Tab键自动补全   使用Terminal时,输入命令的前几个字母,敲tab会自动补全命令或文件名.目录等. 好处:操作速度更快:不容易出错: ...

  10. Json.Net 数据解析

    参考资料: 随笔分类 - Json.Net系列