بررسی Ajax در jQuery

دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 05 اردیبهشت 1401

بررسی Ajax در jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس انجام می‌شود. AJAX مخفف جاوا اسکریپت ناهمگام و XML است و این فناوری به ما کمک می‌کند تا داده‌ها را از سرور و بدون به‌روزرسانی صفحه مرورگر بارگیری کنیم. جی کوئری یک ابزار عالی است که مجموعه ای غنی از روش‌های AJAX را برای توسعه برنامه‌های وب نسل بعدی ارائه می‌دهد.

بررسی Ajax در jQuery – بارگیری داده‌های ساده

بارگذاری هر داده استاتیک یا پویا با استفاده از JQuery AJAX بسیار آسان است. JQuery متد ()load را برای انجام این کار در نظر گرفته. ساختار:

[selector].load( URL, [data], [callback] );

در اینجا توضیحات همه پارامترها آمده است:

URL : منبع سمت سرور است که درخواست به آن ارسال می‌‎شود. این پارامتر می‌تواند یک اسکریپت CGI ،ASP ،JSP یا PHP باشد که داده‌ها را به صورت پویا یا خارج از پایگاه داده تولید می‌کند.
data : این پارامتر اختیاری یک شی را نشان می‌دهد که ویژگی‌های آن به صورت مرتب در پارامترهای رمزگذاری شده مناسب برای ارسال به درخواست ارسال می‌شود. در صورت تنظیم شدن، درخواست با استفاده از روش POST انجام می‌شود و در صورت حذف از روش GET استفاده می‌شود.
callback : یک تابع فراخوانی که پس از بارگیری داده‌های پاسخ در عناصر مجموعه منطبق، فراخوانی می‌شود. اولین پارامتر ارسال شده به این تابع، متن پاسخ دریافتی از سرور و پارامتر دوم کد وضعیت است.

به عنوان مثال فایل HTML زیر را با یک کد JQuery کوچک در نظر بگیرید:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

در اینجا ()load یک درخواست Ajax را به فایل URL /jquery/result.html مشخص شده ارسال می‌کند. پس از بارگذاری این فایل، تمام محتوا در داخل تگ <div> با ID به نام stage ریخته می‌شود. با فرض اینکه فایل /jquery/result.html ما فقط یک خط کد HTML دارد:

<h1>THIS IS RESULT...</h1>

وقتی روی دکمه داده شده کلیک می‌کنید، فایل result.html بارگذاری می‌شود:

دریافت داده‌های JSON

موقعیتی وجود دارد که سرور، رشته JSON را در برابر درخواست شما برمی‌گرداند. ابزار جی کوئری تابع ()getJSON رشته JSON برگشتی را تجزیه می‌کند و رشته حاصل را به عنوان پارامتر اول برای انجام اقدامات بیشتر در دسترس تابع callback قرار می‌دهد. ساختار:

[selector].getJSON( URL, [data], [callback] );

در اینجا توضیحات همه پارامترها آمده است:

URL : منبع سمت سرور که از طریق روش GET با آن تماس گرفته شده است.
data : شی ای که ویژگی‌های آن به عنوان نام/مقدار مورد استفاده برای ساخت یک رشته پرس و جو برای الحاق به URL، یا یک رشته پرس و جو از پیش فرمت شده و کدگذاری شده استفاده می‌شود.
callback : تابعی که پس از تکمیل درخواست فراخوانی می‌شود. مقدار داده حاصل از هضم بدنه پاسخ به عنوان یک رشته JSON به عنوان پارامتر اول به این فراخوانی و وضعیت به عنوان پارامتر دوم ارسال می‌شود.

به عنوان مثال فایل HTML زیر را با یک کد JQuery کوچک در نظر بگیرید:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

در این مثال متد کاربردی جی کوئری، ()getJSON یک درخواست Ajax را به فایل URL مشخص شده result.json ارسال می‌کند. پس از بارگذاری این فایل، تمام محتوا به تابع callback منتقل می‌شود که در نهایت در داخل یک تگ <div> با ID به نام stage ریخته می‌شود. با فرض اینکه فایل result.json ما دارای محتوای فرمت‌شده json زیر است:

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

وقتی روی دکمه مشخص شده کلیک می‌‎کنید، فایل result.json بارگذاری می‌شود:

انتقال داده به سرور

بارها اتفاق می‌افتد که شما ورودی (input) را از کاربر جمع آوری می‌کنید و آن ورودی را برای پردازش بیشتر به سرور ارسال می‌کنید. جی کوئری AJAX انتقال داده‌های جمع‌آوری‌شده به سرور را با استفاده از پارامتر داده‌ای از هر متد Ajax آسان کرده است. این مثال نشان می‌دهد که چگونه می‌توان ورودی کاربر را به یک اسکریپت وب سرور منتقل کرد که همان نتیجه را ارسال می‌کند و ما آن را چاپ می‌کنیم:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

کد نوشته شده در اسکریپت result.php در اینجا:

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

اکنون می‌توانید هر متنی را در کادر ورودی داده شده وارد کنید و سپس روی دکمه “نمایش نتیجه” کلیک کنید تا ببینید چه چیزی را در کادر ورودی وارد کرده‌اید:

متدهای JQuery AJAX

شماره	متدها و توضیحات
1	jQuery.ajax( options ) یک صفحه راه دور را با استفاده از درخواست HTTP بارگیری می‌کند.
2	jQuery.ajaxSetup( options ) تنظیمات جهانی را برای درخواست‌های AJAX تنظیم می‌کند.
3	jQuery.get( url, [data], [callback], [type] ) یک صفحه راه دور را با استفاده از درخواست HTTP GET بارگیری می‌کند.
4	jQuery.getJSON( url, [data], [callback] ) داده‌های JSON را با استفاده از درخواست HTTP GET بارگیری می‌کند.
5	jQuery.getScript( url, [callback] ) یک فایل جاوا اسکریپت را با استفاده از درخواست HTTP GET بارگیری و اجرا می‌کند.
6	jQuery.post( url, [data], [callback], [type] ) یک صفحه راه دور را با استفاده از درخواست HTTP POST بارگیری می‌کند.
7	load( url, [data], [callback] ) HTML را از یک فایل راه دور بارگیری کرده و آن را به DOM اعمال می‌کند.
8	( )serialize مجموعه ای از عناصر ورودی را در رشته‌ای از داده‌ها مرتب می‌کند.
9	( )serializeArray تمام فرم‌ها و عناصر فرم مانند متد serialize. را مرتب می‌کند اما یک ساختار داده JSON را به شما برمی‌گرداند تا با آن کار کنید.

رویدادهای JQuery AJAX

شماره	متدها و توضیحات
1	ajaxComplete( callback ) هر زمان که درخواست AJAX تکمیل شد، تابعی را ضمیمه می‌کند تا اجرا شود.
2	ajaxStart( callback ) هر زمان که یک درخواست AJAX شروع شد و هیچ کدام از قبل فعال نبود، تابعی را ضمیمه می‌کند تا اجرا شود.
3	ajaxError( callback ) هر زمان که درخواست AJAX با شکست مواجه شد، تابعی را ضمیمه کنید تا اجرا شود.
4	ajaxSend( callback ) تابعی را ضمیمه می‌کند تا قبل از ارسال درخواست AJAX اجرا شود.
5	ajaxStop( callback ) تابعی را ضمیمه می‌کند تا هر زمان که تمام درخواست‌های AJAX به پایان رسید اجرا شود.
6	ajaxSuccess( callback ) هر زمان که درخواست AJAX با موفقیت کامل شد، تابعی را ضمیمه می‌کند تا اجرا شود.

مقاله بررسی Ajax در jQuery در اینجا به پایان می‌رسد، نظرات خود را با ما به اشتراک بگذارید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊