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. APP

    第一天 1.环境初步搭建 SmartSniff fiddler ddms AntiDroid Android Killer 百度方法 http://jingyan.baidu.com/article/ ...

  2. ceph rgw s3 java sdk 上传大文件分批的方法

    Using the AWS Java SDK for Multipart Upload (High-Level API) Topics Upload a File Abort Multipart Up ...

  3. 使用VelocityTracker来完成MotionEvent移动速率计算

    先看效果图 关键代码(此处记录单点): switch (event.getAction()){ case MotionEvent.ACTION_DOWN: if (veloctiy==null) { ...

  4. Django登录访问限制 login_requeired

    作用: 1. 用户登录之后才可以访问某些页面 2. 如果没登录,跳转到登录页面 3. 用户在跳转的登陆界面中完成登陆后,自动访问跳转到之前访问的地址 要实现这个需求很简单就是在相应的view前面使用装 ...

  5. 线段树 HDU 3397（真）

    5 种操作  0 1 然后 异或 似乎这种2个更新的先后每次都搞不清 覆盖有覆盖就可以不异或 也不知道为什么 #include<stdio.h> #include<string.h& ...

  6. java-json日期字符串转换

    String valueStr = value.toString(); if(StringUtils.isBlank(valueStr) || "null".equals(valu ...

  7. JavaScript中URL的解码和编码

    这些URI方法encodeURI.encodeURIComponent().decodeURI().decodeURIComponent()代替了BOM的escape()和unescape()方法. ...

  8. 【BZOJ-2732】集合选数 状压DP （思路题）

    2734: [HNOI2012]集合选数 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1070  Solved: 623[Submit][Statu ...

  9. 在WildFly中运行多个standalone模式的实例

      WildFly作为一款优秀的EJB容器,其前身为JBoss AS.JBoss作为一款开源的应用服务器,被广泛的应用在各种项目当中.假设我们现在有这样一个项目,他是以standalone的模式运行在 ...

  10. shell的一些应用场景

    列出每个IP的连接数 netstat -n | awk '/^tcp/{print $5}' | awk -F: '!/^::/{print $1}' | sort | uniq -c | sort ...