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

本文涉及的产品
云数据库 RDS MySQL Serverless,0.5-2RCU 50GB
简介: 开讲前,先说下网上,大部分的关于这方面的博文或者其他什么的,就我自己的感觉,第一说得不详细,第二语言不能很好的被初学者了解。 我这篇博文的标题之所以用了三句,是为了方便其他人好查找;       这里介绍的方法有什么用呢? 使用它,就可以无闪刷新页面,并且从数据库获取实时改变的数据反馈回界面,显示出来!是不是很爽,的确。

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

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

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

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


     

连接的前台连接的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 ?>

 

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

 

如果您认为这篇文章还不错或者有所收获,您可以通过扫描一下下面的支付宝二维码 打赏我一杯咖啡【物质支持】,也可以点击右下角的【推荐】按钮【精神支持】,因为这两种支持都是我继续写作,分享的最大动力


img_12e3f54d4d0f70f0eb14f20548e3d781.png
相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
目录
相关文章
|
1天前
|
关系型数据库 MySQL 分布式数据库
《MySQL 简易速速上手小册》第6章:MySQL 复制和分布式数据库(2024 最新版)
《MySQL 简易速速上手小册》第6章:MySQL 复制和分布式数据库(2024 最新版)
19 2
|
3天前
|
SQL 关系型数据库 MySQL
MySQL环境搭建——“MySQL数据库”
MySQL环境搭建——“MySQL数据库”
|
3天前
|
SQL NoSQL 关系型数据库
初识MySQL数据库——“MySQL数据库”
初识MySQL数据库——“MySQL数据库”
|
6天前
|
关系型数据库 MySQL 数据库
数据库基础(mysql)
数据库基础(mysql)
|
6天前
|
JavaScript 关系型数据库 MySQL
❤Nodejs 第二章(Node连接本地数据库)
【4月更文挑战第2天】本文介绍了如何使用Node.js连接本地MySQL数据库。首先,提到了在MySQL官网下载安装数据库和使用Navicat for MySQL进行数据库管理。接着,通过`yarn add mysql`在项目中安装数据库依赖。然后,创建`app.js`文件,设置数据库连接参数,并建立连接进行查询操作。遇到导入模块的错误后,修改导入方式为CommonJS语法。
19 1
|
6天前
|
SQL 关系型数据库 数据库
【后端面经】【数据库与MySQL】SQL优化:如何发现SQL中的问题?
【4月更文挑战第12天】数据库优化涉及硬件升级、操作系统调整、服务器/引擎优化和SQL优化。SQL优化目标是减少磁盘IO和内存/CPU消耗。`EXPLAIN`命令用于检查SQL执行计划,关注`type`、`possible_keys`、`key`、`rows`和`filtered`字段。设计索引时考虑外键、频繁出现在`where`、`order by`和关联查询中的列,以及区分度高的列。大数据表改结构需谨慎,可能需要停机、低峰期变更或新建表。面试中应准备SQL优化案例,如覆盖索引、优化`order by`、`count`和索引提示。优化分页查询时避免大偏移量,可利用上一批的最大ID进行限制。
32 3
|
7天前
|
存储 关系型数据库 MySQL
【后端面经】【数据库与MySQL】为什么MySQL用B+树而不用B树?-02
【4月更文挑战第11天】数据库索引使用规则:`AND`用`OR`不用,正用反不用,范围中断。索引带来空间和内存代价,包括额外磁盘空间、内存占用和数据修改时的维护成本。面试中可能涉及B+树、聚簇索引、覆盖索引等知识点。MySQL采用B+树,因其利于范围查询和内存效率。数据库不使用索引可能因`!=`、`LIKE`、字段区分度低、特殊表达式或全表扫描更快。索引与NULL值处理在不同数据库中有差异,MySQL允许NULL在索引中的使用。
11 3
|
8天前
|
关系型数据库 MySQL 数据库连接
Django(四):Django项目部署数据库及服务器配置详解(MySQL)
Django(四):Django项目部署数据库及服务器配置详解(MySQL)
30 11
|
12天前
|
关系型数据库 MySQL 数据库
mysql卸载、下载、安装(window版本)
mysql卸载、下载、安装(window版本)
|
1月前
|
关系型数据库 MySQL 数据库
rds安装数据库客户端工具
安装阿里云RDS的数据库客户端涉及在本地安装对应类型(如MySQL、PostgreSQL)的客户端工具。对于MySQL,可选择MySQL Command-Line Client或图形化工具如Navicat,安装后输入RDS实例的连接参数进行连接。对于PostgreSQL,可以使用`psql`命令行工具或图形化客户端如PgAdmin。首先从阿里云控制台获取连接信息,然后按照官方文档安装客户端,最后配置客户端连接以确保遵循安全指引。
82 1