ตอนที่ 9 ปรับ Hello World เรียก Ajax!!!
ตอนนี้เราจะปรับโค้ดในส่วนของไฟล์ HelloWorld.html เพื่อเรียกใช้งาน Ajax ไฟล์ ที่เราจะเพิ่มเติมในตอนหน้า
เราจะเพิ่มส่วนของ ลิงค์ เรียกใช้ จาวาสคริปต์ที่เราได้เตรียมไว้แล้ว มาเริ่มกันเลย
ให้คุณปรับปรุงโค้ดในส่วนของ body ทั้งหมดดังนี้
จากโค้ด ที่เพิ่มเข้ามาใหม่
href="javascript:void(0)" หมายถึง ไม่ได้ลิงค์ไปที่ใด และให้ตอบสนองแบบว่างเปล่า
onclick="doAjax('test1.html');" เป็นส่วนของ จาวาสคริปต์ เมื่อคลิกให้ทำการเรียกใช้ฟังก์ชัน doAjax และส่งค่าตัวแปรเข้าไปหนึ่งตัว ในที่นี้คือ test1.html
หน้าตาจะออกมาประมาณนี้ครับ
เป็นอันเสร็จสิ้นสำหรับไฟล์ HelloWorld.html ครับ
ต่อไปเราจะสร้างไฟล์อีกสองไฟล์เพื่อทดสอบระบบที่สมบูรณ์ โดยสร้างไฟล์ test1.html และ test2.html
โดยไฟล์ test1.html ผมสร้างเนื้อหาดังนี้
และไฟล์ test2.html มีเนื้อหาดังนี้
เมื่อรันโปรแกรมของเราและคลิกที่ลิงค์ จะได้ดังภาพ
และหากสังเกตดี ๆ ผลจากการใช้ Ajax การเปลี่ยนแปลงจะเกิดขึ้นเฉพาะส่วนของ แท็ก <div id ="AjaxResult" ></div> เท่านั้น
เราจะเพิ่มส่วนของ ลิงค์ เรียกใช้ จาวาสคริปต์ที่เราได้เตรียมไว้แล้ว มาเริ่มกันเลย
ให้คุณปรับปรุงโค้ดในส่วนของ 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> เท่านั้น
ความคิดเห็น
แทบจะเรียกว่าโอกาสออกต่างจังหวัดน้อยมาก
ชีวิตคือ บ้านกับโรงเรียนเท่านั้น...
ส่วนลิงค์ไปยังบทความที่เกี่ยวกับ Air สามารถดูได้ที่ป้ายกำกับ
อย่าง Air นี่ก็ใช้ลิงค์นี้ครับ
http://krupong.blogspot.com/search/label/Air