Ajax Loading Progress Icon |
Ajax Loading Progress Icon ตัวอย่างการทำ Ajax Icon Loading ในขณะที่กำลังทำการโหลดข้อมูลอยู่ในขณะนั้น ขั้นตอนการทำไม่ยากครับ เพียงแทรกรูปภาพและทำการซ่อนเอาไว้ และเมื่อที่ทำการส่งข้อมูลไปยัง Server ก็ให้โชว์รูปเพื่อแสดงสถานะการทำงานอยู่
ซ่อนรูปภาพ
<div id="imgLoading" style="display='none';"><img src="images/loading.gif"></div>
แสดงรูปภาพ
document.getElementById("imgLoading").style.display = '';
PHP & MySQL
AjaxLoading1.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">
<?php
$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('<?php echo $objResult["ContentID"];?>');"><?php echo $objResult["ContentID"].". ".$objResult["Subject"];?></a><br>
<?php
}
?>
<?php
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
<?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);
?>
Screenshot
ASP & Access
AjaxLoading1.asp
<%
'*** By Weerachai Nukitram ***'
'*** http://www.ThaiCreate.Com ***'
Option Explicit
%>
<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.asp';
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.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="577" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="104" valign="top">
<%
Dim Conn,strSQL,objRec
Set Conn = Server.Createobject("ADODB.Connection")
Conn.Open "DRIVER=Microsoft Access Driver (*.mdb);DBQ=" & Server.MapPath("db/mydatabase.mdb"),"" , ""
strSQL = "SELECT * FROM content ORDER BY ContentID ASC "
Set objRec = Server.CreateObject("ADODB.Recordset")
objRec.Open strSQL, Conn, 1,3
While Not objRec.EOF
%>
<a href="JavaScript:doCallAjax('<%=objRec.Fields("ContentID").Value%>');"><%=objRec.Fields("ContentID").Value&" "&objRec.Fields("Subject").Value%></a><br>
<%
objRec.MoveNext
Wend
objRec.Close()
Conn.Close()
Set objRec = Nothing
Set Conn = Nothing
%>
</td>
<td width="540" valign="top">
<div id="imgLoading" style="display='none';"><img src="images/loading.gif"></div>
<span id="mySpan"></span>
</td>
</tr>
</table>
</body>
</html>
AjaxLoading2.asp
<%
'*** By Weerachai Nukitram ***'
'*** http://www.ThaiCreate.Com ***'
Option Explicit
Dim strID
strID = Request.Form("tID")
Dim Conn,strSQL,objRec
Set Conn = Server.Createobject("ADODB.Connection")
Conn.Open "DRIVER=Microsoft Access Driver (*.mdb);DBQ=" & Server.MapPath("db/mydatabase.mdb"),"" , ""
strSQL = "SELECT * FROM content WHERE ContentID = "&strID&" "
Set objRec = Conn.Execute(strSQL)
Response.write Replace(objRec.Fields("Description").Value,vbCrLf,"<br>")
objRec.Close()
Conn.Close()
Set objRec = Nothing
Set Conn = Nothing
%>
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
Load balance : Server 02
