ایجکس یا Ajax (جاوا اسکریپت و XML آسنکرون / Asynchronous JavaScript and XML) در جی کوئری یک روش ساخت برنامه های تعاملی وب است که بلافاصله درخواست های کاربر را پردازش می کنند.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
هنگامی که یک کاربر یک عمل انجام می دهد، Ajax به محتوا در صفحات وب اجازه می دهد تا بلافاصله به روز رسانی شود، بر خلاف درخواست HTTP، که کاربران باید برای بارگذاری کامل یک صفحه صبر کنند. ایجکس در جی کوئری فقط یک قسمت از صفحه وب را بارگذاری می کند و بقیه آن، تحت تاثیر قرار نمی گیرد. نقشه ی Google map یک برنامه ی مشهور است که از ایجکس استفاده می کند.
ایجکس در جی کوئری
ajax.$ شبیه به XML Http Request در جاوا اسکریپت، object.$، است؛ اما ایجکس در جی کوئری ساده تر و استفاده از آن، آسان تر از XMLHttpRequest است.
روش $.ajax در جی کوئری دارای چندین ویژگی است که عبارتست از:
url: درخواست را به کجا می خواهید ارسال کنید. آدرس url باید در داخل دامنه ی شما باشد.
type: نوع درخواست مانند: POST و GET
dataType: نوع داده ای که در پاسخ درخواست می خواهید مانند: html، json، xml
data: داده هایی که می خواهید ارسال شوند.
success: اگر پاسخ موفقیت آمیز دریافت کردید، پس از آن می خواهید با آن داده های دریافتی چه کاری در جی کوئری انجام دهید.
complete: کد جی کوئری یا جاوا اسکریپت را به کد پاسخ اضافه می کند. زیرا، خارج از کد جی کوئری یا جاوا اسکریپت، کد با محتوای پاسخ ایجکس ، کار نمی کند.
Error: اگر خطایی رخ دهد، این کد اجرا می شود. معمولا، این کد، تابع anonymous را می گیرد و اولين پارامتر مربوط به آن، شيء است، پارامتر دوم، وضعيت است، و پارامتر سوم، پاسخ متني است.
آموزش پیشنهادی برای شما : آموزش جی کوئری (jquery) از مقدماتی تا پیشرفته
کد جی کوئری زیر را با عنوان index.php ذخیره کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Ajax search</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 9 <body> 10 <input type="text" name="film_title" id="title" placeholder="type film title"><span id="total"></span> 11 <hr> 12 <div id="result"> 13 14 </div> 15 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 16 <script type="text/javascript" src="js/ajaxMethod.js"></script> 17 </body> 18 </html> |
و کد جی کوئری زیر را با عنوان ajaxMethod.js در پوشه js خود ذخیره کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
1 $(document).ready(function(e) { 2 $('#title').on('keyup', function() { 3 var filmName = $(this).val(); 4 $.ajax({ 5 url: 'process.php', 6 type: 'POST', 7 dataType: "html", 8 data: {title: filmName}, 9 success: function(data) { 10 11 $('#result').html(data); 12 }, 13 complete: function() { 14 var count = 0; 15 $('h3').each(function() { 16 count++ 17 }) 18 $('#total').text(count + ' result found'); 19 } 20 });//end of ajax method 21 });//end of on key up method 22 });//end of ready method |
شرح کد جی کوئری:
در این جا از رویداد keyup در جی کوئری استفاده می کنیم. در داخل این رویداد، مقدار فیلد ورودی را می گیریم. پس از آن، روش ایجکس جی کوئری را راه اندازی اولیه می کنیم و یک شی را در داخل پارامتر روش ajax می گذاریم. این شی، بعضی از کلید های مشخص شده که قبلا در بالا بحث شده اند را دارا است. در آدرس url، نام صفحه ای را که در آن درخواست ارسال می شود، ارائه می دهیم. پس از آن، نوع درخواستی را که می خواهیم ارسال کنیم، GET یا POST را مشخص می کنیم که در ویژگی نوع تعریف شده است. نوع داده ای که به عنوان پاسخ از آدرس url درخواست شده است مشخص می شود که در dataType تعریف شده است. اطلاعاتی که به url درخواستی ارسال می شود (مانند POSTـ$ یا GETـ$) در ویژگی داده تعریف شده است. در اینجا فقط یک متغیر ارسال شده است و آن عنوان / title است.
به یاد داشته باشید، کلیدِ این کد جی کوئری، شاخص آرایه ی متغیر POSTـ$ یا GETـ$ است؛ مانند: POST [‘title’]ـ$. و بخش دوم، مقدار آن است.
مقدار چندگانه را می توان با نوشتن کاما پس از یک جفت از آن ها، ارسال کرد. آرایه کلی نیز می تواند تنها با دادن نام آرایه در ویژگی داده ارسال شود، و برای این کار، نیازی به کلید یا مقدار نیست. کلید آرایه، کلید خواهد بود و keys value، مقدار کلیدی است که در گلوبالِ POSTـ$ یا GETـ$ در صفحه ی پردازش وجود دارد.
در صورت که درخواست، موفقیت آمیز باشد، تابع Success داده ها را از آدرس درخواست شده، دریافت می کند. در این جا پارامتر تابع anonymous، در واقع داده های پاسخ است.
در ویژگی complete، شمارش می شود که چند نتیجه، به عنوان پاسخ درخواست آمده است.
به عنوان سرگرمی، یک پایگاه داده ایجاد کنید و فایل file_text.sql را در آن وارد کنید. نتیجه ی این کار، ایجاد یک جدول film_text خواهد بود.
یا می توانید با پایگاه داده ی خود کار کنید. برای این کار، نام پایگاه داده و جدول همراه با sql query را تغییر دهید.
کد های جی کوئری زیر را با عنوان connection.php ذخیره کنید:
|
1 2 3 4 5 6 7 8 9 10 11 |
1 <?php 2 3 $dsn = 'mysql:dbname=entertainment;host=127.0.0.1'; 4 $user = 'root'; 5 $password = ''; 6 7 try { 8 $dbh = new PDO($dsn, $user, $password); 9 } catch (PDOException $e) { 10 echo 'Connection failed: ' . $e->getMessage(); 11 } |
کد جی کوئری زیر را با عنوان process.php ذخیره کنید:
|
1 2 3 4 5 6 7 8 9 10 |
1 <?php 2 //grab data from index.php page 3 $film_title = htmlspecialchars($_POST['title'], ENT_QUOTES); 4 $query = $dbh->prepare("SELECT * FROM film_text WHERE title LIKE '$film_title%' LIMIT 10"); 5 $query->execute(); 6 while ($finfo = $query->fetch(PDO::FETCH_OBJ)) { 7 echo '<div><h3>' . $finfo->title . '</h3>'; 8 echo '<p>' . $finfo->description . '</p></div>'; 9 } 10 ?> |
شرح کد جی کوئری:
بخشِ ابتدایی، اتصال پایگاه داده از طریق PDO (php database object) است. موارد دیگری نیز می توانند استفاده شوند، از جمله: کلاس mysqli، استایل رویه ای mysqli. انتخاب این موارد به توسعه دهنده بستگی دارد که کدام نوع اتصال را ترجیح می دهد.
درون لوپِ while، متغیر i، باکس اطلاعات را که با div ساخته شده است، ایجاد می کند. اگر ۱۰ نتیجه پیدا شود، پس ۱۰ div ایجاد خواهد شد و به index.php در تابع success property anonymous ارسال می شود.
متدِ پست جی کوئری
$.post() و $get() و $.getJSON()، فرزندانِ متدِ $.ajax() هستند. همه این متد ها با فراخوانی متد $.ajax به طور داخلی کار می کنند. این سه مورد، سینتکس میان بر / short cut به متد $.ajax هستند.
سینتکس $.post() و$.get() مشابه هستند.
پارامتر اول: URL
پارامتر دوم: داده هایی که برای url مورد نظر فرستاده می شوند. می توانید یک آرایه تکی یا یک شی مانند {key: value، key: value} را در نظر بگیرید.
پارامتر سوم: تابع success. اگر درخواست موفقیت آمیز باشد، با داده های پاسخ چه کاری می خواهید انجام دهید.
به عنوان نمونه، کد جی کوئری زیر را ببینید:
|
1 |
$.post(‘post_response.php’, info, function(responseData) { alert(responseData);} |
حالا می خواهیم عنوان فیلم را با استفاده از index.php قبلی و صفحه ی process.php و connection.php پیدا کنیم؛ فقط فایل js، یعنی ajaxMethod.js را به ajaxPost.js تغییر دهید؛
کد جی کوئری ایجاد شده باید مانند کد زیر باشد:
|
1 2 3 4 5 6 7 8 9 10 11 |
1 <script type="text/javascript" src="js/ajaxPost.js"></script> 2 Save the following code as ajaxPost.js 3 $(document).ready(function(e) { 4 $('#title').on('keyup', function() { 5 var filmName = $(this).val(); 6 $.post('process.php',{title: filmName},function(data) { 7 $('#result').html(data); 8 } 9 );//end of ajax method 10 });//end of on key up method 11 });//end of ready method |
توجه داشته باشید که این متدِ $.post در مقایسه با $.ajax، چقدر ساده تر و آسان تر است. اما در این جا، کنترل هایی نظیر complete، error، dataType و غیره را از دست داده ایم.
اکنون از $.post و $.ajax، بسته به نیازِ برنامه ی خود، استفاده کنید.
جی کوئری داده های JSON را دریافت می کند
مقدمه ای بر JSON در جی کوئری
دو راه برای دریافت داده های json به عنوان پاسخ وجود دارد، اولین روش، تنظیم dataType بر اساس json در متدِ $.ajax و پردازش داده های json در تابع فراخوانی شده ی success است. از سوی دیگر، می توانید از سینتکس کوتاه $.getJSON برای استفاده از داده json استفاده کنید.
چرا json مهم است؟
در $.post() و $ajax() کنترلی بر زبان طرف مشتری (مثل جاوا اسکریپت) نداریم که چگونه اطلاعات را در میان سند سازماندهی و توزیع کنیم. فقط داده های پاسخ را به عنوان html یا متن در div دیگری اضافه می کنیم. اما ممکن است نیاز داشته باشیم که عنوان فیلم را به یک div بدهیم و توضیحات و اطلاعات دیگر را به div دیگری و یا هر جایی که می خواهیم از jquery یا javscript استفاده کنیم. سپس باید از $.getJSON استفاده کنید.
سینتکس $.getJSON() مشابه سینتکس $.post() است که فقط نام آن تغییر کرده است. و صفحه ی Index.php مشابه صفحه ی متد ایجکس است.
کد جی کوئری زیر را با عنوان json.js در پوشه ی js خود ذخیره کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
1 $(document).ready(function(e) { 2 $('#title').on('keyup', function() { 3 var filmName = $(this).val(); 4 5 $.getJSON("process.php",{title:filmName},function(data){ 6 var title="<ul>"; 7 var description=""; 8 for(var i=0;i<data.length;i++){ 9 title+="<li>"+ data[i].title+"</li>"; 10 title+="<p>"+data[i].description+"</p>"; 11 } 12 title+="</ul>"; 13 $('#result').html(title); 14 15 }) 16 });//end of on key up method 17 });//end of ready method |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
1 <?php 2 require '../connection.php'; 3 $film_title = htmlspecialchars($_REQUEST['title'], ENT_QUOTES); 4 $query = $dbh->prepare("SELECT * FROM film_text WHERE title LIKE '$film_title%' LIMIT 10"); 5 $query->execute(); 6 $data=$query->fetchAll(PDO::FETCH_ASSOC); 7 echo json_encode($data); 8 JSON data Structure of this response 9 This is sample response data to give an overview how to use this structure json data in success callback function to arrange or view them in web page. 10 [ 11 { 12 "film_id": " film id", 13 "title": "film title", 14 "description": "descritpion" 15 }, 16 { 17 "film_id": " film id", 18 "title": "another film title", 19 "description": " another descritpion" 20 } 21 ] |
خدا خیرتون بده ….. واقعا دمتون گرم….. خیلی ساده و روان توضیح دادید… طوری که توی یه بار دیدن تونستم مشکلم رو حل کنم …. هرجا میرفتم یه جوری پیچونده بودن که آدم جای اینکه یاد بگیره بدتر گیج میشد…. مرسی و باز هم مرسی