shift

Ajax چیست؟ + نمونه کد

Ajax چیست؟ + نمونه کد

ایمان
دسته: تکنولوژی  تگ ها: Ajax چیست , آموزش Ajax , برنامه نویسی Ajax , کد راه اندازی Ajax , برنامه نویسی googlemap

 

ساخت برنامه های کاربردی تحت وب برای برنامه نویسان بسیار سرگرم کننده است. این برنامه های کاربردی به برنامه نویسان اجازه می دهد تا گرد یکدیگر جمع شوند و گره ای از مشکلات مشتریان خود باز کنند. گره ای که حتی ممکن بود خود مشتریان نیز از وجود آن اطلاعی نداشته باشند. مثلا اگر سیستم Blogger را در نظر بگیریم، قبل از اینکه این برنامه کاربردی ایجاد شود، خیلی ها حتی به وجود آن هم نیاز نداشتند. اما الان می بینند که بدون وجود آن کارشان بسیار دشوار است.

اما بسیاری از این برنامه های کاربردی کند و گاهی خسته کننده هستند. برخی مواقع سریع ترین آنها آنقدر کند هستند که  کاربر می تواند در حین کارکرد با آن چای خود را بنوشد و یا اگر وضعیت بدتر از این شد، به کلی سایت را ترک می کند. شما بر روی یک لینک کلیک می کنید. وب سایت شروع به پردازش اطلاعات می کند و منتظر صفحه ی بعد با تعدادی منو و عکس و غیره هستید تا بتوانید نتیجه کار را ببینید.

Ajax اینجاست تا وضعیت را تغییر دهد

Ajax و یا کامل تر Asynchronous JavaScript and XML نحوه ای از برنامه نویسی است تا شما را از شر گرفتن اطلاعات بوسیله رفتن به یک صفحه ی دیگر خلاص کند. وقتی کاربر یک فرم را تایید می کند، بعلت حجم کم انتقال اطلاعات، زمان بسیار کوتاهی طول می کشد تا نتیجه نمایش داده شود. آن هم بدون انتقال به صفحه ای دیگر! اگر باور کردنش برای شما مشکل است، سری به وب سایت Google Mapsبزنید و با حرکت در قسمت های مختلف نقشه، تغییرات آنی اطلاعات را مشاهده کنید. بدون اینکه صفحه Reload شود. این قدرت Ajax است.

Ajax چیست؟

در واقع Ajax تلفیقی است از:

  • استاندارد های XHTML و CSS
  • تعامل با صفحه بوسیله DOM
  • انتقال اطلاعات بوسیله XML و XSLT
  • بازیابی اطلاعات بطور غیرهمزمان بوسیله ی XMLHttpRequest
  • JavaScript تا همه ی این موارد را بهم وصل کند

در روش سنتی انتقال اطلاعات، انتقال اطلاعات بین کاربر و سرور بدین صورت انجام می گرفت:

  •  کاربر صفحه ی وب سایت را درخواست می کند
  • درخواست به سرور انتقال می شود و اطلاعات پردازش شده و به مرورگر کاربر ارسال می شود – در این حالت کاربر منتظر است
  • اطلاعات به کاربر نشان داده می شود

هر بار که کاربر بر روی لینکی کلیک می کند، فرآیند بالا اتفاق می افتد که در بسیاری از موارد کاربر منتظر می ماند.

غیر همزمانی

این یک اتفاق کلیدی است. در برنامه های تحت وب استاندارد، تعامل بین سرور و کاربر بصورت هم گام و همزمان صورت می پذیرد. اگر کاربر بر روی یک لینک کلیک کند، درخواست به سرور ارسال می شود و نتیجه به کاربر بازمی گردد.

بوسیله Ajax، کدهای JavaScript که عملیات های حیاتی از جمله Validation و Manipulation را انجام می دهند، هنگام باز شدن صفحه بطور کامل لود می شوند. و در صورت نیاز کاربر، اطلاعات درخواستی از طریق کد های جاوا انتقال داده می شوند.

Ajax یک تکنولوژی جدید نیست

Ajax راهی جدید برای نگاه کردن به یک تکنولوژی است که قبلا بصورت پخته و کامل وجود داشته است. اگر شما هم اکنون در حال نوشتن برنامه ای جدید هستید، چرا از Ajax استفاده نمی کنید؟ کاربران شما بسیار از شما ممنون خواهند شد. به علاوه اینکه نوشتن آن برای خود شما نیز بسیار جذاب خواهد بود.

نمونه کد ساده برای راه اندازی AJAX

کد زیر را در یک صفحه مثلا demo.html قرار دهید.

<html>
    <head>
    <title>Simple Ajax Example</title>
    <script language="Javascript">
    function postRequest(strURL) {
	var xmlHttp;
          if (window.XMLHttpRequest) { // Mozilla, Safari, ...
		 var xmlHttp = new XMLHttpRequest();
	    }else if (window.ActiveXObject) { // IE
		var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	      }
	    xmlHttp.open('POST', strURL, true);
	    xmlHttp.setRequestHeader
              ('Content-Type', 'application/x-www-form-urlencoded');
		xmlHttp.onreadystatechange = function() {
	if (xmlHttp.readyState == 4) {
	       updatepage(xmlHttp.responseText);
	      }
	   }
	 xmlHttp.send(strURL);
        }
     function updatepage(str){
	document.getElementById("result").innerHTML = 
            "<font color='red' size='5'>" + str + "</font>";;
        }
   function SayHello(){
	var usr=window.document.f1.username.value;
	var rnd = Math.random();
	var url="sayhello.php?id="+rnd +"&usr="+usr;
	postRequest(url);
        }
  </script>
  </head>
  <body>
   <h1 align="center"><font color="#000080">Simple Ajax Example</font></h1>
   <p  align="center"><font color="#000080">Enter your name and then press 
   "Say Hello Button"</font></p>
 <form name="f1">
       <p align="center"><font color="#000080"> 
		Enter your name: <input type="text" name="username" id="username">
		<input value="Say Hello" type="button" 
       onclick='JavaScript:SayHello()' name="showdate"></font></p>
       <div id="result" align="center"></div>
     </form>
 <div id=result></div>
</body>
</html>

سپس صفحه ای با نام sayhello.php بسازید و کد های زیر را در آن قرار دهید.

<?
$usr=$_GET["usr"];
?>
<p>Welcome <?=$usr?>!</p>
<p>Request received on: 
<?

print date("l M dS, Y, H:i:s");
?>

سپس صفحه demo.html را اجرا کنید و نتیجه را ببینید. به یاد داشته باشید که در این مثال، سرور شما باید توانایی تجزیه و تحلیل کدهای PHP  را داشته باشد. نمونه کد قابل اجرا را در اینجا ببینید (Demo).

آیا شما نیز از Ajax استفاده می کنید؟ تجربه شما در این زمینه چیست؟

نظر خود را بنویسید...
ارسال نظر
لغو