开讲前，先说下网上，大部分的关于这方面的博文或者其他什么的，就我自己的感觉，第一说得不详细，第二语言不能很好的被初学者了解。
我这篇博文的标题之所以用了三句，是为了方便其他人好查找；
这里介绍的方法有什么用呢？ 使用它，就可以无闪刷新页面，并且从数据库获取实时改变的数据反馈回界面，显示出来！是不是很爽，的确。
废话不多，开讲，请注意我的代码的注释，里面详说！
连接的前台连接的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:UsersAdministrator.PC--20130918KZNDesktop9.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 ?>
由于我自己是通过输出系统时间来测试的，测试成功后是，看到时间的。