ZengAjax-Client/Server Abstraction

::: ZengAjax-Client/Server Demo :::

Server Site Script ให้สร้างไฟล์ที่ชื่อเดียวกับชื่อคลาส เช่น จะสร้างคลาส Student
จะต้องสร้างไฟล์ชื่อ Student.php ใน Folder "AjaxServerScript" แล้วสร้าง Method ต่างๆ ที่ต้องการใช้งาน
และสามารถรับค่า $_GET[''] จาก Client(ZengAjaxClient จะมี Method ในการส่ง parameter ไปให้ ZengAjaxServer) ใน Method ได้เลย
method สามารถ return ค่าได้สองแบบคือ return javascript กับ return content (ชุดอักขระทั่วๆไป)
ในตัวอย่างนี้เราสร้างคลาสชื่อ GetInformation ดังนั้นเราจะมีไฟล์ GetInformation.php อยู่ใน Folder "AjaxServerScript"

เรียกใช้ไฟล์ .js เหล่านี้ครับ

Your Name Sent To Ajax-Server : <<== try to change me.

This div update by Ajax Timer => Get Content every 10 sec.

No Data

This div update by Ajax Timer => Get JavaScript every 15 sec.

No Data

ดู Code แบบสะอาด ๆ ทั้งหมด

<?php
header('Content-type: text/html; charset=utf-8');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ZengAjax-Client/Server Demo</title>
<script src="rico/prototype.js"></script>
<script src="rico/rico.js"></script>
<script src="rico/zengcode.js"></script>
<head>
<body>
<h3>
<img src="images/logo.gif">
<CENTER><B><U>::: ZengAjax-Client/Server Abstraction Demo :::</U></B></CENTER>
</h3><BR>

<script>
var zeng = new ZengAjaxClient();
	zeng.Interval=10000;
</script>

<BR><B>Your Name Sent To Ajax-Server :  </B><input type="text" id="myname" value="Mr.Chiwa Kantawong" size="50"> <<== try to change me.
<BR><BR><input type="button" value="GetFullName => Get JavaScript with parameter to Ajax-Server" onclick="zeng.AddParam('name',document.getElementById('myname').value);zeng.ExecuteJavascript('GetInformation','GetFullName');">
  <input type="button" value="GetNickName  => Get JavaScript" onclick="zeng.ExecuteJavascript('GetInformation','GetNickName');">
  <input type="button" value="GetText => Get Content" onclick="zeng.ExecuteContent('GetInformation','GetText','div_content');">
<p>
<font color="blue"><B>This div update by Ajax Timer => Get Content  every 10 sec.</B></font>
<script>zeng.TimerExecuteContent(zeng,'GetInformation','GetText','div_content');</script>
<div id="div_content">No Data</div>
</p>

<script>
var zeng2 = new ZengAjaxClient();
     zeng2.AddParam("divname","div_content2");
	 zeng2.Interval=15000;  
</script>
<p>
<script>zeng2.TimerExecuteJavascript(zeng2,'GetInformation','GetMe');</script>
<font color="blue"><B>This div update by Ajax Timer => Get JavaScript  every 15 sec.</B></font>
<div id="div_content2">No Data</div>
</p>

อธิบายเพิ่มเติม

1.

    var zeng = new ZengAjaxClient();
	zeng.Interval=10000;
	
var zeng = new ZengAjaxClient();  ==> เป็นการประกาศ object ZengAjaxClient

zeng.Interval=10000;  ==>  ประกาศให้ Class Timer ให้ทำงานทุก 10 วินาท

2
<input type="button" value="GetFullName => Get JavaScript with parameter to Ajax-Server" onclick="zeng.AddParam('name',document.getElementById('myname').value);zeng.ExecuteJavascript('GetInformation','GetFullName');">
สร้างปุ่มให้เรียนก ZengAjax-Server ให้ทำงาน

zeng.AddParam('name',document.getElementById('myname').value); ==> สร้าง parameter ที่จะส่งไปให้ฝั่ง Server ชื่อว่า name 
name จะถูก get ไปยัง server
เราสามารถ เพิ่ม parameter ได้ไม่จำกัด เช่น zeng.AddParam('param_name','param_value');
และสามารถ clear ค่า parameter ได้ด้วย zeng.ClearParam(); 

zeng.ExecuteJavascript('GetInformation','GetFullName'); ==> เป็นการเรียน ZengAjax-Server ให้ทำงาน โดยจะ return javascript กลับมาให้ทำงานที่ฝั่ง Client
โดยที่ GetInformation = ชื่อ class (จะมีไฟล์ GetInformation.php อยู่ใน Folder "AjaxServerScript")
        GetFullName = Method GetFullName ที่อยู่ใน	Class GetInformation.

3
<input type="button" value="GetText => Get Content" onclick="zeng.ExecuteContent('GetInformation','GetText','div_content');">

zeng.ExecuteContent('GetInformation','GetText','div_content');==> เป็นการเรียน ZengAjax-Server ให้ทำงาน โดยจะ return contents(text) กลับมาให้ทำงานที่ฝั่ง Client
โดยที่ GetInformation = ชื่อ class (จะมีไฟล์ GetInformation.php อยู่ใน Folder "AjaxServerScript")
        GetText = Method GetText ที่อยู่ใน	Class GetInformation.
        div_content = คือ element id ของ div ที่จะแสดง content ที่มาจาก ZengAjax-Server ในที่นี้ก็คือ No Data เป็นต้น

4
การใช้ Timer

zeng.TimerExecuteContent(zeng,'GetInformation','GetText','div_content'); ==> เหมือนเรียกใช้  ExecuteContent แต่ต้องส่ง parameter เพิ่มตัวแรกเป็น object ตัวเอง
zeng2.TimerExecuteJavascript(zeng2,'GetInformation','GetMe'); ==> เหมือนเรียกใช้  ExecuteJavascript แต่ต้องส่ง parameter เพิ่มตัวแรกเป็น object ตัวเอง
ซึ่งจะทำงานทุกๆ กี่วินาที่แล้วแต่เรา set ค่า Interval

เป็นไงครับ ง่ายไหมครับ ไม่ได้รู้สึกว่าเขียนอะไรพิเศษแค่ javascript กับ php ธรรมดาก็ทำให้คุณใช้ Ajax ได้อย่างง่ายดายแล้วครับ

Download