Wonder world http://blog.win2wins.com Just another WordPress weblog Thu, 21 Aug 2008 17:52:42 +0000 http://backend.userland.com/rss092 en AJAX - The Server-Side Script AJAX - The Server-Side ASP Script ต่อไปเราจะสร้างไฟล์เพื่อรายงาน เวลาของเซิฟเวอร์ ตัว responseText นั้นจะเก็บค่าที่ได้จากเซิฟเวอร์ ดังนั้นเราต้องสร้างไฟล์ที่ทำหน้าที่ส่งเวลาคืนไป โดยเราสร้าง time.asp ดังนี้ -------------- <% response.expires=-1 response.write(time) %> -------------- ปกติการเข้าหน้าเว็บเดิม โปรแกรมเว็บบราวเซอร์จะมีหน้าที่ทำ cached คือเก็บข้อมูลเก่าไว้จนกว่าจะออกจากโปรแกรม ดังนั้นเพื่อที่จะไม่ให้มันเก็บค่าไว้ เราจึงต้องใช้คำสั่ง Response.Expires=-1 นี้ครับ ดูตัวอย่างได้จากนี้นะครับ http://www.w3schools.com/Ajax/ajax_serverscript.asp แปลไม่แหล่มขออภัยด้วยนะครับ http://blog.win2wins.com/2008/08/17/ajax-the-server-side-script/ AJAX - Request a Server AJAX - Sending a Request to the Server เพื่อที่จะส่งการร้องขอไปยัง เซิฟเวอร์ เราจะใช้ตัว open() และตัว send()  ( ตัว = method ) ตัว open() method นั้นมี 3 สิ่งที่ต้องการในการส่งข้อมูล ( three arguments ) 1. อันแรกจะบอกว่าส่งข้อมูลแบบไหน เช่น POST,GET 2. อันที่สองคือ URL ที่จะให้ทำงานต่อ รับงานต่อจากการร้องขอ หมายถึง URL เป้าหมายนั่นเอง ซึ่งอยู่ฝั่งเซิฟเวอร์ 3. อันที่สามไว้บอกว่าทำงานในลักษณะ asynchronously หรือ synchronously โดยค่าที่ใส่คือ true,false นั่นเอง ( โปรดศึกษาความหมายของ asynchronously เพิ่มเติม ) ตัว send() ... http://blog.win2wins.com/2008/08/17/ajax-request-a-server/ AJAX - The XMLHttpRequest Object บทความนี้แปลมาจาก http://www.w3schools.com/Ajax/ajax_xmlhttprequest.asp AJAX - More About the XMLHttpRequest Object ก่อนที่จะส่งข้อมูลเข้าไปยังเซิฟเวอร์ ต้องขออธิบาย 3 คุณสมบัติสำคัญของ XMLHttpRequest ก่อนนะครับ 1. The onreadystatechange Property (คุณสมบัติที่มีชื่อว่า onreadystatechange ) หลังจากส่งคำร้องขอไปยังเซิฟเวอร์ เราจำเป็นต้องมีฟังก์ชันไว้รับ ข้อมูลตอบกลับจากเซิฟเวอร์ ตัวคุณสมบัติ onreadystatechange นั้นได้เก็บฟังก์ชั่นที่ใช้ในกระบวนการโต้ตอบจากเซิฟเวอร์ ฟังก์ชั่นข้างล่างนี้ถูกประกาศไว้ว่างเปล่า และยังเป็นตัว onreadystatechange ในขณะเดียวกันด้วย --------------------- xmlHttp.onreadystatechange=function() { // We are going to write some code here } --------------------- 2. The readyState Property ( readyState ) คุณสมบัติตัว readyState นี้มีไว้เก็บค่าสถานะ ที่ถูกตอบกลับจากเซิฟเวอร์ แต่ละครั้งสถานะจะเปลี่ยนแปลงไปตลอด ขณะที่ฟังก์ชัน onreadystatechange ทำงานอยู่ ข้างล่างนี้คือค่าที่เป็นไปได้ ของ ... http://blog.win2wins.com/2008/08/17/ajax-the-xmlhttprequest-object/ AJAX Browser Support บทความนี้แปลมาจาก http://www.w3schools.com/Ajax/ajax_browsers.asp หลักสำคัญของ ajax คือตัว XMLHttpRequest นั่นเอง แต่ละโปรแกรมเว็บบราวเซอร์นั้น มีการสร้าง XMLHttpRequest ด้วยวิธีที่แตกต่างกัน ใช้ตัวสร้างที่เรียกว่า methods ต่างกัน เช่น ใน IE นั้นใช้ ActiveXObject ในการสร้าง แต่สำหรับโปรแกรมบราวเซอร์ยี่ห้ออื่นแล้ว ใช้จาวาสคริปส์ ชื่อว่า XMLHttpRequest นะครับ ดังนั้นก่อนที่เราจะสร้างตัว XMLHttpRequest สำหรับแต่ละโปรแกรมบราวเซอร์แล้ว เราต้องทราบก่อนใช่ไหมหล่ะครับ ว่าขณะนั้นผู้ใช้ ใช้โปรแกรมบราวเซอร์อะไรอยู่. การตรวจสอบบราวเซอร์ว่าเป็นยี่ห้ออะไรอย่างง่ายเลยก็ใช้ javascript ง่ายๆ โดยวิธี try and catch statement นะครับ เราจะปรับปรุงไฟล์ testAjax.htm ใหม่ให้เป็นดังข้างล่างนี้นะครับ เพื่อสร้างตัว XMLHttpRequest -------------------------------- <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera ... http://blog.win2wins.com/2008/08/16/ajax-browser-support/ AJAX Example บทความนี้แปลมาจาก http://www.w3schools.com/Ajax/ajax_example.asp Ajax แอป อันแรกของคุณ. เพื่อที่จะเข้าใจการทำงานของ Ajax , เราจะสร้าง Ajax แอป เล็กๆ นะครับ อันดับแรก เราจะสร้าง แบบฟอร์มรับข้อมูลในรูปแบบ HTML มาตรฐาน โดยมี 2 Text fields เพื่อกรอกข้อมูล. โดยให้ชื่อว่า username และ time ตามลำดับ . โดยช่อง username จะถูกกรอกโดยผู้ใช้เอง (เรา) และช่อง time จะถูก กรอกโดยการใช้งานของ ajax เอง. เราจะตั้งชื่อไฟล์ว่า testAjax.htm นะครับ โดยมีโค้ดดังข้างล่างนี้ (สังเกตว่าไม่มีการสร้างปุ่ม submit นะครับ ) --------------------------------------------- <html> <body> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> ------------------------------------------------------ ในบทต่อไป ... http://blog.win2wins.com/2008/08/16/ajax-example/ AJAX Uses HTTP Requests บทความนี้แปลมาจาก http://www.w3schools.com/Ajax/ajax_httprequest.asp ในการโค้ด จาวาสคริปสมัยก่อน ถ้าคุณต้องการที่จะเอาข้อมูลจากดาต้าเบสหรือไฟล์บนเซอร์เวอร์ หรือคุณต้องการจะส่งข้อมูลไปยังเซอร์เวอร์ คุณจะต้องมีหน้า HTML form และให้ลักษณะการส่งข้อมูลแบบ GET หรือ POST เพื่อส่งข้อมูลไปยังเซิฟเวอร์ โดยผู้ใช้งานจะต้องคลิกที่ปุ่ม "Submit" เพื่อส่งข้อมูล หรือ โหลดข้อมูล แล้วรอให้เซิฟเวอร์ตอบกลับ จากนั้นผลลัพธ์จะถูกแสดงผลออกมาพร้อมการโหลดหน้าเว็บเพจนั้นใหม่. ด้วยวิธีการนี้ ที่เซิฟเวอร์ต้องโหลดหน้าเว็บเพจใหม่ๆทุกครั้งที่ทำการร้องขอ ส่งผลให้การทำงานช้า และหนักเกินความจำเป็น ซึ่งไม่ดีเลยสำหรับผู้ใช้งาน และนั้นคือข้อเสียของเว็บแบบเก่าๆ ที่ไม่ใช้ วิธีของ Ajax ด้วย Ajax จาวาสคริปของคุณจะติดต่อไปยังเว็บเซอร์เวอร์โดยตรง โดยใช้ตัวจาวาสคริปที่มีชื่อว่า XMLHttpRequest ด้วยวิธีการสื่อสาร HTTP request แบบนี้ ทำให้หน้าเว็บสามารถร้องขอข้อมูล หรือส่งข้อมูล โดยไม่จำเป็นต้องโหลดหน้าเว็บใหม่ทั้งหมด. ผู้ใช้หน้าเว็บยังสามารถดู-อ่าน ข้อมูลอื่นๆในหน้านั้นได้ โดยในขณะเดียวกันมีการส่งข้อมูลเป็นพื้นหลังตลอดเวลา นั่นคือข้อดีของวิธีนี้ ---------------------------------------------------------- The XMLHttpRequest Object การใช้ XMLHttpRequest object นั้น เพื่อที่เมื่อโหลดหน้าเว็บเสร็จแล้ว นักพัฒนาจะได้ใช้ตัวนี้เป็นตัวเปลี่ยนแปลงข้อมูลในหน้าเว็บได้ทันทีนั่นเอง Ajax ได้รับความนิยมในปี 2005 ... http://blog.win2wins.com/2008/08/15/ajax-uses-http-requests/ AJAX Introduction บทความนี้แปลมาจาก http://www.w3schools.com/Ajax/ajax_intro.asp คุณควรจะรู้อะไรก่อนศึกษาบ้าง - HTML / XHTML - JavaScript ถ้าต้องการศึกษาเนื้อหาด้านบน สามารถศึกษาได้ที่ หน้าหลักของ http://www.w3schools.com/default.asp ได้เลยครับ -------------------------------------------------------------- AJAX = Asynchronous JavaScript and XML Ajax ไม่ใช่ภาษาการโปรแกรมใหม่ แต่เป็นเทคนิค ที่ทำให้การทำงานดีขึ้น เร็วขึ้น และอื่นๆมากมายในการโต้ตอบกันระหว่าง เว็บแอป. ด้วย Ajax แล้ว จาวาสคริป ของคุณสามารถสื่อสารได้โดยตรงกับ เซิฟเวอร์ โดยใช้จาวาสคริปตัวที่เรียกว่า XMLHttpRequest ด้วยจาวาสคริปตัวนี้ ทำให้จาวาสคริปของคุณ สามารถแลกเปลี่ยนข้อมูลกับเซิฟเวอร์ได้โดยไม่ต้อง รีโหลดเพจ ใหม่เหมือนสมัยก่อนๆ. Ajax นั้นใช้การขนถ่ายข้อมูลแบบ asynchronous (HTTP requests) ระหว่างโปรแกรมบราวเซอร์ (เช่น IE , Firefox) และ เว็บเซิฟเวอร์ โดยยอมให้ หน้าเว็บเรียกกลุ่มข้อมูลเล็กๆที่ต้องการเท่านั้นจากเซิฟเวอร์ แทนที่จะเรียกข้อมูลทั้งหมดเหมือนสมัยก่อน และด้วยเทคนิคของ Ajax นี้ทำให้ แอปปริเคชั่น บนอินเทอร์เนต ... http://blog.win2wins.com/2008/08/15/ajax-introduction/