|
|
|
จะเขียน ajax เหมือน Facebook เวลากด Like ได้ยังไงครับ |
|
|
|
|
|
|
|
Code (PHP)
<a href="JavaScript:doCallAjax();" ><img src='image.jpg' /></a>
แบบนี้หรือปล่าวครับ
|
|
|
|
|
Date :
2010-10-01 13:44:55 |
By :
dekkuza |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ใช่เลยครับ แล้วเวลาเรียกใช้เรียกยังไงครับ
|
|
|
|
|
Date :
2010-10-01 16:30:03 |
By :
closedtoone |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
อย่างโค้ดด้านล่างนี้อ่ะครับ
ถ้าคลิ๊กลิงค์ ไม่ว่าจะลิงค์ใหนก็ตาม แล้วมันจะเปลี่ยนในส่วนของ <span id="mySpan"></span> ใช่มั้ยครับ
แต่ผมอยากให้เวลาคลิ๊ก เช่น
ถ้าคลิ๊กลิงค์ที่ 1 ก็จะไปเปลี่ยนในส่วนของ "><span id="mySpan1"></span>
ถ้าคลิ๊กลิงค์ที่ 2 ก็จะไปเปลี่ยนในส่วนของ "><span id="mySpan2"></span>
ถ้าคลิ๊กลิงค์ที่ 3 ก็จะไปเปลี่ยนในส่วนของ "><span id="mySpan3"></span>
พอจะแนะนำได้มั้ยครับ ว่าต้องแก้ไขโค้ดด้านล่างนี้ยังไงบ้าง
Code (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>
|
|
|
|
|
Date :
2010-10-01 17:43:39 |
By :
closedtoone |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Code (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,element_name) {
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(element_name).innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById(element_name).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('scan.php','myspan1');">Home</a></td>
<td width="189" valign="top" align="center"><a href="JavaScript:doCallAjax('scan.php','myspan2');">Service</a></td>
<td width="204" valign="top" align="center"><a href="JavaScript:doCallAjax('scan.php','myspan3');">About</a></td>
<td width="225" valign="top" align="center"><a href="JavaScript:doCallAjax('scan.php','myspan4');">Contact</a></td>
</tr>
<tr>
<td colspan="4" valign="top"><span id="myspan1"></span></td>
</tr>
<tr>
<td colspan="4" valign="top"><span id="myspan2"></span></td>
</tr>
<tr>
<td colspan="4" valign="top"><span id="myspan3"></span></td>
</tr>
<tr>
<td colspan="4" valign="top"><span id="myspan4"></span></td>
</tr>
</table>
</body>
</html>
ถ้าให้ดีหา Ajax frame work ดีดมาช่วยเขียน Ajax จะได้เขียนง่ายขึ้นครับ
|
ประวัติการแก้ไข 2010-10-03 21:45:09
|
|
|
|
Date :
2010-10-03 21:25:41 |
By :
dekkuza |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 00
|