標籤：des style blog http io ar color os 使用
開講前，先說下網上，大部分的關於這方面的博文或者其他什麼的，就我自己的感覺，第一說得不詳細，第二語言不能很好的被初學者瞭解。
我這篇博文的標題之所以用了三句，是為了方便其他人好尋找；
這裡介紹的方法有什麼用呢？ 使用它，就可以無閃重新整理頁面，並且從資料庫擷取即時改變的資料反饋回介面，顯示出來！是不是很爽，的確。
廢話不多，開講，請注意My Code的注釋，裡面詳說！
串連的前台串連的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分別輸出不同資料的方法。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
