AJAX буюу Asynchronous JavaScript and XML. Үүний талаар тэгдэг ингэдэг, ийм тийм давуу эсвэл сул талтай гэж дэмий юм бичээд яах вэ. Харин хэрхэн хэрэгжүүлэхийг жишээ тайлбартайгаар бас практикийн ямар асуудлууд гарч болохыг өөрийн туршлагадаа дулдуйдан бичье. Өөрөөр хэлбэл AJAX-ийг тодорхой хэмжээнд судалж суурь мэдлэгтэй болсон ч яг гардаж ашиглах дээр асуудал гараад бичсэн AJAX нь ажиллахгүй байгаа хүмүүст зориулж бичье.

Надтай тулгарсан асуудлууд буюу анхаарах хэдэн зүйл гарсныг эхлээд тэмдэглэе.

  • Яг номоор нь бичвэл AJAX нь локалхост ч бай сервер ч бай хаана ч ажиллаж байна.
  • Doctype-аа xml дэмжихээр зааж өгнө. HTML5-ын хувьд ямар ч асуудал алга.
  • Apache сервер дээр ажиллаж байгаа бол URL rewrite-тай нэлээд зөрчилдөж байна.

Эдгээрээс гадна html элементүүдийн id, дамжуулж байгаа параметрийн нэр ба хандаж байгаа PHP файлын зам зэрэгтэй хянамгай хандах шаардлагатай. Тэгэхгүй бол алдаагаа олж барих нь харьцангуй төвөгтэй ажээ. За ингээд GET ба POST аль алинаар нь өгөгдөл дамжуулах боломжтойгоор бичсэн жишээ рүүгээ оръё. Бүх файлуудыг веб сайтын үндсэн хавтас дотор байрлуулаад html хуудсыг index.php файлд хадгаллаа.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Ajax example</title>
 <script type="text/javascript" src="ajax.js"></script>
</head>
<body>
 <div style="width: 600px; margin-left: auto; margin-right: auto; margin-top: 150px;">
 <h3>Ajax example</h3>
 Select type of request
 <select id="method">
 <option value="POST">POST</option>
 <option value="GET">GET</option>
 </select>
 My sites
 <select id="website" onchange="Ajax()">
 <option value="empty">Please select..</option>
 <option value="scribble">scribble.galaa.mn</option>
 <option value="statistics">statistics.galaa.mn</option>
 <option value="jextensions">jextensions.galaa.mn</option>
 </select>
 <div id="response" style="padding-top: 15px;"></div>
 </div>
</body>
</html>

Харин Javascript-ийг нь ajax.js нэртэй файлд бичлээ.

var xmlHttp;

 function Ajax()
{
 xmlHttp = GetXmlHttpObject();
 if(xmlHttp == null){
 alert ('Your browser does not support AJAX!');
 return;
 }
 var url = 'ajax.php';
 var parameter = 'parameter='+document.getElementById('website').value;
 xmlHttp.onreadystatechange = Response;
 if(document.getElementById('method').value == 'POST'){
 xmlHttp.open('POST', url, true);
 xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 xmlHttp.send(parameter);
 }else{
 url=url+"?"+parameter;
 xmlHttp.open('GET', url, true);
 xmlHttp.send(null);
 }
}

function GetXmlHttpObject()
{
 var xmlHttp = null;
 try{
 // Firefox, Opera 8.0+, Safari, IE7.0
 xmlHttp = new XMLHttpRequest();
 }
 catch(e){
 // Internet Explorer
 try{
 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE 6.0+ bol
 }
 catch(e){
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 5.5+ bol
 }
 }
 return xmlHttp;
}

function Response()
{
 var wait = 'Please wait..';
 switch(xmlHttp.readyState){
 case 0: // request not initialized
 document.getElementById("response").innerHTML = wait;
 break;
 case 1: // server connection established
 document.getElementById("response").innerHTML = wait;
 break;
 case 2: // request received
 document.getElementById("response").innerHTML = wait;
 break;
 case 3: // processing request
 document.getElementById("response").innerHTML = wait;
 break;
 case 4: // request finished and response is ready
 document.getElementById("response").innerHTML = xmlHttp.responseText;
 break;
 default:
 break;
 }
}

Энд нэг л параметер дамжуулахаар бичсэн ба хэрэв олон параметр дамжуулах бол & тэмдгээр тусгаарлаж жишээлбэл

var parameter = 'firstparameter='+firstparametervalue+'&secondparameter='+secondparametervalue;

маягаар бичнэ.

Одоо AJAX хүсэлтийн хариуг боловсруулах ajax.php файлын агуулга:

<?php

if(isset($_POST['parameter'])){
 $parameter = $_POST['parameter'];
 }elseif(isset($_GET['parameter'])){
 $parameter = $_GET['parameter'];
 }else{
 $parameter = '';
 }

switch($parameter){
 case 'scribble':
 $response = 'My blog around only my distinctive idea, hobby, information technology and others.';
 break;
 case 'statistics':
 $response = 'E-lessons, instructions and professional advise, service, cooperation around Mathematical Statistics.';
 break;
 case 'jextensions':
 $response = 'Extensions for Joomla! open source content management system.';
 break;
 default:
 $response = 'Request is empty!';
 }

echo $response;

?>

Ямартаа ч ингээд биччихэд AJAX асуудалгүй ажиллана. Гэвч ajax.php файлыг дуудна гэх мэтээр сервер дээрх апликэшний бүтцийг илчлэх нь тохиромжгүй болов уу. Харин үүний оронд үндсэн index.php файл руугаа хандуулаад тэндээ шалгаад тохирох файлыг нь дууддагаар бичвэл оновчтой биз ээ. Тодруулбал

if(isset($_POST('parameter')))
{
include('ajax.php');
exit;
}

байдалтай кодыг index.php файлынхаа эхэнд нэмж бичнэ гэсэн үг. Энэ тохиолдолд JavaScript дээрээ

var url = 'index.php';

ийм өөрчлөлтийг оруулахаа мартуузай.

Өөр бас нэг зүйл гэвэл if(xmlHttp.status == 404){} буюу 404 алдааны үед ажиллах скриптийг Javascript-дээ нэмж өгөхөд ч илүүдэх юу байх вэ. Энэ нь манай жишээний тохиолдолд Response функцэд нэмэгдэнэ шүү.

За ингээд л боллоо. Програмчлалын AJAX технологийг эзэмшихэд чинь амжилт хүсье.