|
 |
| |
ใครรุ้บอกกกกกกกกกกกกกกหนอย ค่ะ อยากได้โค้ด เวลา เปลี่ยน หน้า ให้มัน ขึ้น เปนรูป LOADing อ่า |
| |
 |
|
|
 |
 |
|
ตัวอย่างการทำ Ajax Icon Loading
ในขณะที่กำลังทำการโหลดข้อมูลอยู่ ในขณะนั้น ขั้นตอนการทำไม่ยากครับ เพียงแทรกรูปภาพและทำการซ่อนเอาไว้ และเมื่อที่ทำการส่งข้อมูลไปยัง Server ก็ให้โชว์รูปเพื่อแสดงสถานะการทำงานอยู่
AjaxLoading1.php
Code (PHP)
<?php
/*** By Weerachai Nukitram ***/
/*** http://www.ThaiCreate.Com ***/
?>
<html>
<head>
<title>ThaiCreate.Com Ajax Tutorial</title>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax(ID) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'AjaxLoading2.php';
var pmeters = "tID="+ID;
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
//*** Loading (Client -> Server) ***//
document.getElementById("imgLoading").style.display = '';
document.getElementById("mySpan").style.display = 'none';
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request (Server -> Client)
{
//*** Loading ***//
document.getElementById("imgLoading").style.display = '';
document.getElementById("mySpan").style.display = 'none';
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById("imgLoading").style.display = 'none';
document.getElementById("mySpan").style.display = '';
document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
}
}
}
</script>
</head>
<body Onload="JavaScript:doCallAjax('1');">
<h1>My Content</h1>
<table width="562" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" valign="top">
<?
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("mydatabase");
$strSQL = "SELECT * FROM content ORDER BY ContentID ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
while($objResult = mysql_fetch_array($objQuery))
{
?>
<a href="JavaScript:doCallAjax('<?=$objResult["ContentID"];?>');"><?=$objResult["ContentID"].". ".$objResult["Subject"];?></a><br>
<?
}
?>
<?
mysql_close($objConnect);
?>
</td>
<td width="660" valign="top">
<div id="imgLoading" style="display='none';"><img src="images/loading.gif"></div>
<span id="mySpan"></span>
</td>
</tr>
</table>
</body>
</html>
AjaxLoading2.php
Code (PHP)
<?php
/*** By Weerachai Nukitram ***/
/*** http://www.ThaiCreate.Com ***/
sleep(2);
$strID = $_POST["tID"];
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("mydatabase");
$strSQL = "SELECT * FROM content WHERE ContentID = '".$strID."' ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$objResult = mysql_fetch_array($objQuery);
echo nl2br($objResult["Description"]);
mysql_close($objConnect);
?>
Ajax Loading Progress Icon
|
 |
 |
 |
 |
| Date :
2010-01-16 21:31:55 |
By :
panyapol |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
นั้นงัยมีP@e ช่วยอยู่
|
| |
|
|
| |
| Date :
2010-01-16 21:48:02 |
By :
T&Parita |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองทำตาม Code ข้างบนดูครับ
ถ้ายังไม่ได้ หรือติดปัญหา เดี๋ยวจัดอีกตัวไปให้ เป็น java script ครับ 
|
| |
|
|
| |
| Date :
2010-01-18 10:41:35 |
By :
panyapol |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2010-01-23 11:38:25 |
By :
wave777 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 01
|
