فصل ششم :
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 ) می نماید در غیر این صورت پیغام مناسب را درج می نماید.