如何用 ajax 连接mysql数据库,并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。

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

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

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

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



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

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3 <head>
  4 <script>
  5 var xmlHttp;
  6 //创建xmlHttpRequest对象
  7
  8 //下面将会针对不同的浏览器创建对象,也是两个if语句的作用
  9 /*
 10 在firefox,opera,safiar,IE7.0,IE8.0(我所知道的window对象有这个属性
 11 的浏览器)这些浏览器中,window是有XMLHttpRequest这个属性的,而IE6.0,5.5都是没有的,
 12 IE6.0或5.5是没有这个属性的,使用window.ActiveXObject替代。
 13 */
 14 function createXmlHttpObject()
 15 {
 16     if(window.XMLHttpRequest)
 17     {
 18         xmlHttp = new XMLHttpRequest(); //创建对象
 19     }else if(window.ActiveXObject)
 20     {
 21         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建对象
 22     }
 23     return xmlHttp;//创建成功,返回
 24 }
 25
 26 function send()//这个函数用来和后台的服务器文件连接,可以是asp,php,我这里用php说明
 27 {
 28     xmlHttp = createXmlHttpObject();//调用上面的创建对象函数
 29
 30     var url = "33.php"; //这里的url变量,用来存储你,你自己想要连接的文件路径,我这里比较简单是因为33.php和我这个php在同一目录
 31
 32     if(xmlHttp)//判读,如果对象不为空,进入下面
 33     {
 34         xmlHttp.onreadystatechange = callback;
 35         /*注册回调函数名,这里可以看作是函数的调用,onreadystatechange是 XMLHttpRequest的一个属性,用来检测当前状态
 36         当状态改变,就会触发函数,所有,如果只需要函数名,不要加括号*/
 37
 38         //下面的open 函数,顾名思义,打开,用来连接你上面的url文件
 39         //设置连接信息:
 40         //第一个参数:表示http的请求方式,主要使用get和post
 41         //第二个参数:表示请求的URL地址,get方式的请求参数也在URL中
 42         //第三个参数:表示采用同步还是异步方式进行交互,true表示异步交互
 43         xmlHttp.open("GET", url, true);
 44
 45         //下面的send函数,这个是对象自身有的方法,不是这里定义的send,它用来发送命令,发送什么呢,open的命令
 46         //发送数据,开始和服务器端进行交互
 47         //同步方式下,send语句会在服务器端返回数据后才执行
 48         //异步方式下,send语句会立即执行
 49         xmlHttp.send(null);
 50     }else{
 51         alert("出错,请重新尝试!");
 52         return;
 53     }
 54 }
 55
 56
 57
 58 //回调函数,就是刚才定义的函数,用来获取从服务器文件,asp或者php或者其他返回的信息
 59 function callback()
 60 {
 61     var mInt = 2;//移动像素,这部分是用来验证的
 62     var _obj = document.getElementById("pic");
 63     var _text = document.getElementById("textview");
 64     var _x = parseInt(_obj.style.left);
 65     var _y = parseInt(_obj.style.top);
 66     /*if (_x < mInt)
 67             _y -= mInt;
 68         else if (_y > mInt)
 69             _x -= mInt;*/
 70         _obj.style.left = _x + "px";
 71         _obj.style.top = _y + "px";
 72     //判断对象的状态是交互完成
 73     if(xmlHttp.readyState == 4)
 74     //这里是状态判断有0~4,百度很多详解,4代表,连接上了并且获得了数据
 75     {
 76         //判断http的交互是否成功
 77         if(xmlHttp.status==200)
 78         {
 79             //获取服务器端返回的数据
 80             var xmlDoc = xmlHttp.responseXML;
 81             //这里把返回的数据以XML的格式存到变量中。
 82             //还有一种返回式以字符串的形式返回,responseText,这个可以用下标法逐个输出,但是注意,逐个输出的是字符,
 83             //也就是说,你想要的一个字符串会被拆成几份
 84
 85              //这里的 getElementsByTagName("time")[0].childNodes[0].nodeValue; 是采用遍历数的方法逐个输出数据
 86              //getElementsByTagName 是通有的("  ")这里写的是你链接的文件里面的标签名,等下介绍再详说,[0]也是要写的
 87              //.childNodes[0].nodeValue;  这块也是通有的,意思是获取值
 88             _x = xmlDoc.getElementsByTagName("time")[0].childNodes[0].nodeValue;
 89             _y = xmlDoc.getElementsByTagName("in")[0].childNodes[0].nodeValue;
 90             _text.innerHTML = "_x=" + _x + ",_y" + _y;
 91
 92         }else{
 93             alert(xmlHttp.statusText);
 94         }
 95     }
 96 }
 97
 98 function refresh()
 99 {
100
101     setInterval("send()",100); //定时刷新,循环调用,上面的send函数。、,时间间隔为0.1秒。
102
103 }
104 </script>
105     </head>
106     <body onLoad="refresh()">//这里调用
107         <div id=‘pic‘ style=‘position:absolute;left:380px;top:200px;‘><img width=‘80‘ height=‘80‘ src=‘C:\Users\Administrator.PC--20130918KZN\Desktop\9.png‘ /><font id="textview"></font></div>
108
109
110     </body>
111 </html>

后台被连的php:

 1 <?php
 2 header(‘Content-Type: text/xml‘);
 3 header("Cache-Control: no-cache, must-revalidate");
 4 //上面两句是PHP 文档的 content-type 被设置为 "text/xml" ,PHP 文档被设置为 "no-cache",以防止缓存
 5     $time = date(‘Y-m-d h:i:s‘,time());
 6
 7     $information="XXXX";
 8
 9
10     echo ‘<?xml version="1.0" encoding="ISO-8859-1"?><person>‘;//这句必须有,没的话,输不出东西
11     echo "<time>" .$time. "</time>";
12       //这里的<time>  </time>标签就是刚才("  "),里面要填的,通过这方式,分别输出、获取不同的值,下同
13     echo "<in>" .$information. "</in>";
14     echo "</person>";//和上面的person完成一个一对
15
16
17 ?>

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

时间: 2024-10-10 21:53:31

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

PDO连接mysql数据库

1.PDO简介 PDO(PHP Data Object) 是PHP 5 中加入的东西,是PHP 5新加入的一个重大功能,因为在PHP 5以前的php4/php3都是一堆的数据库扩展来跟各个数据库的连接和处理,什么 php_mysql.dll.php_pgsql.dll.php_mssql.dll.php_sqlite.dll等等. PHP6中也将默认使用PDO的方式连接,mysql扩展将被作为辅助 2.PDO配置 PHP.ini中,去掉"extension=php_pdo.dll"前面

Android如何连接MySQL数据库

Android开发中,大多数连接到远程MySQL数据库的方法是加入特定的Service到代码中.由于MySQL通常是和PHP一起使用的,最简单以及最常见的方法是写PHP脚本管理数据连接,以及从Android系统上使用HTTP协议运行这个脚本. 可以以JSON格式的方式编写数据,Android和PHP之间,两种语言都很容易嵌入JSON函数. 我演示的示例代码,根据给定的条件从数据库读取数据,在Android开发平台上创建日志消息接收数据. 假设我们有个命名为PeopleData的MySQL数据库,

QTP连接MYSQL数据库方法

1.首先安装mysql数据驱动,qtp在windows系统下操作连接mysql,所以下载mysql-connector-odbc-   5.1.8-win32.msi 下载地址:http://mysql.mirrors.pair.com/Downloads/Connector-ODBC/5.1/mysqlconnector-odbc-5.1.8-win32.msi 2.安装mysql驱动 ,默认安装即可. 3. 添加默认数据源 控制面板->管理工具->数据源ODBC->系统DNS->

MySQL 数据库实现远程连接

1,刚开始我使用的是Navicat for MySQL工具连接远程的mysql的数据库. 报错了.报错信息是 Error 1130: Host '192.168.1.80' is not allowed to connect to this MySQL server. 我查询网上的解决方法共有两种: a. 该表法.可能是你的账号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登录mysql后,更改“mysql”数据库里的'user'表的"host"

VS2013连接Mysql数据库的设置以及常见问题

前两天用VS2013连接Mysql遇到了很多问题,上网搜了很多发现好多讲的并不清楚,于是乎我就想把我遇到的问题总结下来,帮助后来人少走点弯路. 步骤: 1:首先需要注意的是 Mysql版本是32位还是64位,如果是64位请将VS2013设置为 x64,具体设置为:右键项目->属性->在右上角有 “配置管理器” ->点击 修改为 x64 这么做的原因是接下来会用到 mysql 中有 libmysql.dll,而如果是64位的mysql,则该dll文件是64位的,正常的VS是用win32生成

c# 连接Mysql数据库

mysql.data.dll下载_c#连接mysql必要插件 全部版本下载:http://hovertree.com/h/bjaf/0sft36s9.htm mysql.data.dll是C#操作MYSQL的驱动文件,是c#连接mysql必要插件,使c#语言更简洁的操作mysql数据库.当你的电脑弹出提示“丢失mysql.data.dll”或“无法找到mysql.data.dll”等错误问题,请下载本站为你提供的dll文件,使用它可以帮助用户解决上述问题.dll文件修复方法:1.解压下载的文件.

VS2015如何连接mySQL数据库

mySQL数据库 如题,今天给大家简单演示一下VS2015如何连接mySQL数据库.       首先呢,大家需要安装vs2015和mySQL这两个软件,我还安装了一个辅助软件SQLyog - 32 bit(我师兄推荐我安装的),还有我的mySQL版本是5.6 .废话少讲,开始了. 连接mySQL主要考虑两个方面问题,添加mysql.h这个头文件和libmysql.lib这个库文件. 1.新建win32控制台程序,添加源文件,将测试程序复制进去(我的实在网上随便下载一个测试程序,是原来用来测试V

openfire连接mysql数据库的字符集问题解决

openfire默认配置连接mysql数据库后,中文出现乱码. 解决办法: mysql字符集设置为utf8 + 设置全局的字符集 SET @@global.character_set_client = utf8; SET @@global.character_set_results = utf8; SET @@global.character_set_connection = utf8; SET @@global.character_set_server = utf8; + 设置当前连接字符集

Windows平台使用Navicat for MySQL通过SSH密钥认证连接远程MySQL数据库

使用场景: 1.MySQL数据库的管理员账号只允许本地登录 2.应用程序连接账号只允许程序部署服务器所属IP地址连接 实现方法: 客户端工具通过无密码SSH密钥对连接到MySQL数据库所在服务器,再通过数据库相应的账号在服务器本地登录. 1.安装ssh相关程序包 yum -y install openssh-clients   #ssh-copy-id命令 2.在本地机器上使用ssh-keygen产生公钥私钥对 [[email protected]~]$ ssh-keygen 3.用ssh-co