Wonder world http://blog.win2wins.com Just another WordPress weblog Thu, 21 Aug 2008 17:52:42 +0000 http://wordpress.org/?v=2.5.1 en AJAX - The Server-Side Script http://blog.win2wins.com/2008/08/17/ajax-the-server-side-script/ http://blog.win2wins.com/2008/08/17/ajax-the-server-side-script/#comments Sat, 16 Aug 2008 20:37:04 +0000 admin http://blog.win2wins.com/?p=10 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/feed/ AJAX - Request a Server http://blog.win2wins.com/2008/08/17/ajax-request-a-server/ http://blog.win2wins.com/2008/08/17/ajax-request-a-server/#comments Sat, 16 Aug 2008 20:00:24 +0000 admin http://blog.win2wins.com/?p=9 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() method ทำหน้าที่ส่งการร้องขอ ไปยังเซิฟเวอร์

ตัวอย่างรูปแบบดังเช่นข้างล่างนี้

———–

xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);

———–

คราวนี้เราต้องการให้ เมื่อผู้ใช้พิมพ์ข้อความเข้าไปในช่อง user name แล้วให้ช่องเวลาเกิดการเปลี่ยนแปลง

หมายถึงมีการทำงานของกระบวนการ ajax เบื้องหลังเมื่อมีการพิมพ์ข้อมูลในช่อง username ดังนั้นเราต้องมี

ส่วนของ javascript เพื่อทำงานเกี่ยวกับ ajax ในช่ิองของ username โดยเราสามารถปรับปรุงโค้ดดังข้างล่างนี้

————-

<form name="myForm">
Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>

————-

เมื่อเราปรับปรุงแล้ว ไฟล์ testAjax.htm จะเป็นดังข้างล่างนี้เอง

————–

<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      document.myForm.time.value=xmlHttp.responseText;
      }
    }
  xmlHttp.open("GET","time.asp",true);
  xmlHttp.send(null);
  }
</script>
<form name="myForm">
Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>

————–

ในบทต่อไปเราจะสร้างไฟล์ time.asp เพื่อให้เป็นไปตามเป้าหมายของงาน โดยไฟล์ time.asp เป็นไฟล์ที่ทำงานในส่วนของ เซิฟเวอร์ และไฟล์นี้หล่ะที่ประมวลผลเวลาคืนมาผ่านทาง ajax เพื่อแสดงผลในไฟล์ testAjax.htm

แปลไม่แหล่มขออภัยด้วย.

]]> http://blog.win2wins.com/2008/08/17/ajax-request-a-server/feed/ AJAX - The XMLHttpRequest Object http://blog.win2wins.com/2008/08/17/ajax-the-xmlhttprequest-object/ http://blog.win2wins.com/2008/08/17/ajax-the-xmlhttprequest-object/#comments Sat, 16 Aug 2008 18:41:34 +0000 admin http://blog.win2wins.com/?p=8 บทความนี้แปลมาจาก 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 ทำงานอยู่

ข้างล่างนี้คือค่าที่เป็นไปได้ ของ readyState

——————–

State Description
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete

——————–

เราจะเพิ่ม เงื่อนไข IF เข้าไปในโค้ดเดิม ดังข้างล่างนี้ เพื่อจะได้รู้ว่าเมื่อเราร้องขอไปยังเซิฟเวอร์ สามารถสำเร็จได้

———————-

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
  {
  // Get the data from the server's response
  }
}

———————-

3.The responseText Property ( คุณสมบัติที่ชื่อว่า responseText )

ข้อมูลที่ถูกส่งกลับมาจากเซิฟเวอร์นั้น จะถูกรับโดยคุณสมบัติ responseText นั่นเอง

ท่านจะจำได้ว่า จากโค้ดหน้ากรอกข้อมูล เรามี Textfield อันนึงชื่อว่า time และเรามีจุดมุ่งหมาย

ให้ช่อง time นั้นถูกกรอกเอง โดยการทำงานของ ajax ดังนั้นจากโค้ดข้างบน เราต้องใส่ตัวแปร time (เป็นชื่อ)

เพื่อให้สอดคล้องกับจุดมุ่งหมาย โดยตัวแปร time จะได้รับค่าจาก responseText นั่นเอง

——————–

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
  {
  document.myForm.time.value=xmlHttp.responseText;

  }
}

——————–

สรุปในบทนี้เราได้เรียนเรื่องอะไรบ้าง

————————

1. XMLHttpRequest Object มีคุณสมบัติสำคัญสามตัว

2. คุณสมบัติ onreadystatechange เป็นฟังก์ชั่นโต้ตอบกับเซิฟเวอร์

3. คุณสมบัติ readyState เป็นฟังก์ชั่นบอกให้ทราบถึงสถานะที่เปลี่ยนไปจากเซิฟเวอร์

4. คุณสมบัติ responseText เป็นตัวที่รับข้อมูลจากเซิฟเวอร์

————————

ในบทต่อไปเราจะเรียนรู้ว่า จะถามถึง(ask) ข้อมูลบางอันจาก เซิฟเวอร์อย่างไร.

ถ้าแปลไม่แหล่มขออภัยด้วย

]]> http://blog.win2wins.com/2008/08/17/ajax-the-xmlhttprequest-object/feed/ AJAX Browser Support http://blog.win2wins.com/2008/08/16/ajax-browser-support/ http://blog.win2wins.com/2008/08/16/ajax-browser-support/#comments Fri, 15 Aug 2008 22:10:50 +0000 admin http://blog.win2wins.com/?p=7 บทความนี้แปลมาจาก 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 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  }
</script>
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>

——————————–

อธิบายได้ว่า

ในตอนแรกเราประกาศตัวแปร xmlHttp เพื่อเก็บค่าของ XMLHttpRequest object นะครับ

จากนั้นก็สร้าง XMLHttpRequest ด้วย คำสั่ง XMLHttp=new XMLHttpRequest() นะครับ โดยจะได้ผมเมื่อเป็นบราวเซอร์ Firefox, Opera, Safari นะครับ ถ้าเกิดไม่ใช่แล้ว (เป็นเท็จ) ก็จะไปสร้าง XMLHttpRequest ด้วยคำสั่ง xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”) ซึ่งเป็นของ IE6+ นะครับ แต่ถ้ายังไม่ได้อีกก็จะไปสร้างจาก xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”) ซึ่งเป็นของ IE5.5 นะครับ สาเหตุที่มีแค่นี้เพราะ บราวเซอร์เหล่านี้ล้วนมีผู้คนนิยมใช้มากที่สุกในโลก. ถ้าไม่สามารถสำเร็จก็แสดงว่า บราวเซอร์ที่ใช้ไม่ใช้บราวเซอร์ที่มีมาตรฐานครับ ดังนั้นจะไม่สามารถใช้งาน ajax ได้นะครับ ( อาจจะได้ก็ได้นะ )

ในบทต่อไปเราจะพูดถึงการสื่อสารระหว่างตัว XMLHttpRequest กับเซิฟเวอร์นะครับ

ถ้าแปลไม่แหล่มขออภัยด้วยครับ

]]> http://blog.win2wins.com/2008/08/16/ajax-browser-support/feed/ AJAX Example http://blog.win2wins.com/2008/08/16/ajax-example/ http://blog.win2wins.com/2008/08/16/ajax-example/#comments Fri, 15 Aug 2008 21:16:09 +0000 admin http://blog.win2wins.com/?p=6 บทความนี้แปลมาจาก 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>

——————————————————
ในบทต่อไป เราจะพูดถึงส่วนหลักของ Ajax นะครับ

ถ้าแปลไม่แหล่ม ขออภัยด้วยครับ.

]]> http://blog.win2wins.com/2008/08/16/ajax-example/feed/ AJAX Uses HTTP Requests http://blog.win2wins.com/2008/08/15/ajax-uses-http-requests/ http://blog.win2wins.com/2008/08/15/ajax-uses-http-requests/#comments Thu, 14 Aug 2008 19:19:08 +0000 admin http://blog.win2wins.com/?p=5 บทความนี้แปลมาจาก 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 โดย google ( google suggest )

Google suggest- ได้ใช้งาน XMLHttpRequest object เพื่อคืนค่าผลลัพธ์ออกมาโดยไม่ต้องโหลดหน้าใหม่

Google suggest- คือส่วนที่แนะนำคำที่เราต้องการค้นหา เมื่อเราพิมพ์ตัวอักษรบางตัว เช่นรูปข้างล่างนี้

XMLHttpRequest object นั้นถูกสนับสนุนในเว็บบราวเซอร์หลักๆ ดังต่อไปนี้ เช่น

Internet Explorer 5.0+

Safari 1.2

Mozilla 1.0 / Firefox

Opera 8+

Netscape 7.

เป็นต้น

แปลไม่แหล่ม ขออถัยด้วยนะครับ

]]> http://blog.win2wins.com/2008/08/15/ajax-uses-http-requests/feed/ AJAX Introduction http://blog.win2wins.com/2008/08/15/ajax-introduction/ http://blog.win2wins.com/2008/08/15/ajax-introduction/#comments Thu, 14 Aug 2008 18:28:33 +0000 admin http://blog.win2wins.com/?p=4 บทความนี้แปลมาจาก 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 นี้ทำให้ แอปปริเคชั่น บนอินเทอร์เนต เล็กลง รวดเร็วขึ้น และเป็นประโยชน์กับผู้ใช้งานมากขึ้น

Ajax เป็นเทคโนโลยีของ บราวเซอร์ ที่ต้องพึ่งพา ซอฟแวร์ฝั่งเว็บเซอร์เวอร์

——————————————————-

AJAX is Based on Web Standards

Ajax นั้นเป็นรากฐานมาจากของมาตรฐานเว็บ ซึ่งประกอบไปด้วยวัสดุอุปกรณ์ต่างๆดังนี้

- Javascript

- XML

- HTML

- CSS

มาตรฐานของเว็บที่ใช้ใน Ajax ถูกนิยามไว้ดังข้างบนนั้น ล้วนถูกสนับสนุนให้ใช้งานได้ในโปรแกรมเว็บบราวเซอร์หลักๆอยู่แล้ว

ดังนั้น Ajax แอป. จะสามารถทำงานได้ก็จะต้องพึ่งพา เว็บบราวเซอร์ และ เซอร์เวอร์ ที่สนับสนุนด้วย

——————————————————————–

AJAX is About Better Internet Applications

่้เว็พแอป นั้นมีประโยชน์มากกว่า เดสทอป แอป มากๆ . มันสามารถรองรับผู้ใช้งานได้เยอะ สามารถติดตั้งได้ง่าย

และสามารถพัฒนาได้ง่าย

อย่างไรก็ตาม เว็บแอปก็ไม่เหมือน เดสทอปแอป เดิมๆแต่อย่างใด

เพราะมันสามารถมีความสมบูณร์กว่า และใช้งานง่ายกว่าสำหรับผู้ใช้ทั่วไป.

——————————————————-

You Can Start Using AJAX Today

นี่ไม่ใช่การเรียนรู้ใหม่ๆเลย แต่มันเป็นสิ่งที่นักพัฒนาจำนวนมากเรียนรู้กันมาแล้วหลายปี เพราะว่า Ajax มันอยู่บนพื้นฐานของ

มาตรฐานต่างๆในการทำเว็บ ดังนั้นการศึกษานี้ไม่ใช่สิ่งใหม่ แต่มันคือการประยุกต์นำมาใช้งาน

แปลไม่แหล่มขออภัยด้วยนะ.

]]> http://blog.win2wins.com/2008/08/15/ajax-introduction/feed/