فصل ششم :
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("https://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 ) می نماید در غیر این صورت پیغام مناسب را درج می نماید.
سلام دوست عزیز
ممنون از زحمات شما
سلا نو را پیشاپیش به شما تبریک می کیم
موفق و پیروز باشید
گل رز سرخ
درود دوست عزیز
ممنون از این مقاله و راهنمایی خوبتون .
امیدوارم همواره پیروز و پاینده باشید
با سلام
من تازه یادگیری jquery رو شروع کردم.
در مثال آخر شما برای چک کردن درستی یا نادرستی data رو با یک یا صفر چک می کنید. من هم دقیقا همین کار رو انجام میدم ولی برای من اصلا وارد شرط نمیشه .
اگر راهنمایی کنید ممنون می شم
بسیار ناقص بود
فوق العاده بود واقعا ممنونم
سلام.سوالی داشتم متاسفانه من با jquery تسلطی ندارم.من اطلاعاتی رو توی صفحه به این شکل به فرض به صورت json به دست آوردم:
{“error”:false,”message”:”Successfull”,”count”:1,”icon”:1}
حالا من میخوام با یک صفحه که هم ajax باشه و jquery داشته باشیم،اطلاعات رو به دست بیاریم.
راهنمایی کنید لطفا
میتوانید توسط توابع post , get و load از جی کوئری که به صورت ایجاکس کار میکنن صفحه رو از هر صفحه دیگری روی سرور خوانده و نمایش دهید .
برای اطلاعات بیشتر و دیدن نمونه ها به مستندات وبسایت جی کوئری مراجعه کنید
باسلام وخسته نباشید.آموزش های خیلی جالب وخوبی داشتین.ممنون
خیلی عالی بود واقعا استفاده کردم
با تشکر از سایت خوبتون
بسیار جامع بود
بسیار کاربردی و آموزنده.سپاس.
سلام
خیلی ممنون
مطلب خوبی بود
با تشکر از سایت خوبتون