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. CentOS6.5_64位系统下安装配置postfix邮件系统 启用并配置SMTP在第三方上边使用发送邮件

    一前言 本来使用qq邮箱发送邮件,然后借助sendEmail来发送邮件告警,但是有每天的200封限制,很是不爽,于是想到来自己搭建邮件服务器来解决这个问题,关于使用sendEmail来借助qq邮箱来发 ...

  2. 关于select那点事

    select: 通过监视多个文件描述符的数组.当select()返回后 文件描述符便会被内核修改标志位,使进程 能进行后续操作 ------------------------------------ ...

  3. <<< List<HashMap<String, Object>> 及 HashMap<String, Object> 的用法

    //(赋值)最简单的一种hashMap赋值方式 List<HashMap<String, Object>> aMap= new ArrayList<HashMap< ...

  4. Spring JdbcTemplate 方法详解

    JdbcTemplate主要提供以下五类方法: execute方法:可以用于执行任何SQL语句,一般用于执行DDL语句: update方法及batchUpdate方法:update方法用于执行新增.修 ...

  5. 11月13日上午ajax返回数据类型为JSON数据的处理

    ajax返回数据类型为JSON数据的处理 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  6. STM8如何使用自带的bootloader

    1,首先确认你使用的STM8有没有自带的bootloader.参考下表 2,STM8空器件可以直接使用自带的bootloader. 3,STM8在使用SWIM烧录后,要想继续使用自带的bootload ...

  7. 2016-03-04记录 H264.TXT 转成 H264.h264

    H264.TXT文件 来源于板子上串口输出的数据,需要把该数据转成 *.h264用 H264的软件打开观察 txt中数据截图如下: MATLAB读入数据的代码: clc;close all;clear ...

  8. 关于hg的命令

    整理的创建分支合并一个分支的代码步骤:1.创建一个目录用于作为本地仓库mkdir Center2.将远端代码克隆到本地仓库(这时我的位置在刚创建的Center目录下)hg clone HTTP DIR ...

  9. JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  10. r-cnn学习（六）：RPN及AnchorTargetLayer学习

    RPN网络是faster与fast的主要区别,输入特征图,输出region proposals以及相应的分数. # ------------------------------------------ ...