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. 让C#可以像Javascript一样操作Json

    Json的简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了 ...

  2. 【Python】[面向对象高级编程] 使用__slots__，使用@property

    1.使用 __slots__    给实例绑定方法, >>> def set_age(self, age): # 定义一个函数作为实例方法 ... self.age = age .. ...

  3. golang使用yaml格式解析构建配置文件

    现在主流的配置文件格式有这么几种,xml.yaml.config…  xml就算了,太挫了,太土, 太繁琐… config 就是mysql,apache my.cnf的那种格式,这个格式适合功能分层, ...

  4. CDH安装

    离线安装Cloudera Manager 5和CDH5(最新版5.1.3) 完全教程 关于CDH和Cloudera Manager CDH (Cloudera's Distribution, incl ...

  5. 在ubuntu/deepin/mint等系统中使用命令删除文件或文件夹

    此命令操作需谨慎: sudo rm -rf 文件夹路径(或文件路径)  

  6. iOS - 在工程中试玩状态模式

    做了一个项目,项目中一个藏品详情界面针对不同用户,和用户所处于的状态的不同,展示的效果和操作的权限都会不同.想到了状态模式,从来没有用过,赶紧学一下然后用一用.期待兴奋 看了这么多的博客,终于找到一个 ...

  7. JQ001-认识jQuery 和 JQ002-jQuery选择器

    JQ001-认识jQuery jQuery环境配置:将jQuery.js文件引入到html页面中即可. 代码如下: <!DOCTYPE html> <html> <hea ...

  8. Dell服务器安装OpenManage(OMSA)

    公司上架了一批戴尔服务器,公司要求对这些服务器的硬件做一系列的监控,如CPU的温度,内存,风扇的状态,转速,磁盘等硬件的监控. 在对服务器的硬件监控上,目前业界主要基于如下两种: 1.服务器自带的工具 ...

  9. SessionState

    SqlServer方式:1.创建数据库的方法:C:\Windows\Microsoft.NET\Framework\v4.0.30319>aspnet_regsql -ssadd -sstype ...

  10. tyvj1089 smrtfun

    背景 广东汕头聿怀初中 Train#2 Problem3 描述  现有N个物品,第i个物品有两个属性A_i和B_i.在其中选取若干个物品,使得sum{A_i + B_i}最大,同时sum{A_i},s ...