如何用 ajax 连接mysql数据库，并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。...
生活随笔
收集整理的這篇文章主要介紹了
如何用 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 ?>?
由于我自己是通過輸出系統時間來測試的，測試成功后是，看到時間的。
?
總結
以上是生活随笔為你收集整理的如何用 ajax 连接mysql数据库，并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hadoop--Yarn资源调度器的基础
- 下一篇： hadoop--集群配置/群起集群