آموزش Ajax

[سیده آمین ارمان]

آموزش Ajax
Ajax مخفف عبارت Asynchronous Java and Xml می باشد و به معنی ترکیب نامتقارن جاوا اسکریپت و xml است . ای جکس یا ای ژاکس یک علم مربوط به ظاهر صفحات وب می باشد و به برنامه نویس این امکان را می دهد تا برنامه های وب را به صورت جذاب تری دربیاورد . با تسلط بر این فناوری و سایر زبان های برنامه نویسی می توانید در زمره یکی از بهترین شرکت های طراحی سایت قرار بگیرید .


ازکارهایی که Ajax انجام می دهد بالابردن سرعت بروز رسانی صفحات وب می باشد به عنوان مثال برای بازدید از یک صفحه وب با کلیک بر روی هر لینک یا دکمه ای برای تغییر محتوای صفحه و یا ارسال یک فیلد به سرور باید تمام صفحه بروز شود و این به معنی درخواست تمام عکسها , لوگوها و کدها از سرور می باشد اما شما با استفاده از این تکنیک فقط قسمتهای مورد نیاز را بروز میکنید و برای انجام هر عملیاتی نیاز به بروز کردن کل صفحه نیست این کار توسط فناوری ajax انجام میشود .
به عبارتی به‌دليل عدم نياز به بارگذاري مجدد کل يک صفحه وب، مقدار داده‌هايي که لازم است براي تکميل يک Interaction ميان کاربر و سايت مبادله شود، به شدت کاهش مي‌يابد و اين به معني افزايش محسوس سرعت نرم‌افزارهاي تحت وب، سهولت به‌کارگيري اينترفيس‌هاي مبتني بر اي‌جکس و کاربرپسندترشدن آن‌ها مي‌شود . سایت هایی مانند یاهو،گوگل با این علم نیز طراحی شده اند .

 

[سیده آمین ارمان]

Ajax چیست ؟
Ajax مخفف عبارت Asynchronous Java and Xml می باشد و به معنی ترکیب نامتقارن جاوا اسکریپت و xml است . ای جکس یا ای ژاکس یک علم مربوط به ظاهر صفحات وب می باشد و به برنامه نویس این امکان را می دهد تا در هنگام طراحی سایت ، برنامه های وب را به صورت جذاب تری دربیاورد .


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

 

[سیده آمین ارمان]

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


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

 

[سیده آمین ارمان]

ساختار Ajax
در این بخش ازمقالات طراحی سایت در قسمت آموزش Ajax می خواهیم ساختار Ajax را توضیح دهیم.
همانطور که از معنی اسم ای جکس پیداست این فناوری از جاوا اسکریپت و xml تشکیل شده است . برای راحتی درک و ساختار ای جکس ابتدا مثالی را بیان می کنیم.در این مثال از تگ div و دکمه ی فرمان button در یک صفه اچ تی ام ال استفاده می کنیم و می خواهیم پس از کلیک کاربر بر روی دکمه ی فرمان متن جدید آن از سرور دریافت شده و به روز رسانی شود. به مثال توجه نمایید:

< html >
< head >
< script type = " text/javascript " >
function loadXMLDoc ( )
{
.... کد ها و دستورات Ajax در اینجا قرار می گیرد ...
}
< /script >
< /head >
< body >
< div id="myDiv" >
متن این قسمت را با Ajax تغییر دهید
< /div >
< button type="button" onclick=" loadXMLDoc() " > Change Content < /button >
< /body >
< /html >

با کد بالا پس از کلیک سرور درخواست را دریافت می کند و پس از پردازش آن را اجرا خواهد کردکد تابع ( ) loadXMLDoc در جدول زیر قرار داده شده است .

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari کد برای مرورگرهای جدید
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5 کد برای مرورگرهای قدیمی تر
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}

 

[سیده آمین ارمان]

ارسال و دریافت اطلاعات با متد get و post در آژاکس (ajax)
در این قسمت از آموزش ajax در مقالات طراحی سایت می خواهیم نحوه ی ارسال و دریافت اطلاعات با متد get و post در آژاکس را برای شما بیان می کنیم .
با توجه به این نکته که شیوه ی نگارش یک درخواست برای دریافت اطلاعات در ajax از دستور زیر استفاده می شود به توضیح این دستور نیز می پردازیم .

xmlhttp.open("GET","textfile.php",true);
xmlhttp.send();

پارامترهای xmlhttp.open سه مورد هستند: متد، فایل و غيرهمزمانی (asynchronously) که با دو مقدار true یا false مشخص می شود . غيرهمزمانی (asynchronously) به معنی این است که با true بودن این قابلیت، درخواست آژاکسی، وقفه ای در اجرای ادامه کد در صفحه ایجاد نمی کند (ادامه کد بدون توجه به دریافت یا عدم دریافت پاسخ درخواست آژاکسی از سرور، اجرا می شود) . xmlhttp.send برای متد get مقادیری ندارد، اما برای متد post مقادیر رشته ای (string) دارد . از آنجاییکه متد get سریعتر و ساده تر می باشد معمولا از این متد استفاده می شود منتها در بعضی موارد از متد post استفاده می شود که این موارد عبارتند از:
√ فایل هدف نیاز به، به روز رسانی پی در پی (بدون کَش شدن) داشته باشد یا اطلاعات در پایگاه داده ذخیره شوند.
√ مقادیر زیادی را بخواهیم ارسال کنیم.زیرا post محدودیت حجمی ندارد.
√امنیت post بالا می باشد و در مواردی که با اطلاعات کاربران نیاز هست از این متد استفاده می شود .
در مثال زیر ما اطلاعاتی فرضی را توسط متد get برای یک فایل php با نام ajax-get.php ارسال می کنیم و پاسخ را در بلاکی با آی دی divid خروجی می دهیم:

<?php
$site = $_GET['site'];
$domain = $_GET['domain'];
echo "نام سایت شما: $site <br />";
echo "دامنه شما: $domain <br />";
?>

همچنین فایل html حاوی درخواست و تنظیمات آژاکسی را به صورت زیر نمایش می دهیم .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

Please, ورود or عضویت to view URLs content!

">
<html xmlns="

Please, ورود or عضویت to view URLs content!

">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ارسال و دریافت اطلاعات با متد get</title>
<!--

Please, ورود or عضویت to view URLs content!

-->
<script type="text/javascript">
//<![CDATA[
function loadFile()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divid").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get-post.php?site=webgoo&domain=webgoo.ir",true);
xmlhttp.send();
}
//]]>
</script>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<button type="button" onclick="loadFile()">ارسال درخواست آژاکسی</button>
<div id="divid"></div>
</body>
</html>

با توجه به اینکه متد post با get شباهت زیادی دارد و با این تفاوت که در این درخواست مانند فرم های عادی html مقادیر تحت عنوان header به مرورگر ارسال می شود و از طرفی xmlhttp.send دارای مقادیر رشته ای است .

<?php
$site = $_POST['site'];
$domain = $_POST['domain'];
echo "نام سایت شما: $site <br />";
echo "دامنه شما: $domain <br />";
echo "متد استفاده شده : Post <br />";
?>

کد html و تنظیمات آژاکسی را به صورت دستور زیر نمایش می دهند .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

Please, ورود or عضویت to view URLs content!

">
<html xmlns="

Please, ورود or عضویت to view URLs content!

">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ارسال و دریافت اطلاعات با متد post</title>
<!--

Please, ورود or عضویت to view URLs content!

-->
<script type="text/javascript">
//<![CDATA[
function loadFile()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divid").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","ajax-post.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("site=webgoo&domain=webgoo.ir");
}
//]]>
</script>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<button type="button" onclick="loadFile()">ارسال درخواست آژاکسی</button>
<div id="divid"></div>
</body>
</html>

در دستور بالا xmlhttp.setRequestHeader برای متد post مقادیر Header را به مرورگر ارسال می کند همچنین xmlhttp.send با مقادیر خود پارامترها را به فایل ajax-post.php ارسال می کند، این پارامترها می توانند از یک فرم html نیز دریافت شوند .

 

[سیده آمین ارمان]

نمایش پیام و تصویر در حال بارگذاری (loading) در آژاکس (ajax)
دراین قسمت از آموزش Ajax در بخش مقالات طراحی سایت می خواهیم نحوه ی نمایش پیام و تصویر در حال بارگذاری در آژاکس را برای شما بیان کنیم .
در یک فایل آژاکس پس از ارسال دستور و پردازش آن نتیجه ی درخواست توسط مرورگر قابل مشاهده می باشد زمانیکه این دستورات در حال اجرا می باشد و دستور به پایان می رسد xmlhttp.readystate برابر 4 خواهد شد و اعداد 1 تا 3 نشان دهنده ی درحال پردازش هستند .لذا با کمی دقت می توان از آن در تابعی جهت نمایش یک پیام در حال پردازش یا loading استفاده کرد، بخش اصلی این تابع به صورت زیر خواهد بود .

if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
document.getElementById(div).innerHTML=loadingmessage;
}

کد بالا که یک شرط if در جاوا اسکریپت است، به طور ساده یعنی اگر xmlHttp.readyState بزرگتر از صفر و کوچکتر از 4 باشد (یعنی هنوز درخواست کامل نشده)، عنصری که آی دی آن متغیر div است را انتخاب و مقدار متغیر loadingmessage را با دستور innerHTML به آن آی دی بدهد . به همین خاطر پس از ارسال درخواست پیامی با عنوان اندکی صبر کنید تا پردازش شود روبرو می شویم . در کد زیر می خواهیم درخواست یک فایل php کنیم و پاسخ را در یک بلاک div خروجی داده ایم .

<?php
$code = rand(10000,99999);
echo $code;
?>

دستور زیر فایل ajax-loading-message.html را با تنظیمات و کد آژاکس نشان می دهد :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

Please, ورود or عضویت to view URLs content!

">
<html xmlns="

Please, ورود or عضویت to view URLs content!

">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | نمایش پیام در حال پردازش به وسیله آژاکس</title>
<!--

Please, ورود or عضویت to view URLs content!

-->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
direction:rtl;
font-size:12px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function Ajaxrequest(){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
catch (e){
try{
// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("مرورگر شما از آژاکس پشتیبانی نمی کند!");
return false;
}
}
}
}
var div = 'code';
var loadingmessage = '<img src="loading.gif" alt="loading" height="16" width="16" /> کمی صبر کنید...';
var url = 'ajax-loading-message.php';
function changecode(){
var xmlHttp = Ajaxrequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
document.getElementById(div).innerHTML=loadingmessage;
}
if (xmlHttp.readyState == 4) {
document.getElementById(div).innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("POST", url, true);
xmlHttp.send();
}
//]]>
</script>
</head>
<body>
<a href="#" onclick="changecode();">تعویض کد</a><br /><br />
<div class="code" id="code">کد جدید اینجا نشان داده خواهد شد!</div>
</body>
</html>

در دستور بالا با استفاده از onclick تابع changecode را فرا می خوانیم و خود این تابع ajaxrequest را فراخوانی می کند . onreadystatechange با تغییر مقادیر readystat اجرا می شود همچنین متغیر های div، loadingmessage و url متناسب با آدرس فایل و آی دی بلاک div ما، مقدار دهی شده اند . در کد php از تابع rand برای ایجاد کدهای اتفاقی استفاده کرده ایم .

 

[سیده آمین ارمان]

نمایش افکت fade in با آژاکس (ajax)
در این قسمت از آموزش Ajax می خواهیم در طراحی سایت نحوه ی نمایش افکت fade in با آژاکس را برای شما توضیح دهیم به عبارتی می خواهیم با استفاده از توانایی کدنویسی با تکنیکی دیگر کاملتر کنیم و پس از دریافت اطلاعات درخواست آژاکسی از سرور، آن را با یک افکت fade in یا همان ظاهر شدن محتوا از حالت بی رنگ به صورت واضح، نشان دهیم .

برای اینکه بخواهیم افکت fade in را با ترکیب جاوا اسکریپت و سی اس اس انجام دهیم ابتدا باسد افکت fade in را به بلاک div خود نسبت دهیم و آن را در یک اتابع تعریف کرد برای این کار از خواص opacity در css استفاده می کنیم به دستور زیر توجه نمایید :

<script type="text/javascript">
//<![CDATA[
var element = document.getElementById('code');
var duration = 1000; /* 1000 میلی ثانیه برابر با 1 ثانیه */
var steps = 20; /* میزان فِرِم های انیمیشن از حالت شفافیت کامل تا وضوح کامل */
function setopacity(level) {
element.style.opacity = level;
element.style.mozopacity = level;
element.style.khtmlopacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(){
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setopacity(" + i + ")", i * duration);
}
}
//]]>
</script>

توجه داشته باشید که که حتما این کد را در بین تگ body و بعد از بلاک div درج نمائید . در دستور بالا در تابع setopacity مقادیر شفافیت را در یک ثانیه (1000 میلی ثانیه) در بیست فِرم به بلاک div نسبت می دهیم همچنین در یک حلقه for در تابع fadeIn، در 20 گام، افکت را تنظیم و در قسمت setTimeout از setopacity برای اعمال افکت استفاده می کنیم ومقادیر متفاوت style.opacity، style.mozopacity و style.khtmlopacity برای سازگاری با مرورگرهای مختلف است . در فایل ajax-loading-fade.php می توانید با تابع rand در php اعداد اتفاقی تولید و آن ها را جایگزین متغیر code می کند . به دستور زیر توجه کنید :

<?php
$code = rand(10000,99999);
echo "کد انتخابی شما عدد ".$code." است!";
?>

دستور بالا را به نام ajax-loading-fade.php در یک دایرکتوری ایجاد کنید . فایل Ajax-loading-fade.html حاوی کد و تنظیمات آژاکسی می باشد و درخواست را به سرور (ajax-loading-fade.php) ارسال و پاسخ را دریافت می کند . به دستور زیر توجه کنید :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

Please, ورود or عضویت to view URLs content!

">
<html xmlns="

Please, ورود or عضویت to view URLs content!

">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | نمایش پیام در حال پردازش و نمایش افکت در آژاکس</title>
<!--

Please, ورود or عضویت to view URLs content!

-->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
direction:rtl;
font-size:12px;
}
#code{
background-color:#666;
color:#FFF;
width:190px;
padding:4px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function Ajaxrequest(){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
catch (e){
try{
// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("مرورگر شما از آژاکس پشتیبانی نمی کند!");
return false;
}
}
}
}
var div = 'code';
var message = 'message';
var loadingmessage = '<img src="loading.gif" alt="loading" height="16" width="16" /> کمی صبر کنید...';
var url = 'ajax-loading-fade.php';
function changecode(){
var xmlHttp = Ajaxrequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
document.getElementById(message).innerHTML=loadingmessage;
}
if (xmlHttp.readyState == 4) {
document.getElementById(div).innerHTML=xmlHttp.responseText;
fadeIn()
document.getElementById(message).innerHTML='';
}
}
xmlHttp.open("POST", url, true);
xmlHttp.send();
}
//]]>
</script>
</head>
<body>
<a href="#" onclick="changecode();">تعویض کد</a><br /><br />
<div id="message"></div><br />
<div class="code" id="code">کد جدید اینجا نشان داده خواهد شد!</div>
<script type="text/javascript">
//<![CDATA[
var element = document.getElementById('code');
var duration = 1000; /* 1000 میلی ثانیه برابر با 1 ثانیه */
var steps = 20; /* میزان فِرِم های انیمیشن از حالت شفافیت کامل تا وضوح کامل */
function setopacity(level) {
element.style.opacity = level;
element.style.mozopacity = level;
element.style.khtmlopacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(){
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setopacity(" + i + ")", i * duration);
}
}
//]]>
</script>
</body>
</html>

در دستور بالا کدجاوا اسکریپتی برای ایجاد افکت fade in به انتهای صفحه اضافه شده است . برای فراخوانی تابع افکت، پس از true شدن xmlHttp.readyState == 4، با قرار دادن ()fadeIn این کار را انجام داده ایم . برای نمایش پیام در حال پردازش و نتیجه درخواست آژاکسی، از دو بلاک متفاوت (با آی دی message و code) استفاده کرده ایم. عناوین بلاک ها و توابع انتخابی و سلیقه ای است، می توانید آنها را متناسب با سلیقه خود تغییر دهید . برای کسب اطلاعات بیشتر، مقالات طراحی سایت را دنبال کنید.

 

[سیده آمین ارمان]

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

از آنجاییکه برای ارسال درخواست یک فایل آژاکس باید از شی xmlhttprequest استفاده کنیم تا دستور به سرور منتقل شود ، معمولا از دو روش try و catch یا XMLHttpRequest مستقیم برای این منظور استفاده می کنند که در عمل هر دو شیوه کارکرد یکسان دارند . اگر می خواهید فایل آژاکسی خود را در تابع جاوا اسکریپتی آماده کنید باید تگ های script را حذف کنید . پس از آماده کردت فایل آژاکس نیازمند توابعی هستیم که اطلاعات ارسالی و دریافتی را مدیریت کند برای ان کار از دستور زیر کمک می گیریم :

<script type="text/javascript">
//نمایش اطلاعات در مرورگر
function Display(content, showresult){
showresult.innerHTML = content;
}
//دریافت اطلاعات فایل متنی
function Retrieve(url){
var AjaxCaching = false;
var showresult = document.getElementById("showresult");
var Request = CreateRequest();

Request.onreadystatechange = function(){
if(Request.readyState == 4){
if(Request.status == 200){
var content = Request.responseText;
Display(content, showresult);
}
}
};

if(AjaxCaching == false){
url = url + "?nocache=" + Math.random();
}
Request.open("GET", url, true);
Request.send(null);
}
//شروع درخواست
function SubmitForm(){
var Request = CreateRequest();
var script = "ajax-copy-get.php";
var filename = "ajax-copy-get.txt";
Request.onreadystatechange = function(){
if(Request.readyState == 4){
Retrieve(filename);
}
};
Request.open("POST", script, true);
Request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
Request.send(null);
}
</script>

در توضیح دستور بالا باید گفت :تابع Display، Retrieve و SubmitForm که هر کدام مربوط به بخش خاصی از فرآیند ارسال و دریافت اطلاعات با آژاکس هستند .
از تابع Submitform برای فراخوانی درخواست آژاکس در createrequest استفاده می شود همچنین از تابع Retrieve برای نمایش محتویات فایل با فرمت txt استفاده می شود لازم به ذکر است بدانید کههنگامی که حالت آماده یا Request.readyState برابر 4 می شود، تابع Retrieve فراخوانی می شود .

از تابع AjaxCathing نیز در تابع retrieve نیز برای جلوگیری از ذخیره یا به اصطلاح کش شدن استفاده می شود که اگر مقدار درست باشد عمل کش صورت می گیرد و اگر غلط باشد کش نمی شود . همچنین تابع Display تنها وظیفه دارد که با یک دستور innerHTML در جاوا اسکریپت، محتویات را به آی دی بلاک div مقصد بفرستد (در اینجا showresult) .

وقتی Ready state برابر 4 باشد یعنی درخواست فایل آژاکس کامل شده است و یعنی صفحه درخواستی، مشکلی ندارد . عدد 200 به معنی بی نقص بودن می باشد و هنگامیکه خطای 404 روی داد یعنی صفحه ی موردنظر پیدا نشده و خطای 500 یعنی مشکل در داخل سرور است . این اعداد باید به طور استاندارد به صورت header از صفحه فراخوانی شده ، دریافت شوند . مقادیر متغیر content در واقع محتوایی است که از فایل txt خوانده می شود و در Request.responseText که قسمتی از فرآیند درخواست مبتنی بر آژاکس است وجود دارد .

پس از ذخیره کردن دستور بالا با نام ajax-copy-get.js فایل دیگری با نام ajax-copy-get.txt باید در فولدر مورد نظر وجود داشته باشد تا بتوان اطلاعات از آن دریافت کرد .

از آنجاییکه آژاکس به تنهایی کارایی زیادی ندارد از php در کنار Ajax استفاده می کنیم . دستور زیر محتویات فایل file-get-contents می خواند و در خود ذخیره می کند ، در قسمت fopen ، فایل جدیدی با متد w ایجاد کرده و محتویات تابع file_get_contents را که به متغیر content تعلق گرفته، درون آن کپی می کند .

<?php
// فایل بر روی سرور دیگر یا همان سرور
$url = "ajax-copy-get.txt";
// گرفتن محتویات فایل
$content = file_get_contents($url);
// کپی محتویات فایل داخل فایلی دیگر
$nfile = fopen("ajax-copy-get2.txt", "w");
if($nfile != false){
fwrite($nfile, $content);
fclose($nfile);
}
?>

پس از وارد کردن این دستورات فایل را با نام ajax-copy-get.php ذخیره کنید .حال همه چیز آماده است که توابع را فراخوانی کنیم . با توجه به اینکه آژاکس مبتنی بر جاوا اسکریپت می باشد و تنها ترکیبی نوین از دو زبان کهن جاوا اسکریپت و xml است فراخوانی آنها نیز می تواند به صورت کنترلی انجام گیرد . به طور مثال رویداد onclick یا onload و...، در اینجا ما از یک دکمه در فرم HTML استفاده کرده ایم که مبتنی بر onclick است .

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | ارسال درخواست آژاکسی و کپی فایل</title>
<!--

Please, ورود or عضویت to view URLs content!

-->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
<script src="ajax.js" type="text/javascript"></script>
<script src="ajax-copy-get.js" type="text/javascript"></script>
</head>
<body>
<form action="" method="post" name="ajax">
<input type="button" id="submit" name="button" onclick="SubmitForm()" value="ارسال درخواست آژاکسی">
</form>
<div id="showresult">
نتیجه اینجا نشان داده می شود!
</div>
</body>
</html>

حال کافی است فایل ها را در لوکال هاست یا سرور ایجاد و این صفحه را (با نام دلخواه و فرمت html) فراخوانی کنید

 

[سیده آمین ارمان]

ساخت یک شی XMLHttpRequest
در این قسمت از مقالات طراحی سایت در بخش آموزش Ajax می خواهیم ساخت یک شی XMLHttpRequest را برای شما شرح دهیم .
xmlhttprequest از اساسی ترین شی در ajax می باشد زیرا تقریبا تمام عملیات بر دوش آن است . شی xmlhttprequest اطلاعات را بین مرورگر و سرور دریافت و ارسال می کند و مانع لود شدن مجدد صفحه در هنگام بروز تغییر در صفحه می شود همچنین این شی امکان انجام تغییرات در بخش های مختلف یک صفحه و تبادل اطلاعات با سرور را بدون اینکه صفحه Refresh شود را فراهم نموده است . لازم به ذکر است که این شی در تمام مرورگرهای مطرح قابل اجرا می باشد . دستور زیر شکل کلی شی xmlhttprequest را نشان می دهد .

variable = new XMLHttpRequest ( ) ;
* variable : یک متغیر با نام دلخواه است

همچنین این شی در مرورگرهای قدیمی IE 5 , IE 6 و برای سازگاری با آنها به صورت زیر است :

variable = new ActiveXObject ( " Microsoft.XMLHTTP " ) ;

حال می خواهیم در زیر یک مثال از شی xmlhttprequest را برای شما بیان کنیم . در مثال زیر شی XMLHttpRequest ساخته شده در متغیر xmlhttp ذخیره می شود . پس از تعریف این متغیر ، از آن برای کار با Ajax در سطح برنامه استفاده می شود . در مقالات آتی در طراحی سایت اطلاعات تکمیلی بیشتری را در اختیار شما قرار خواهیم داد.

var xmlhttp;
if ( window.XMLHttpRequest )
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest () ;
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject (" Microsoft.XMLHTTP ") ;
}

 

[سیده آمین ارمان]

ارسال درخواست به سرور با شی XMLHttpRequest
در این قسمت از آموزش Ajax به معرفی ارسال درخواست به سرور با شی XMLHttpRequest می پردازیم . این درخواست اطلاعات لازم را به سرور ارسال کرده و یک فایل که حاوی اسکریپت ، اطلاعات و یا دستور لازم برای ایجاد تغییر در صفحه است را بر روی سرور باز می کند . در ادامه در این بخش از مقالات طراحی سایت ، اطلاعات بیشتری را در اختیار شما قرار می دهیم با ما همراه باشید.
سرور پس از باز کردن فایل درخواستی ، آن را پردازش کرده و پاسخ لازم را به کامپیوتر کاربر ارسال می کند .
برای انجام این عملیات از 2 متد ( ) send و ( ) open شی XMLHttpRequest استفاده می شود . با متد ( ) open ابتدا درخواست ساخته شده و سپس با متد ( ) send ارسال می شود .
شکل کلی ارسال یک درخواست به سرور به صورت زیر است :

xmlhttp.open( metohd , url , async) ;
xmlhttp.send ( " text " ) ;

مثال :

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send( );

این متد درخواست را ایجاد کرده ودارای سه پارامتر اصلی زیر است . به وسیله این پارامترها متد نحوه ارسال اطلاعات ، آدرس فایلی که بر روی سرور باید باز شود و اینکه آیا درخواست به صورت asynchronous یا synchronous باشد ، تعیین می شود .

method تعیین کننده نحوه ارسال اطلاعات به سرور توسط شی XMLHttpRequest است . دو روش برای این منظور وجود دارد : GET یا POST
متد GET سریعتر و ساده تر از متد POST است . در متد GET اطلاعات ارسالی به سرور به ادامه نام فایل درخواستی ( URL ) اضافه می شوند ، اما در متد POST اطلاعات به صورت مخفی و پشت پرده به سرور منتقل می شوند .
معمولا از متد GET برای ارسال اطلاعات استفاده می شود . اما در موارد زیر باید از متد POST استفاده کنید :
هنگامی که نمی خواهید اطلاعات به صورت Cashed باشند . یعنی اطلاعات درون حافظه سرور باقی مانده و ممکن است در درخواست های بعدی از اطلاعات تکراری استفاده شود . برای مثال در عملیات update یک فایل و یا ارسال و دریافت اطلاعات از پایگاه داده از متد Post استفاده کنید .
حجم اطلاعات ارسالی زیاد باشد . متد GET در حجم اطلاعات ارسالی بسیار محدود بوده و در حجم های اطلاعات بالا باید از متد POST استفاده نمایید .
هنگامی که می خواهید اطلاعات حساسی مثل رمز عبور را منتقل کنید ، باید از متد POST استفاده شود . زیرا در متد GET اطلاعات ارسالی به انتهای نام فایل درخواست شده اضافه شده و به همین دلیل قابل رویت هستند . اما در متد POST اطلاعات به صورت مخفی و پشت پرده منتقل می شوند .

مثال ارسال درخواست با متد GET :

مثال 1 :xmlhttp.open( "GET" , "ajax_info.txt" , true ) ;
ارسال با متد GET : xmlhttp.send( );

2. مثال ارسال درخواست به سرور با متد GET و فرستادن اطلاعات مورد نظر با اضافه کردن چند مقدار به ادامه نام فایل درخواستی :

مثال 2 : xmlhttp.open( "GET" , "demo_get2.asp?Name=Omid&Family=Rezaee" , true) ;
ارسال اطلاعات با متد GET : xmlhttp.send( );

3. مثال ارسال درخواست به سرور با متد POST :

مثال 3 : xmlhttp.open( "POST" , "demo_post.asp" , true ) ;
ارسال درخواست با متد POST : xmlhttp.send( );

4. مثال ارسال درخواست به سرور با متد POST و انتقال اطلاعات مورد نظر با آن:

اگر هنگام استفاده از متد POST بخواهید ، اطلاعات مورد نظرتان را نیز ارسال کنید ، باید یک HTTP header را به وسیله متد( ) setRequestHeader به متد خود اضافه کنید . سپس اطلاعات مورد نظر را با متد ( ) send به سرور ارسال کنید . کد زیر روش این کار را نمایش می دهد:

مثال 4 : xmlhttp.open( "POST" , "ajax_test.asp" , true ) ;
ارسال درخواست و اطلاعات با : xmlhttp.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded" ) ;
متد POST : xmlhttp.send( "Name=Omid&Family=Rezaee" ) ;

پارامتر url در متد ( ) open ، در هنگام ارسال درخواست Ajax به سرور ، آدرس یک فایل بر روی سرور را تعیین می کند .
سرور در هنگام دریافت درخواست XMLHttpRequest ، فایلی که آدرس آن را با پارامتر url تعیین کرده اید ، باز کرده و بسته به نوع آن ، آن را پرادزش می کند . این فایل می تواند هر نوع فایلی باشد مثلا یک فایل ساده متنی باشد که حاوی مقداری اطلاعات است . همچنین می تواند یک فایل اسکریپتی مثل java script ، ASP.Net و یا PHP باشد ، که کدهای خاصی را اجرا می کند .
سرور پس از اجرای دستورات موجود در فایل مقصد ، پاسخ لازم را تولید کرده و به کامپیوتر کاربر ارسال می کند . در قسمت بعدی به آموزش نحوه دریافت این پاسخ خواهیم پرداخت .

5. در مثال زیر به تعیین آدرس یک فایل برای پارامتر url پرداخته ایم .

مثال 5 : xmlhttp.open( "POST" , "demo_post.asp" , true ) ;
تعیین فایل مقصد با استفاده از :
خاصیت url : xmlhttp.send( );