آموزش jQuery – فصل ششم : Ajax in jQuery (ایجاکس در جی کوئری )

فصل ششم :

jQuery و ایجاکس :

Jquery کتابخانه ای بسیار کارآمد برای کار با تکنولوژی Ajax در خود دارد که در این فصل به معرفی آن خواهیم پرداخت .

قبل از شروع باید بدانیم Ajax چیست ؟

Ajax مختصر شده عبارت Asynchronous JavaScript and XML میباشد . این تکنولوژی اولین بار برای استفاده از داده های Xml در جاوا اسکریپت ایجاد شد.

Ajax یک زبان برنامه نویسی نیست . بلکه تکنولوژی برای ارتباط با سرور از طریق جاوااسکریپت و ایجاد صفحات داینامیک میباشد .

هسته اصلی ایجاکس شیی به نام XMLHttpRequest می باشد .

بطور مختصر : ایجاکس ارتباط غیر مستقیم و تبادل اطلاعات با وب سرور است بطوریکه همه چیز در بک گراند اتفاق بیافتد و نتیجه فقط در قسمتی از صفحه نمایش یابد بطوریکه کل صفحه نیاز به بازنگری (رفرش ) نداشته باشد .

ایجاکس در jquery :

در jquery توابعی برای کار با ایجاکس وجود دارد که کار را با این تکنولوژی بسیار آسان نموده است . توسط این توابع میتوان تبادل اطلاعات را با سرور بصورت TXT , HTML , XML و JASON و با استفاده از دو متد GET و POST انجام داد .

و شما میتوانید اطلاعات نتیجه که از سرور بدست می آید را در عنصر انتخابی (selector ) به نمایش در آورید .

در ادامه به بررسی این توابع خواهیم پرداخت :

تابع load :

$(selector).load(url,data,callback)

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

یک مثال ساده :

فرض کنید فایلی با نام loadtxt.txt در پوشه files سرور دارید و میخواهید با کلیک روی دکمه ای آن را در صفحه به نمایش در آورید :


<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

$(‘#result’).load(‘files/loadtxt.txt’);

});

});

</script>

</head>

<body>

<button>Click to Load Data</button>

<div id=”result”></div>

</body>

</html>

پس از اجرای این برنامه با کلیک روی دکمه محتوی موجود در فایل تکست در تگ div نمایش می یابد .

تابع load دو آرگومان دیگر دارد . آرگومان data : زمانی که شما میخواهید یک اسکریپ زبان سرور را (فایلهای php یا asp یا aspx و … ) از سرور بخوانید و باید دیتایی را برای پردازش به آن اسکریپت بفرستید توسط این آرگومان این کار را انجام میدهید .

آرگومان Callback نیز تابعی است که هنگامی که عملیات لود به طور کامل انجام شد اجرا خواهد شد .

مثال :

فرض کنید شما در پوشه files در سرور فایلی به نام loadname.php دارید که محتوای آن بصورت زیر است :

<?php

$name = $_REQUEST[‘name’];

echo ‘Welcome ‘.$name;

 ?>

کار این برنامه این است که نامی را به عنوان داده دریافت میکند و پیام خوش آمد را نمایش میدهد .

حال میخواهید برنامه ای بنویسید که کاربری در جعبه Text یک نام وارد نماید و پس از کلیک روی دکمه . نام به فایل فوق فرستاده شود و نتیجه نمایش داده شود و پس از اتمام کار پیغامی نمایش دهد :


<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

var inputname = $(‘input#name’).val();

$(‘#result’).load(‘files/loadname.php’,{name:inputname},finish_load);

});

});

function finish_load()

{

alert(‘load finish’);

}

</script>

</head>

<body>

Please Enter Your Name :

<input type=”text” id=”name” />

<button>Click to Load Data</button>

<dir id=”result”></dir>

</body>

</html>

همان طور که در کد فوق میبینید پس از کلیک روی دکمه button ابتدا توسط تابع val مقدار موجود در textbox را خوانده و در متغیر inputnum قرار میدهیم . سپس با استفاده از دستور load این مقدار را به فایل loadname.php می فرستیم و در پایان هنگامیکه پاسخ از سرور داده شد و پیام خوش آمد نمایش یافت تابع finish_load اجرا میشود و عبارت “load finish” بر روی صفحه نمایش داده خواهد شد .

نکته 1 : تابع val() : این تابع مقدار یک عنصر فرم را برمیگرداند و در صورتی که مقدار داشته باشد آن مقدار را به خصوصیت value عنصر انتخابی selector نصبت میدهد.

$(selector).val(content);

نکته 2 : در صورتی که چند داده را میخواهید به عنوان data به سرور ارسال نمایید آنها را داخل } و { قرار داده و هر داده را با کاما “,” از داده بعدی جدا نمایید :

{var1:value1,var2:value2,var3:value3}

تابع $.ajax(option) :

سطح پایین ترین تابع کار با ایجاکس در جی کوئری تابع ajax می باشد . برای استفاده از این تابع باید تمام پارامتر های ارسال را توسط آرگومان option به سرور ارسال نماییم .

مثال ساده :

$.ajax({

url: ‘ajax/test.html’,

success: function(data) {

$(‘.result’).html(data);

alert(‘Load was performed.’);

}

});

در این مثال تابع ajax فایل test.html را از سرور فراخوانی کرده و نتیجه را در عنصری با کلاس result نمایش میدهد .

کار با این تابع به نسبت سایر توابعی که معرفی خواهد شد دشوار تر میباشد . بنا براین پیشنهاد میشود از این تابع فقط در مواقع نیاز استفاده شود و به جای آن از توابع ساده شده استفاده گردد .

تابع : $.get و $.post :

$.post(url,data,callback,type);

$.get(url,data,callback,type);

این دو تابع همان طور که از نامشان پیداست با دو متد مختلف post و get اسکریپت url را از سرور فراخوانی نموده و نتیجه را توسط تایع callback برمیگردانند.

  • url : آدرس اسکریپتی که سمت سرور باید اجرا شود
  • Data : داده هایی که به سرور فرستاده میشود : {name:value,name:value,…}
  • Callback : تابعی است که هنگامی که داده ها از سرور به طور کامل بارگزاری شد صدا زده میشود .
  • Type : نوع داده های خروجی از سرور را مشخص میکند و میتواند مقادیر (html,xml,json,jasonp,script,text) باشد

تنها تفاوت این دو تابع در نوع ارسال داده به سرور است که اولی از متد post استفاده مینماید و دومی از متد get . بنابراین در صورتی که میخواهید فقط فایلی را از سرور بازخوانی نمایید و قصد ارسال داده به سرور را ندارید، بهتر است از تابع get استفاده نمایید . (و یا تابع load ) .

(اگر در مورد این دو متد آشنایی ندارید به آموزش زبانهای برنامه نویسی تحت سرور مانند php یا asp مراجعه نمایید ).

مثال :

مثالی که در بالا برای تابع ajax نوشته شد را با تابع get بصورت زیر میتوان نوشت :

$.get(‘ajax/test.html’, function(data) {

$(‘.result’).html(data);

alert(‘Load was performed.’);

});

و یا مثالی دیگر : در این مثال میخواهیم همان مثالی را که در ابتدای فصل برای تابع load نوشتیم با تابع post بنویسیم . در این صورت قسمت کد ما به شکل زیر تغییر خواهد کرد :

$(document).ready(function(){

$(“button”).click(function(){

var inputname = $(‘input#name’).val();

$.post(‘files/loadname.php’,{name:inputname},function(Data){

$(‘#result’).html(Data);

finish_load();

});

});

});

همان طور که در مثال میبینید . تابع callback با مقدار data پس از فراخوانی کامل loadname.php صدا زده میشود و در این تابع مقدار data که همان نتیجه اجرای اسکریپت loadname.php است توسط دستور html(data) در عنصر با آیدی result نمایش می یابد .

تابع getScript :

$.getScript(url,callback)

تابع getScript ، برای فراخوانی و اجرای یک فایل جاوااسکریپت ( js ) به کار برده میشود .

این تابع ساده شده تابع ajax با فرمت زیر می باشد :

$.ajax({

url: url,

dataType: ‘script’,

success: success

});

مثال :

$.getScript("test.js");

این مثال باعث فراخوانی و اجرای فایل test.js میشود .

$.getScript("http://blog.monavarian.ir/test.js", function(){

alert("Script loaded and executed.");

});

در مثال فوق فایل test.js در آدرس blog.monavarian.ir فراخوانی میشود و در صورتی که فراخوانی با موفقیت انجام شود پیغام مناسب نمایش می یابد .

نکته : میتوانید از این تابع هنگامی استفاده نمایید که میخواهید متغیر های سراسری را در یک فایل جداگانه قرار دهید و بعد در برنامه ها از آن استفاده نمایید .

تابع getJSON :

$.getJSON(url,data,callback);

این تابع برای فراخوانی فایل با فرمت Jason از سرور می باشد .

توی پرانتز ( مختصری درباره Jason ) :

فایلهای Jason ، فایلهای داده ای هستند که داده ها را با فرمت خاصی ذخیره میکنند . مانند فایلهای xml فایلهای Jason نیز دارای یک فرمت خاص برای ذخیره اطلاعات می باشند .

ساختار هر شی jason به صورت روبرو می باشد :

{string : value , string:value , … }

Value ها میتوانند شامل مقادیر string , object , number , array , true , false , null باشند .

ساختار Array در jason نیز به فرم زیر می باشد :

[item1,item2,item3,…]

هر item نیز خود میتواند شامل مقادیر معرفی شده در بالا باشد .

برای کسب اطلاعات بیشتر به سایت مرجع Jason به آدرس http://www.json.org مراجعه نمایید .

یک مثال کلی با post : در این مثال قصد داریم فرمی را توسط توابع jquery بررسی کرده و سپس توسط تابع post به سرور فرستاده و نتیجه را نمایش دهیم :

برای مثال میخواهیم یک فرم ساده ورود ایجاد نماییم . فایل اسکریپت forms.php بررسی میکند که نام کاربری و کلمه عبور داده شده در لیست کاربران موجود است . در صورتی که موجود باشد مقدار 1 و در صورتی که موجود نباشد مقدار صفر را بر میگرداند . محتوی این فایل به صورت زیر است :

<?php

//user defind :

$users = array (

‘admin’ => ‘demo’,

‘test’ => ‘test’,

‘user’ => ‘pass’,

);

$username = trim($_POST[‘username’]);

$pass = trim($_POST[‘password’]);

if ( array_search($pass,$users) == $username )

echo ‘1’;

else

echo ‘0’;

?>

این فایل را در پوشه files ذخیره میکنیم .

در فایل اصلی 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>

<script src=”jquery.js” type=”text/javascript” ></script>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<script type=”text/javascript”>

$(document).ready(function(){

$(‘input’).focus(function(){

$(‘input’).removeClass(‘select’);

$(this).addClass(‘select’);

});

$(‘form’).submit(function(event){

event.preventDefault();

var user = $(‘input#username’).val();

var pass = $(‘input#pass’).val();

if (!user)

{

$(‘.result’).html(‘please Enter username’);

$(‘input#username’).focus();

}

else if(!pass)

{

$(‘.result’).html(‘please Enter password’);

$(‘input#pass’).focus();

}

else

{

$.post(‘files/forms.php’,{username:user,password:pass},function(data){

if (data == ‘1’)

{

$(‘.result’).html(‘Login Success <br/> welcome ‘+user);

$(‘form’).hide();

}

else if (data == ‘0’)

$(‘.result’).html(‘username or password is not correct’)

else

$(‘.result’).html(‘can not connect to server’)

})

}

return false;

})

})

</script>

<title>Form Validation</title>

<style>

.result {

color:#FF0000;

}

.select {

background:#fff;

border:2px solid #0000ff;

}

</style>

</head>

<body>

<div class=”result” > </div>

<form action=”#” >

<input type=”text” name=”username” id=”username” />

<input type=”password” name=”pass” id=”pass” />

<input type=”submit” value=”Login”/>

</form>

</body>
</html>

همان طور که در کد بالا مشاهده می کنید . در ابتدا هنگام submit فرم بررسی میکند و در صورت خالی بودن فیلدهای username و یا pass پیغام مناسب درج میکند و سپس نشانگر را به فیلد خالی هدایت می کند (focus ) .

در صورتی که username و pass وارد شده باشد . این مقادیر را به فایل forms.php میفرستد و در نتیجه بررسی میکند : در صورتی که نتیجه فرستاده شده از سرور 1 باشد پیغام خوش آمد نمایش میدهد و فرم را مخفی (hide ) می نماید در غیر این صورت پیغام مناسب را درج می نماید.