13 กันยายน 2551

ตอนที่ 9 ปรับ Hello World เรียก Ajax!!!

ตอนนี้เราจะปรับโค้ดในส่วนของไฟล์ HelloWorld.html เพื่อเรียกใช้งาน Ajax ไฟล์ ที่เราจะเพิ่มเติมในตอนหน้า
เราจะเพิ่มส่วนของ ลิงค์ เรียกใช้ จาวาสคริปต์ที่เราได้เตรียมไว้แล้ว มาเริ่มกันเลย

ให้คุณปรับปรุงโค้ดในส่วนของ body ทั้งหมดดังนี้


<body style="font-family: Tahoma;font-size:0.8em;">
<div id="testMooTools" >Hello MooTools</div>
<a href="javascript:void(0)" onclick="doAjax('test1.html');">Ajax test1.html</a> 
<a href="javascript:void(0)" onclick="doAjax('test2.html');">Ajax test2.html</a>
<br />
<div id ="AjaxResult" ></div>
</body>


จากโค้ด ที่เพิ่มเข้ามาใหม่
href="javascript:void(0)" หมายถึง ไม่ได้ลิงค์ไปที่ใด และให้ตอบสนองแบบว่างเปล่า
onclick="doAjax('test1.html');" เป็นส่วนของ จาวาสคริปต์ เมื่อคลิกให้ทำการเรียกใช้ฟังก์ชัน doAjax และส่งค่าตัวแปรเข้าไปหนึ่งตัว ในที่นี้คือ test1.html

หน้าตาจะออกมาประมาณนี้ครับ

เป็นอันเสร็จสิ้นสำหรับไฟล์ HelloWorld.html ครับ

ต่อไปเราจะสร้างไฟล์อีกสองไฟล์เพื่อทดสอบระบบที่สมบูรณ์ โดยสร้างไฟล์ test1.html และ test2.html
โดยไฟล์ test1.html ผมสร้างเนื้อหาดังนี้
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This is test1</title>
</head>
<body>
I am test 1<br />
I am test 1<br />
I am test 1<br />
I am test 1<br />
I am test 1<br />
I am test 1<br />
I am test 1<br />
I am test 1<br />
I am test 1<br />
I am test 1<br />
I am test 1<br />
I am test 1<br />
I am test 1<br />
</body>
</html>


และไฟล์ test2.html มีเนื้อหาดังนี้
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This is test2</title>
</head>
<body>
I am test 2<br />
I am test 2<br />
I am test 2<br />
I am test 2<br />
I am test 2<br />
I am test 2<br />
I am test 2<br />
I am test 2<br />
I am test 2<br />
I am test 2<br />
I am test 2<br />
</body>
</html>


เมื่อรันโปรแกรมของเราและคลิกที่ลิงค์ จะได้ดังภาพ

และหากสังเกตดี ๆ ผลจากการใช้ Ajax การเปลี่ยนแปลงจะเกิดขึ้นเฉพาะส่วนของ แท็ก <div id ="AjaxResult" ></div> เท่านั้น
แสดงความคิดเห็น