ចែក​រំលែក​គំនិត​ និង​ចំណេះដឹង​ជាមួយគ្នា

សាកល្បង Ajax ជាមួយភាសា Server-Side PHP

Posted in កម្មវិធីទូរស័ព្ទ by ប្រាក់ សុភី on ខែមករា 31, 2009

Source Code

Ajax មកពីពាក្យ Asynchronous JavaScript and XML វាមានដើមកំនើតក្នុង ឆ្នាំ2005 សូមមើលអត្ថបទរបស់លោក Jesse James Garrett។Ajax បានធ្វើអោយ Web Application មានការពេញនិយមជាង Desktop Application នាពេលបច្ចុប្បន្ននេះ ព្រោះវាអាចភ្ជាប់ទៅកាន់ Sever ដោយមិនចាំបាច់ Refresh Page ដូចជាភាសា Server-Side(PHP, ASP.NET, JSP…)។

សូមមិនរៀបរាប់ច្រើនទេអំពី Ajax សូមើល http://www.w3schools.com បន្ថែម។ ខាងក្រោមនេះជាឧទាហរណ៍ ពីការប្រើប្រាស់ Ajax សង្ឃឹមថានេះ ជាឧទាហរណ៍មួយជួយបង្ហាញផ្លូវដល់អ្នកដែលចង់ស្វែងយល់អំពី Ajax។

dknowknow

១ បង្កើត index.html

<!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>
    <title>AJAX with PHP: Quickstart</title>
    <script type="text/javascript" src="ajax.js"></script>
	<style type="text/css">
		.message{
			color:red;
		}
	</style>
  </head>
  <body onload='process()'>
    សូមបញ្ចួលឈ្មោះត្រង់នេះ: 
    <input type="text" id="myName" />
    <div id="divMessage" class="message"></div>
  </body>
</html>

សំរាប់បង្ហាញ message ពី ajax សូមមើលរូប ខាងក្រោម

 

div message

២បង្កើត ajax.js

/*
*author: PRAK Sophy
*email: sophy.prak@gmail.com
*website: https://kooms.wordpress.com
*/
// រក្សាទុក  XMLHttpRequest object ក្នុង xmlHttp variable ពី function createXmlHttpRequestObject()
var xmlHttp = createXmlHttpRequestObject(); 

// function ចាប់យក XMLHttpRequest object ពី browser
function createXmlHttpRequestObject() 
{	
  // will store the reference to the XMLHttpRequest object
  var xmlHttp;
  // ប្រសិនបើយើងដំណើការលើ Internet Explorer
  if(window.ActiveXObject)
  {
    try
    {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) 
    {
      xmlHttp = false;
    }
  }
  //សំរាប់ Mozilla ឬ browsers ផ្សេងទៀត
  else
  {
    try 
    {
      xmlHttp = new XMLHttpRequest();
    }
    catch (e) 
    {
      xmlHttp = false;
    }
  }
  // return ការបង្កើត object ឬ បង្ហាញសារ error ប្រសិនបើយើងមិនអាចបង្កើត xmlHttp
  if (!xmlHttp)
 
    alert("មិនអាចបង្កើត XMLHttpRequest object.");
  else 
    return xmlHttp;
}

// បង្កើត asynchronous HTTP request ដោយប្រើ XMLHttpRequest object 
function process()
{
  //ដំណើរការប្រសិនបើ xmlHttp object មិនរវល់
  if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
  {
    // ចាប់យកឈ្មោះដែលបានបញ្ចួលដៅយអ្នកប្រើប្រាសពី form
    name = encodeURIComponent(document.getElementById("myName").value);
    // ប្រតិបត្តការ firstajax.php page ពី  server
    xmlHttp.open("GET", "firstajax.php?name=" + name, true);  
    // define the method to handle server responses
    xmlHttp.onreadystatechange = handleServerResponse;
    // make the server request
    xmlHttp.send(null);
  }
  else
    // ប្រសិនបើ connection ជាប់រវល់ វានឹងព្យាយាមម្តងទឿត បន្ទាប់ពី ១ វិនាទីក្រោយមក  
    setTimeout('process()', 1000);
}

// executed automatically when a message is received from the server
// ដំណើរការដោយស្វ័យប្រវត្ត ពេលដែលសាត្រូវបានបញ្ជួនពី Server
function handleServerResponse() 
{
  // ដំណើការ ប្រសិនបើ transaction ត្រូវបានបំពេញចប់
  if (xmlHttp.readyState == 4) 
  {
    // status of 200 indicates the transaction completed successfully
	//status = 200 មានន័យថា Transaction បានបញ្ចប់ដោយជោកជ័យ
    if (xmlHttp.status == 200) 
    {
	 //ចំលងចេញ XML ទទួលបានពី server
      xmlResponse = xmlHttp.responseXML;
      // បានជា document element (the root element) of the XML structure
      xmlDocumentElement = xmlResponse.documentElement;
      // get the text message, which is in the first child of
      // the the document element
      helloMessage = xmlDocumentElement.firstChild.data;
      // update the client display using the data received from the server
      document.getElementById("divMessage").innerHTML = 
                                            '<i>' + helloMessage + '</i>';
      // restart sequence
      setTimeout('process()', 1000);
    } 
    // a HTTP status different than 200 signals an error
    else 
    {
      alert("មានបញ្ហាកើតឡើងនៅពេលដែល access​ ទៅកាន់ server: " + xmlHttp.statusText);
    }
  }
}

៣ បង្កើត file firstajax.php
ជា PHP Script នៅផ្នែក Server-side ajax អាចដំណើការបាន ដោយពឹងផ្អែកទៅ ផាសា Server-Side។
ត្រូវបានហៅមកប្រើដោយកូដ javascript ក្នុង ajax.js នៅផ្នែក Client-Side ។

<?php
// we'll generate XML output
header('Content-Type: text/xml');
// generate XML header
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
// create the <response> element
echo '<response>';
 
// retrieve the user name
$name = $_GET['name'];
// generate output depending on the user name received from client
$userNames = array('KOOMS', 'SOPHY', 'AROCORE', '4KHMER', 'YODA');
if (in_array(strtoupper($name), $userNames))
  echo 'សូស្តី ' . htmlentities($name) . '!';
else if (trim($name) == '')
  echo 'អាចប្រាប់ខ្ញុំបានទេ តើអ្នកឈ្មោះអី?';
else
  echo htmlentities($name) . ', ខ្ញុំមិនស្គាល់អ្នកទេ';
// close the <response> element
echo '</response>';
?>

Source Code

Advertisements
Tagged with: , , ,

3 ចំលើយ

Subscribe to comments with RSS.

  1. Khmer iT said, on ខែ​កុម្ភៈ 1, 2009 at 12:25 ល្ងាច

    សូមជួយណែនាំផង

  2. សុភា said, on ខែ​កុម្ភៈ 3, 2009 at 8:07 ល្ងាច

    Ajax បង្កើតឡើងនៅឆ្នាំណា ដោយអ្នកណា? នេះជាសំនូរគ្រូម៉ោពីលីយុងសូរពេលខ្ញុំការពាសារណាឆ្នាំមុន ធ្វើអោយខ្ញុំបានត្រឹមតែញញឹម នឹង ឆ្លើយថាខ្ញុំអត់បានស្រាវជ្រាយប្រវត្តិដើមវាទេ សូមទោស 😀 ។

    • kooms said, on ខែ​កុម្ភៈ 4, 2009 at 1:38 ព្រឹក

      សំរាប់ខ្ញុំ ក៏មិនបានដឹងច្បាស់ដែរវាកើត ឡើងនៅពេលណានោះ គ្រាន់តែដឹងតាមរយះការ​ពិពណ៌នារបស់លោក Jesse James Garrett (2005-02-18) ​ “Ajax: A New Approach to Web Applications” និងតាម Wikipedia ផងដែរ


ឆ្លើយ​តប

Fill in your details below or click an icon to log in:

ឡូហ្កូ WordPress.com

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី WordPress.com របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

រូប Twitter

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Twitter របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

រូបថត Facebook

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Facebook របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

Google+ photo

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Google+ របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

កំពុង​ភ្ជាប់​ទៅ​កាន់ %s

%d bloggers like this: