开讲前，先说下网上，大部分的关于这方面的博文或者其他什么的，就我自己的感觉，第一说得不详细，第二语言不能很好的被初学者了解。

我这篇博文的标题之所以用了三句，是为了方便其他人好查找；

这里介绍的方法有什么用呢？ 使用它，就可以无闪刷新页面，并且从数据库获取实时改变的数据反馈回界面，显示出来！是不是很爽，的确。

废话不多，开讲，请注意我的代码的注释，里面详说！

连接的前台连接的php文件：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

 <head>

 <script>

 var xmlHttp;

 //创建xmlHttpRequest对象

 //下面将会针对不同的浏览器创建对象，也是两个if语句的作用

 /*

 在firefox,opera,safiar,IE7.0,IE8.0（我所知道的window对象有这个属性

 的浏览器）这些浏览器中，window是有XMLHttpRequest这个属性的，而IE6.0，5.5都是没有的，

 IE6.0或5.5是没有这个属性的，使用window.ActiveXObject替代。

 */

 function createXmlHttpObject()

 {

     if(window.XMLHttpRequest)

     {

         xmlHttp = new XMLHttpRequest(); //创建对象

     }else if(window.ActiveXObject)

     {

         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建对象

     }

     return xmlHttp;//创建成功，返回

 }

 function send()//这个函数用来和后台的服务器文件连接，可以是asp，php，我这里用php说明

 {

     xmlHttp = createXmlHttpObject();//调用上面的创建对象函数

     var url = "33.php"; //这里的url变量，用来存储你，你自己想要连接的文件路径，我这里比较简单是因为33.php和我这个php在同一目录

     if(xmlHttp)//判读，如果对象不为空，进入下面

     {

         xmlHttp.onreadystatechange = callback;

         /*注册回调函数名，这里可以看作是函数的调用，onreadystatechange是 XMLHttpRequest的一个属性，用来检测当前状态

         当状态改变，就会触发函数，所有，如果只需要函数名，不要加括号*/

         //下面的open 函数，顾名思义，打开，用来连接你上面的url文件

         //设置连接信息：

         //第一个参数：表示http的请求方式，主要使用get和post

         //第二个参数：表示请求的URL地址，get方式的请求参数也在URL中

         //第三个参数：表示采用同步还是异步方式进行交互，true表示异步交互

         xmlHttp.open("GET", url, true);    

         //下面的send函数，这个是对象自身有的方法，不是这里定义的send，它用来发送命令，发送什么呢，open的命令

         //发送数据，开始和服务器端进行交互

         //同步方式下，send语句会在服务器端返回数据后才执行

         //异步方式下，send语句会立即执行

         xmlHttp.send(null);

     }else{

         alert("出错，请重新尝试！");

         return;

     }

 }

 //回调函数，就是刚才定义的函数，用来获取从服务器文件，asp或者php或者其他返回的信息

 function callback()

 {

     var mInt = ;//移动像素，这部分是用来验证的

     var _obj = document.getElementById("pic");

     var _text = document.getElementById("textview");

     var _x = parseInt(_obj.style.left);

     var _y = parseInt(_obj.style.top);

     /*if (_x < mInt)

             _y -= mInt;

         else if (_y > mInt)

             _x -= mInt;*/

         _obj.style.left = _x + "px";

         _obj.style.top = _y + "px";

     //判断对象的状态是交互完成

     if(xmlHttp.readyState == )

     //这里是状态判断有0~4，百度很多详解，4代表，连接上了并且获得了数据

     {

         //判断http的交互是否成功

         if(xmlHttp.status==)

         {

             //获取服务器端返回的数据

             var xmlDoc = xmlHttp.responseXML;

             //这里把返回的数据以XML的格式存到变量中。

             //还有一种返回式以字符串的形式返回，responseText，这个可以用下标法逐个输出，但是注意，逐个输出的是字符，

             //也就是说，你想要的一个字符串会被拆成几份

              //这里的 getElementsByTagName("time")[0].childNodes[0].nodeValue; 是采用遍历数的方法逐个输出数据

              //getElementsByTagName 是通有的（"  "）这里写的是你链接的文件里面的标签名，等下介绍再详说，[0]也是要写的

              //.childNodes[0].nodeValue;  这块也是通有的，意思是获取值

             _x = xmlDoc.getElementsByTagName("time")[].childNodes[].nodeValue;

             _y = xmlDoc.getElementsByTagName("in")[].childNodes[].nodeValue;

             _text.innerHTML = "_x=" + _x + ",_y" + _y;

         }else{

             alert(xmlHttp.statusText);

         }

     }

 }      

 function refresh()

 {

     setInterval("send()",); //定时刷新，循环调用，上面的send函数。、，时间间隔为0.1秒。

 }

 </script>

     </head>

     <body onLoad="refresh()">//这里调用

         <div id='pic' style='position:absolute;left:380px;top:200px;'><img width='' height='' src='C:\Users\Administrator.PC--20130918KZN\Desktop\9.png' /><font id="textview"></font></div>

     </body>

 </html>

后台被连的php：

 <?php

 header('Content-Type: text/xml');

 header("Cache-Control: no-cache, must-revalidate");

 //上面两句是PHP 文档的 content-type 被设置为 "text/xml" ，PHP 文档被设置为 "no-cache"，以防止缓存

     $time = date('Y-m-d h:i:s',time());

     $information="XXXX";

     echo '<?xml version="1.0" encoding="ISO-8859-1"?><person>';//这句必须有，没的话，输不出东西

     echo "<time>" .$time. "</time>";

       //这里的<time>  </time>标签就是刚才（"  "），里面要填的，通过这方式，分别输出、获取不同的值，下同

     echo "<in>" .$information. "</in>";

     echo "</person>";//和上面的person完成一个一对

 ?>

由于我自己是通过输出系统时间来测试的，测试成功后是，看到时间的。

如何用 ajax 连接mysql数据库，并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。的更多相关文章

  1. ruby使用DBI连接MySQL数据库发生异常：in `error': Can't connect to MySQL server on 'localhost' (10061) (DBI::DatabaseError)

    Ruby使用DBI连接MySQL数据库一般为: require "dbi" dbh = DBI.connect("dbi:Mysql:test:localhost&quo ...

  2. java中用activiti插件连接mysql数据库，自动建表过程中，在配置mysql架包路径“org.activiti.engine.ActivitiException: couldn't check if tables “

    java中用activiti插件连接mysql数据库,出现错误: org.activiti.engine.ActivitiException: couldn't check if tables are ...

  3. 最近使用Navicat for MySQl访问远程mysql数据库，出现报错，显示“2003- Can't connect MySQL Server on 'localhost'(10038)“。

    优先考虑mysql数据库是否开启 1.先看报错窗口.   通过百度,最终找到的原因是:远程3306端口未对外开放. 于是下面进行远程3306端口开放操作.   首先远程连接服务器,点击“开始”-“管理 ...

  4. PDO连接mysql数据库

    1.PDO简介 PDO(PHP Data Object) 是PHP 5 中加入的东西,是PHP 5新加入的一个重大功能,因为在PHP 5以前的php4/php3都是一堆的数据库扩展来跟各个数据库的连接 ...

  5. Android如何连接MySQL数据库

    Android开发中,大多数连接到远程MySQL数据库的方法是加入特定的Service到代码中.由于MySQL通常是和PHP一起使用的,最简单以及最常见的方法是写PHP脚本管理数据连接,以及从Andr ...

  6. python如何连接mysql数据库

    先花点时间来说说一个程序怎么和数据库进行交互1.和数据库建立连接2.执行sql语句,接收返回值3.关闭数据库连接使用MySQLdb也要遵循上面的几步.让我们一步步的进行. 1.MySQL数据库要用My ...

  7. Windows下C/C++连接mysql数据库的方法

    步骤 安装MySQL数据库 项目属性页->C/C++->常规->附加包含目录:xxx\mysql Server 5.6\include 项目属性页->链接器->常规-&g ...

  8. SSM项目实现连接两个mysql数据库

    最近做项目需要用到另一个数据库的内容,多方查找终于实现了功能. 我们都知道,在SSM框架中,我们在applicationContext.xml配置文件中添加数据源就可以实现数据库增删改查,但是只能连接 ...

  9. c# 连接Mysql数据库

    mysql.data.dll下载_c#连接mysql必要插件 全部版本下载:http://hovertree.com/h/bjaf/0sft36s9.htm mysql.data.dll是C#操作MY ...

随机推荐

  1. 不用css3的响应式img（按比例缩小图片）

    有时候自己为了控制图片的响应式,按比例缩小放大图片,如果解决这个问题,用js吧,很麻烦.也会损失很大的加载运行速度等:所以我们还是用css来解决这个问题,用css来强制按比例压缩图片的高度或宽度,看代 ...

  2. iPhone Safari下iframe不显示滚动条无法滚动的解决方法

    在iframe外层包一层div,添加如下样式:style="-webkit-overflow-scrolling:touch;overflow:auto;" @media only ...

  3. java并发编程（十三）经典问题生产者消费者问题

    生产者消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一存储空间,生产者向空间里生产数据,而消费者取走数据. 这里实现如下情况的生产--消费模型: 生产者不断交替地生产两组数据&q ...

  4. 移动端click时间延迟300

    解决移动端click延迟事件方法,,引入fastclick.js  然后在script标签里面写上FastClick.attach(document.body); <!DOCTYPE html& ...

  5. 使用nmap工具查询局域网某个网段正在使用的ip地址

    linux下nmap工具可扫描局域网正在使用的ip地址 查询局域网某网段正在使用的ip地址: nmap -sP .* 以上命令,将打印10.10.70.*/24网络所有正在使用的ip地址

  6. ASP.NET Core 十种方式扩展你的 Views

    原文地址:http://asp.net-hacker.rocks/2016/02/18/extending-razor-views.html 作者:Jürgen Gutsch 翻译:杨晓东(Savor ...

  7. Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

    XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. ...

  8. [译]MVC网站教程（四）：MVC4网站中集成jqGrid表格插件（系列完结）

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  9. ASP.NET MVC SSO单点登录设计与实现

    实验环境配置 HOST文件配置如下: 127.0.0.1 app.com127.0.0.1 sso.com IIS配置如下: 应用程序池采用.Net Framework 4.0 注意IIS绑定的域名, ...

  10. MapReduce剖析笔记之二：Job提交的过程

    上一节以WordCount分析了MapReduce的基本执行流程,但并没有从框架上进行分析,这一部分工作在后续慢慢补充.这一节,先剖析一下作业提交过程. 在分析之前,我们先进行一下粗略的思考,如果要我 ...