Ajax Load Web Page (PHP & ASP) |
Ajax Load Web Page (PHP & ASP) ตัวอย่างการโหลดหน้าเว็บไซต์ด้วย Ajax ในการรับส่งข้อมูลระหว่าง Client -> Server ซึ่งในตัวอย่างผมได้กำหนดเป็นเมนูต่าง ๆ เช่น Home , Service , About , Contact การทำงานสามารถโหลดได้อย่างรวดเร็ว
PHP
AjaxPHPLoadPage1.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(url) {
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 pmeters = "";
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);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
}
}
}
</script>
</head>
<body Onload="JavaScript:doCallAjax('home.php');">
<h1>My Web Page </h1>
<table width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="152" valign="top" align="center"><a href="JavaScript:doCallAjax('home.php');">Home</a></td>
<td width="189" valign="top" align="center"><a href="JavaScript:doCallAjax('service.php');">Service</a></td>
<td width="204" valign="top" align="center"><a href="JavaScript:doCallAjax('about.php');">About</a></td>
<td width="225" valign="top" align="center"><a href="JavaScript:doCallAjax('contact.php');">Contact</a></td>
</tr>
<tr>
<td colspan="4" valign="top"><span id="mySpan"></span></td>
</tr>
</table>
</body>
</html>
home.php
<?php
/*** By Weerachai Nukitram ***/
/*** http://www.ThaiCreate.Com ***/
?>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="780" height="120" colspan="4" align="center"><h1>Home</h1></td>
</tr>
</table>
service.php
<?php
/*** By Weerachai Nukitram ***/
/*** http://www.ThaiCreate.Com ***/
?>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="780" height="120" colspan="4" align="center"><h1>Service</h1></td>
</tr>
</table>
about.php
<?php
/*** By Weerachai Nukitram***/
/*** http://www.ThaiCreate.Com ***/
?>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="780" height="120" colspan="4" align="center"><h1>About Us</h1></td>
</tr>
</table>
contact.php
<?php
/*** By Weerachai Nukitram ***/
/*** http://www.ThaiCreate.Com ***/
?>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="780" height="120" colspan="4" align="center"><h1>Contact US</h1></td>
</tr>
</table>
Screenshot
ASP
AjaxASPLoadPage1.asp
<%
'*** By Weerachai Nukitram ***'
'*** http://www.ThaiCreate.Com ***'
%>
<html>
<head>
<title>ThaiCreate.Com Ajax Tutorial</title>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax(url) {
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 pmeters = "";
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);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
}
}
}
</script>
</head>
<body Onload="JavaScript:doCallAjax('home.asp');">
<h1>My Web Page </h1>
<table width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="152" valign="top" align="center"><a href="JavaScript:doCallAjax('home.asp');">Home</a></td>
<td width="189" valign="top" align="center"><a href="JavaScript:doCallAjax('service.asp');">Service</a></td>
<td width="204" valign="top" align="center"><a href="JavaScript:doCallAjax('about.asp');">About</a></td>
<td width="225" valign="top" align="center"><a href="JavaScript:doCallAjax('contact.asp');">Contact</a></td>
</tr>
<tr>
<td colspan="4" valign="top"><span id="mySpan"></span></td>
</tr>
</table>
</body>
</html>
home.asp
<%
'*** By Weerachai Nukitram ***'
'*** http://www.ThaiCreate.Com ***'
%>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="780" height="120" colspan="4" align="center"><h1>Home</h1></td>
</tr>
</table>
service.asp
<%
'*** By Weerachai Nukitram ***'
'*** http://www.ThaiCreate.Com ***'
%>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="780" height="120" colspan="4" align="center"><h1>Service</h1></td>
</tr>
</table>
contact.asp
<%
'*** By Weerachai Nukitram ***'
'*** http://www.ThaiCreate.Com ***'
%>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="780" height="120" colspan="4" align="center"><h1>Contact US</h1></td>
</tr>
</table>
about.asp
<%
'*** By Weerachai Nukitram ***'
'*** http://www.ThaiCreate.Com ***'
%>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="780" height="120" colspan="4" align="center"><h1>About Us</h1></td>
</tr>
</table>
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
Load balance : Server 03
