AJAX مخفف عبارت Asynchronous Javascript و XML است. در واقع، AJAX یک فناوری جدید نیست، زیرا جاوا اسکریپت و XML برای مدتی طولانی وجود داشته‌اند و AJAX ترکیبی از این فناوری‌ها است. AJAX معمولاً با اصطلاح Web 2.0 همراه است و به عنوان جدیدترین برنامه وب معرفی می شود.
هنگام استفاده از AJAX، نیازی به آپدیت کل صفحه در هر بار نیست، زیرا تنها قسمت خاصی از آن به روز می شود. این بسیار راحت تر است، زیرا لازم نیست مدت طولانی صبر کنید، و مقرون به صرفه تر است، زیرا همه اینترنت نامحدود ندارند. درست است، در این مورد، توسعه دهنده باید اطمینان حاصل کند که کاربر از آنچه در صفحه اتفاق می افتد آگاه است. این را می توان با استفاده از نشانگرهای بارگذاری، پیام های متنی که داده ها با سرور رد و بدل می شوند، پیاده سازی کرد. همچنین باید بدانید که همه مرورگرها از AJAX (مرورگرهای قدیمی و مرورگرهای متنی) پشتیبانی نمی کنند. Plus Javascript می تواند توسط کاربر غیرفعال شود. بنابراین، نباید از استفاده از فناوری سوء استفاده کنید و به روش های جایگزین برای ارائه اطلاعات در وب سایت متوسل شوید.
بیایید مزایای AJAX را خلاصه کنیم:
- امکان ایجاد یک رابط وب کاربر پسند
- تعامل فعال با کاربر
- راحتی استفاده
تبادل اطلاعات
برای تبادل داده ها باید یک شی XMLHttpRequest در صفحه ایجاد شود که نوعی واسطه بین مرورگر کاربر و سرور است (شکل 1). با استفاده از XMLHttpRequest می توانید درخواستی را به سرور ارسال کنید و همچنین پاسخی را در قالب انواع مختلف داده دریافت کنید.
دو راه برای تبادل اطلاعات با سرور وجود دارد. راه اول درخواست GET است. در این درخواست، شما به یک سند روی سرور دسترسی دارید و آرگومان هایی را از طریق خود URL به آن ارسال می کنید. در همان زمان، در سمت کلاینت، منطقی است که از تابع فرار جاوا اسکریپت استفاده کنیم تا برخی از داده ها درخواست را قطع نکنند.
بخش کلاینت که به زبان جاوا اسکریپت نوشته شده است باید قابلیت های لازم را برای برقراری ارتباط امن با سرور فراهم کند و روش هایی را برای تبادل داده ها به هر یک از روش های فوق ارائه دهد. بخش سرور باید داده های ورودی را پردازش کند و بر اساس آنها اطلاعات جدیدی تولید کند (مثلاً کار با پایگاه داده) و آن را به مشتری بازگرداند. به عنوان مثال، برای درخواست اطلاعات از سرور، می توانید از یک درخواست GET معمولی با انتقال چند پارامتر و پارامترهای کوچک استفاده کنید و برای به روز رسانی اطلاعات یا افزودن اطلاعات جدید، باید از درخواست POST استفاده کنید، زیرا امکان انتقال را به شما می دهد. حجم زیادی از داده ها
همانطور که قبلا ذکر شد، AJAX از انتقال داده های ناهمزمان استفاده می کند. این بدان معناست که در حین انتقال داده ها، کاربر می تواند سایر اقدامات مورد نیاز خود را انجام دهد. در این زمان باید به کاربر اطلاع داده شود که نوعی تبادل داده در حال انجام است، در غیر این صورت کاربر فکر می کند اشتباهی رخ داده است و می تواند سایت را ترک کند یا به نظر خود عملکردی را که "هنگ" کرده است دوباره فراخوانی کند. نشان دادن در حین ارتباط در یک برنامه Web 2.0 نقش بسیار مهمی ایفا می کند: بازدیدکنندگان ممکن است هنوز به این روش های به روز رسانی صفحه عادت نداشته باشند.
همانطور که از نام فناوری پیداست، پاسخ سرور می تواند نه تنها XML باشد. علاوه بر XML، می‌توانید پاسخی را به صورت متن ساده یا JSON (جاوا اسکریپت شیء نشان‌گذاری) دریافت کنید. اگر پاسخ به صورت متن ساده دریافت شده باشد، می توان آن را بلافاصله در یک ظرف در صفحه نمایش داد. هنگامی که یک پاسخ XML دریافت می شود، سند XML حاصل معمولاً در سمت مشتری پردازش می شود و به (X)HTML تبدیل می شود. هنگام دریافت پاسخ JSON، کلاینت فقط باید کد دریافتی (عملکرد eval جاوا اسکریپت) را برای به دست آوردن یک شی جاوا اسکریپت کامل اجرا کند. اما در اینجا باید دقت کنید و این نکته را در نظر بگیرید که کدهای مخرب با استفاده از این فناوری قابل انتقال هستند، بنابراین قبل از اجرای کدهای دریافتی از سرور باید به دقت بررسی و پردازش شود. چنین عملی به عنوان درخواست "بیکار" وجود دارد که در آن هیچ پاسخی از سرور دریافت نمی شود، فقط داده های سمت سرور تغییر می کند.
در مرورگرهای مختلف، این شی دارای خواص متفاوتی است، اما در کل یکسان است.
XMLHttpRequest شیء روش
توجه داشته باشید که نام متدها به همان سبک (Camel-style) با سایر توابع جاوا اسکریپت نوشته شده است. هنگام استفاده از آنها مراقب باشید.
سقط جنین ()- درخواست فعلی به سرور را لغو کنید.
getAllResponseHeaders()- تمام سرصفحه های پاسخ را از سرور دریافت کنید.
getResponseHeader ("header_name")- عنوان مشخص شده را دریافت کنید.
open("نوع_درخواست"، "URL"، "ناهمزمان"، "نام کاربری"، "رمز عبور")- مقدار دهی اولیه درخواست به سرور، با مشخص کردن روش درخواست. نوع درخواست و URL پارامترهای مورد نیاز هستند. آرگومان سوم یک مقدار بولی است. معمولاً همیشه روی true یا اصلاً تنظیم نشده است (پیش فرض درست است). آرگومان های چهارم و پنجم برای احراز هویت استفاده می شوند (ذخیره کردن داده های احراز هویت در اسکریپت بسیار ناامن است، زیرا اسکریپت توسط هر کاربری قابل مشاهده است).
ارسال ("محتوا")- یک درخواست HTTP به سرور ارسال کنید و پاسخ دریافت کنید.
setRequestHeader ("header_name"، "value")- مقادیر هدر درخواست را تنظیم کنید.
ویژگی های شی XMLHttpRequest
onreadystatechangeیکی از مهمترین ویژگی های شی XMLHttpRequest است. به کمک این خاصیت، یک هندلر تنظیم می شود که هر زمان که وضعیت شیء تغییر کند، فراخوانی می شود.
حالت آماده- عددی که وضعیت جسم را نشان می دهد.
پاسخ متن- نمایش پاسخ سرور به صورت متن ساده (رشته).
answerXML- یک شی سند سازگار با DOM دریافت شده از سرور.
وضعیت- وضعیت پاسخ از سرور.
وضعیت متن- نمایش متنی وضعیت پاسخ از سرور.
بیایید نگاهی دقیق تر به ویژگی readyState بیندازیم:
- 0 - شی مقداردهی اولیه نشده است.
- 1 - شی در حال بارگذاری داده است.
- 2 - شی داده های خود را بارگذاری کرده است.
- 3 - شی به طور کامل بارگذاری نشده است، اما می تواند توسط کاربر با آن تعامل داشته باشد.
- 4 - شی به طور کامل مقدار دهی اولیه شده است. پاسخی از سرور دریافت کرد.
ایجاد یک شی XMLHttpRequest
همانطور که در بالا ذکر شد، ایجاد این شی برای هر نوع مرورگر یک فرآیند منحصر به فرد است.
به عنوان مثال، برای ایجاد یک شی در مرورگرهای سازگار با Gecko، Konqueror و Safari، از عبارت زیر استفاده می کنید:
VarRequest = new XMLHttpRequest();
و برای اینترنت اکسپلورر از موارد زیر استفاده می شود:
VarRequest = ActiveXObject جدید ("Microsoft.XMLHTTP");
Var Request = new ActiveXObject("Msxml2.XMLHTTP");
اکنون، برای دستیابی به سازگاری بین مرورگرها، باید تمام عملکردها را به یکی اضافه کنید:
تابع CreateRequest() (var Request = false; if (window.XMLHttpRequest) (//مرورگرهای سازگار Gecko، Safari، Konqueror Request = new XMLHttpRequest(); ) در غیر این صورت (window.ActiveXObject) ( //Internet explorer try (Request new ActiveXObject("Microsoft.XMLHTTP"); ) catch (CatchException) ( Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( هشدار("Unable to create XMLHttpRequest"); ) Request بازگشت; )
پس از همه اینها، می توانید این شی را ایجاد کنید و نگران عملکرد در مرورگرهای محبوب نباشید. اما شما می توانید یک شی را در مکان های مختلف ایجاد کنید. اگر آن را به صورت جهانی ایجاد کنید، در یک مقطع زمانی خاص فقط یک درخواست به سرور امکان پذیر خواهد بود. شما می توانید هر بار که درخواستی به سرور ارسال می شود یک شی ایجاد کنید (این کار تقریباً به طور کامل مشکل را حل می کند).
درخواست سرور
الگوریتم درخواست سرور به شکل زیر است:
- بررسی وجود XMLHttpRequest.
- راه اندازی اتصال به سرور
- ارسال درخواست به سرور
- پردازش داده های دریافتی
/* تابعی برای ارسال درخواست به فایلی در سرور r_method - نوع درخواست: GET یا POST r_path - مسیر فایل r_args - آرگومان هایی مانند a=1&b=2&c=3... r_handler - تابعی برای مدیریت پاسخ از سرور */ تابع SendRequest(r_method, r_path, r_args, r_handler) (//Create a request var Request = CreateRequest(); //بررسی وجود درخواست دوباره اگر (!Request) ( return; ) //تخصیص یک کنترل کننده سفارشی Request.onreadystatechange = function() ( // اگر تبادل داده کامل شود اگر (Request.readyState == 4) ( //کنترل را به کاربر کنترل کننده r_handler(Request) بدهید) //بررسی کنید که آیا درخواست GET لازم است if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //آغاز کردن اتصال Request.open(r_method, r_path, true)؛ if (r_method.toLowerCase( ) == "post") ( //اگر این یک درخواست POST است //Set header Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //در حال ارسال m درخواست Request.send(r_args); ) else ( //اگر این یک درخواست GET است //ارسال یک درخواست تهی Request.send(null)؛ )
ایجاد یک درخواست بسیار ساده تر شده است. به عنوان مثال، اجازه دهید تابعی بنویسیم که محتویات یک فایل را روی سرور دریافت کرده و آن را به یک ظرف خروجی می دهد.
تابع ReadFile(نام فایل، کانتینر) ( //ایجاد تابع کنترلر var Handler = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //ارسال درخواست SendRequest("GET"،نام فایل," "، هندلر)؛
به این ترتیب تعامل با سرور انجام می شود.
پردازش پاسخ
در مثال قبلی، یک تابع درخواست به سرور ایجاد کردیم. اما در واقع ناامن است، زیرا ما وضعیت شی و وضعیت پاسخ را از سرور پردازش نمی کنیم.
بیایید به کد خود اضافه کنیم تا بتواند یک اعلان بصری در مورد فرآیند بارگذاری نمایش دهد.
Request.onreadystatechange = function() (//اگر تبادل داده تکمیل شود اگر (Request.readyState == 4) (//کنترل را به کاربر کنترل کننده r_handler(درخواست) بدهید (//به کاربر در مورد دانلود اطلاع دهید ))...
همانطور که می دانید، شی XMLHttpRequest به شما امکان می دهد از وضعیت پاسخ از سرور مطلع شوید. بیایید از این فرصت استفاده کنیم.
Request.onreadystatechange = function() ( //اگر تبادل داده تکمیل شود اگر (Request.readyState == 4) ( if (Request.status == 200) ( //انتقال کنترل به کنترل کننده کاربر r_handler(Request); ) else (// به کاربر در مورد خطای رخ داده اطلاع دهید)) else (//اطلاع رسانی به کاربر در مورد دانلود))...
گزینه های پاسخ سرور
چندین نوع داده را می توان از سرور دریافت کرد:
- متن ساده
JSONنماد شی جاوا اسکریپت است. با کمک آن، می توانید یک شی را به عنوان یک رشته نمایش دهید (در اینجا می توانید یک قیاس با تابع سریال سازی ترسیم کنید). هنگام دریافت داده های JSON، باید آن را اجرا کنید تا یک شی جاوا اسکریپت کامل به دست آورید و عملیات لازم را روی آن انجام دهید. لطفاً توجه داشته باشید که چنین انتقال و اجرای داده ایمن نیست. شما باید پیگیری کنید که چه چیزی به اجرا می رسد.
نمونه کد JSON:
( "داده": ( "متفرقه": [ ( "نام" : "عنصر JSON یک", "نوع" : "عنوان فرعی 1" ), ( "نام" : "عنصر JSON دو", "نوع" : " زیرنویس 2 " ) ] ))
پس از دریافت چنین کدی، عمل زیر را انجام می دهیم:
var answerdata = eval("(" + Request.responseText + ")")
پس از اجرای این کد، شی در دسترس شما قرار می گیرد داده های پاسخ.
کار با زبان های برنامه نویسی سمت سرور
چنین کاری با کارهای معمول تفاوتی ندارد. برای مثال، من PHP را به عنوان زبان سمت سرور در نظر می‌گیرم. هیچ چیز در سمت کلاینت تغییر نکرده است، اما سمت سرور اکنون با یک فایل PHP نشان داده می شود.
طبق سنت، بیایید با تبریک به دنیای شگفت انگیز خود شروع کنیم:
پژواک "سلام، جهان!"؛
هنگام دسترسی به این فایل، رشته Hello, World به مشتری بازگردانده می شود. همانطور که می دانید، این نشان دهنده گسترده ترین امکانات برای ساخت برنامه های کاربردی است. با ارسال آرگومان ها هنگام فراخوانی سرور با XMLHttpRequest، می توانید خروجی را پارامتری کنید و در نتیجه عملکردی غنی برای برنامه وب ارائه دهید.
به غیر از PHP، از هر زبان برنامه نویسی سمت سرور دیگری می توان استفاده کرد.
AJAX - چیست؟
وقتی فرصت‌های موجود کم باشد و جایی برای بهبود فرصت‌های موجود وجود نداشته باشد، آنگاه یک پیشرفت تکنولوژیکی رخ می‌دهد. چنین پیشرفتی AJAX (جاوا اسکریپت ناهمزمان و XML) است - رویکردی برای ایجاد رابط های کاربری برای برنامه های کاربردی وب، که در آن صفحه وب، بدون بارگیری مجدد، خود داده های مورد نیاز کاربر را بارگیری می کند. AJAX یکی از اجزای مفهوم DHTML است.
چه چیزی این فناوری را به ما می دهد. در حال حاضر، توسعه برنامه های کاربردی وب تمایل دارد بین سمت مشتری و سمت سرور تمایز قائل شود و این دلیل استفاده گسترده از قالب هایی مانند Smarty و XSLT است. پروژه‌ها در حال حاضر پیچیده‌تر می‌شوند و درهم تنیدگی فناوری‌های مختلف برای زمان توسعه‌دهندگان بسیار گران‌تر می‌شود. بنابراین، برای مثال، تمام سبک‌های قالب‌بندی در فایل‌های CSS یا XSL ارائه می‌شوند، داده‌های HTML یا XML در بخش‌های دیگر، کنترل‌کننده‌های سرور در بخش سوم، پایگاه‌های داده در بخش چهارم ذخیره می‌شوند. و اگر 5-6 سال پیش، تقریباً در همه جا می توانستید در هم تنیده شدن همه اینها را در یک فایل ببینید، اکنون به طور فزاینده ای به یک نادر تبدیل می شود.
هنگام توسعه پروژه های پیچیده تر، نیاز به کد ساختاریافته و خوانا وجود دارد. شما نباید کد برنامه نویس را با کد طراح صفحه و کد طراح صفحه را با ویرایش های طراح و غیره پر کنید.
نیاز به تفکیک کار وجود دارد. بنابراین، برای مثال، یک طراح کار خود را انجام می دهد، یک کدنویس کار خود را انجام می دهد، یک برنامه نویس کار خود را انجام می دهد، و در عین حال هیچکس با یکدیگر تداخل نخواهد داشت. در نتیجه، هر شرکت کننده در پروژه فقط باید اطلاعاتی را بداند که باید با آنها کار کند. در این صورت بهره وری گروه و کیفیت پروژه به میزان قابل توجهی افزایش می یابد. در حال حاضر، این مشکل با استفاده از قالب ها با موفقیت حل شده است، اما این نیز مشکلات خاصی را ایجاد می کند، زیرا برای مثال، اتصال Smarty، باید ماژول نرم افزار پردازش قالب را متصل کنید و به وضوح آن را با ساختار پروژه مرتبط کنید. اما این همیشه امکان پذیر نیست و نیاز به هزینه های خاصی دارد. هنگام استفاده از بسته XML + XSL کمی ساده تر است، زیرا آنها گزینه های بیشتری را ارائه می دهند، اما این یک جایگزین است، نه بیشتر. اما اگر به چیزی کاملاً جدید نگاه کنیم، که به ما امکان می دهد با استفاده از امکانات موجود، همه چیز را بهتر ترکیب کنیم، چه؟ سعی کنید جاوا اسکریپتی را تصور کنید که تمام قدرت PHP یا Perl از جمله گرافیک و پایگاه داده را داشته باشد، قابلیت توسعه و کاربرد بسیار بهتری داشته باشد و همچنین کراس پلتفرم باشد.
پس AJAX چیست؟ آژاکس برای اولین بار پس از مقاله فوریه 2005 "بازنگری برنامه های کاربردی وب" توسط جسی جیمز گرت صحبت شد. Ajax یک فناوری مستقل نیست. این یک ایده بر دو اصل اصلی است.
استفاده از DHTML برای تغییر پویا محتوای صفحه.
استفاده از XMLHttpRequest برای پرس و جو از سرور در حال پرواز.
استفاده از این دو رویکرد به شما این امکان را می دهد که رابط های کاربری وب بسیار راحت تری را در صفحاتی از سایت هایی که تعامل فعال با کاربر ضروری است ایجاد کنید. استفاده از Ajax از زمانی که گوگل شروع به استفاده فعال از آن در سایت های خود مانند جی میل، نقشه های گوگل و پیشنهاد گوگل کرد، محبوبیت بیشتری پیدا کرد. ایجاد این سایت ها اثربخشی این رویکرد را تایید کرده است.
بنابراین با جزئیات بیشتر: اگر مدل کلاسیک برنامه WEB را در نظر بگیریم:
مشتری، با تایپ آدرس منبع مورد علاقه خود در نوار جستجو، به سرور می رسد، از آن درخواست می کند. سرور محاسبات را مطابق درخواست انجام می دهد، به پایگاه داده دسترسی پیدا می کند و ... پس از آن داده های دریافتی به مشتری می رود و در صورت نیاز به قالب ها جایگزین می شود و توسط مرورگر پردازش می شود. نتیجه صفحه ای است که می بینیم و 80 درصد جمعیت کشور واقع در وب آن را اینترنت می نامند. این یک مدل کلاسیک است که توانسته خود را ثابت کند و جایگاه افتخاری در زیر نور خورشید کسب کند. این ساده ترین مدل تعامل و در نتیجه رایج ترین است. با این حال، به طور فزاینده ای ناکافی می شود. یک بازی آنلاین "کشتی جنگی" را تصور کنید که توسط دو دوست نابکار - یک ساکن آفریقای جنوبی و یک ساکن ژاپن - بازی می شود. چگونه می توان از چنین مدلی برای لذت بردن هر چه بیشتر بازی آنها استفاده کرد؟ در هر صورت داده های کشتی های غرق شده در سرور ذخیره می شود و برای بررسی اینکه آیا حریف شبیه بوده است، باید هر بار صفحه را به روز کرد و داده های قدیمی را غلیظ کرد. "اما مردم به فکر ذخیره کش افتادند" - می گویید، و کاملاً درست می گویید، اما این کار را آسان تر نمی کند. کش کردن تنها زمان تعامل با سرور را سرعت می بخشد، اما نیازی به بارگذاری مجدد صفحه را از بین نمی برد. از طرف دیگر، می‌توانید زمان مشخصی برای خود به‌روزرسانی تنظیم کنید، اما در این صورت، صفحه کاملاً بارگیری می‌شود.
حال بیایید به مدل تعامل AJAX نگاه کنیم:
توالی اقدامات مشتری ذخیره می شود و او به احتمال زیاد متوجه نخواهد شد که چه اتفاقی خواهد افتاد و کلمه AJAX فقط با نام باشگاه فوتبال همراه خواهد بود. اما در سمت سرور، همه چیز متفاوت به نظر می رسد.
هنگام دسترسی به سرور، صفحه ای ایجاد می شود که به کاربر نمایش داده می شود و به او پیشنهاد می دهد تا دنباله ای از اقدامات مورد علاقه خود را انجام دهد. با انتخاب آگاهانه (البته نه لزوما) مشتری، درخواست او به ماژول AJAX ارجاع می‌شود، که تمام محاسبات مورد علاقه او را انجام می‌دهد و با سرور به این صورت کار می‌کند. اما نوآوری چیست؟ تفاوت اصلی این است که این روش به ما این امکان را می دهد که به صورت پویا به سرور دسترسی داشته باشیم و اقدامات مورد نظر خود را انجام دهیم. به عنوان مثال، ما باید یک فراخوانی از پایگاه داده انجام دهیم و داده های مورد نظر خود را دریافت کنیم که سپس از آنها استفاده خواهیم کرد. ما داده ها را در یک فایل XML که به صورت پویا تولید می شود ذخیره می کنیم، به این ترتیب:
یک شی جاوا اسکریپت جدید ایجاد کنید:
Var req = ActiveXObject جدید ("Microsoft.XMLHTTP"); (برای اینترنت اکسپلورر) var req = new XMLHttpRequest(); (برای هر چیز دیگری)
سپس با استفاده از این شی یک تابع می نویسیم
ورق; تابع loadXMLDoc(url) (// شعبه برای شیء بومی XMLHttpRequest if (window.XMLHttpRequest) ( req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", url, true)؛ req.send( null)؛ // شاخه برای IE/Windows نسخه ActiveX ) other if (window.ActiveXObject) ( req = ActiveXObject جدید ("Microsoft.XMLHTTP")؛ if (req) ( req.onreadystatechange = processReqChange; req.open("GET ", url, true); req.send(); ) ) )
در بدنه فایل HTML، یک اسکریپت می نویسیم که:
تابع checkName(ورودی، پاسخ) ( if (response != "")( // Response mode message = document.getElementById("nameCheckFailed"); if (response == "1")( message. className = "error"; )else( message.className = "مخفی"؛ ) )else( // url حالت ورودی = "http://localhost/xml/checkUserName.php?q=" \\ + ورودی; loadXMLDoc(url); ) )
در فایل localhost/xml/checkUserName.php، داده های دریافتی از خط فرمان را در این مورد در متغیر q پردازش می کنیم. و نتیجه در ساختار XML ذخیره می شود که در همان فایل ذخیره می شود. بنابراین می توانیم داده های دریافتی از پایگاه داده یا چیز دیگری را که نیاز داریم دریافت و پردازش کنیم. علاوه بر این، سرور فقط داده‌هایی را که باید به‌روزرسانی کنیم پردازش می‌کند و در صورت بارگیری مجدد، کل صفحه را پردازش نمی‌کند.
حالا بیایید به دو دوست - عاشقان نبردهای دریایی برگردیم: با توجه به ظاهر این نوآوری، می توانیم موارد زیر را انجام دهیم: هر سه ثانیه از فایل XML را بررسی کنید، این بررسی شامل بررسی پایگاه داده برای یک ورودی جدید است. ، برای حرکتی که حریف انجام داده است. اگر حرکت انجام شود، صفحه بدون بارگیری مجدد کشتی ها را غرق می کند و در نتیجه روحیه شرکت کنندگان در نبردهای آبی را خراب می کند. این قابلیت با استفاده ابتدایی از جاوا اسکریپت و شیوه نامه ها به دست می آید. این مثال کاملا واضح است، اما به دور از کامل بودن، استفاده از این فناوری بسیار مهمتر است.
با این حال، همه چیز به این سادگی نیست. حال بیایید به ویژگی های منفی نگاه کنیم.
اولا، ما فقط می‌توانیم داده‌ها را با استفاده از روش GET انتقال دهیم، بنابراین مقادیر زیادی از داده‌ها باید به حال خود رها شوند. این مشکل بیش از یک بار در منابع مختلف مطرح شده است، اما آقایان، کوکی هایی وجود دارند که در موارد انتقال داده های بزرگ نسبت به درخواست GET کاملاً قابل قبول هستند و جاوا اسکریپت نیز به نوبه خود عملکردهایی برای کار با آنها دارد.
مشکل دوم سازگاری بین مرورگرها است. شی XMLHttpRequest هنوز بخشی از هیچ استانداردی نیست (اگرچه چیزی مشابه قبلاً در مشخصات بارگیری و ذخیره سطح 3 W3C DOM پیشنهاد شده است). بنابراین، دو روش مختلف برای فراخوانی این شی در کد اسکریپت وجود دارد. در اینترنت اکسپلورر، شی ActiveX به صورت زیر فراخوانی می شود:
Var req = ActiveXObject جدید ("Microsoft.XMLHTTP");
در موزیلا و سافاری، این کار آسان‌تر است (زیرا یک شی ساخته شده در جاوا اسکریپت است):
varreq = new XMLHttpRequest();
همه مرورگرهای مدرن از این شی پشتیبانی می کنند و تنها 1.8 درصد از کاربران (طبق آمار SpyLog) که از نسخه های بسیار قدیمی مرورگرهایی که از این شی پشتیبانی نمی کنند استفاده می کنند، با مشکل مواجه خواهند شد.
و در نهایت امنیت. بیایید در این مورد با جزئیات بیشتر صحبت کنیم. مشکل اصلی این است که تمام داده ها و کد منبع توابع جاوا اسکریپت با مشاهده کد منبع صفحه به ترتیب قابل مشاهده است، مهاجم می تواند منطق اجرای پرس و جو را دنبال کند و تحت شرایط خاصی مجموعه دستورات مورد نیاز خود را اجرا کند. . وقتی یک تطبیق ساده داده داریم، این نقش خاصی ندارد، اما در شرایط پیچیده‌تر، مانند مجوز، و نحوه عبور رمزهای عبور در این مورد، چه باید کرد. همانطور که در بالا ذکر شد، کوکی ها به کمک می آیند. داده های لازم را می توان با کمک آنها ارسال کرد و همچنین پردازش کرد. بیایید مثالی بزنیم که در آن کاربر با استفاده از فناوری که مقاله به آن اختصاص داده شده است، احراز هویت می شود.
تولید صفحه، مقادیر منحصر به فردی تولید می کنیم که سپس آن را در متغیرهای سرور قرار می دهیم. و در کوکی های مرورگر، سپس در حین مجوز، نام کاربری و رمز عبور را دریافت می کنیم که باید آنها را به ماژول پردازش در سرور منتقل کنیم.
پس از اینکه کاربر داده‌ها را وارد کرد و روی دکمه ارسال کلیک کرد، رمز عبور او در کوکی‌ها وارد می‌شود و نام کاربری به صورت آشکار - برای مثال از طریق پیوند، منتقل می‌شود. http://www.mubestajax.com/ajax.php?login=pupkinهنگام دریافت داده ها، سرور ابتدا داده های دریافتی را بررسی می کند. از آنجایی که مقادیری که از شروع سرور ایجاد کرده ایم و سپس آنها را به متغیرهای جهانی سرور و کوکی ها ارسال کرده ایم باید مطابقت داشته باشند، پس هنگام بررسی یکپارچگی داده های ارسال شده، در صورت عدم تطابق برنامه از کار می افتد. اگر همه چیز به خوبی پیش رفت، تمام داده های لازم استخراج می شود و محاسبات و کارهای لازم انجام می شود. این روش حفاظتی بسیار ساده و موثر است. اما برای پروژه های بزرگ مناسب نیست.
هنگامی که امنیت مطرح می شود، بهتر است از راه حل های پیچیده تر و قابل اعتمادتر استفاده کنید. اما در بیشتر موارد، این اقدامات احتیاطی بیش از اندازه کافی خواهد بود، زیرا استفاده از ماژول های پیچیده تر مستلزم استفاده از فناوری هایی است که همیشه در نرم افزار استاندارد سرورهای مدرن گنجانده نشده اند، که ویژگی اصلی آن سادگی است. به همین دلیل است که فناوری هایی مانند MySQL و PHP بسیار گسترده شده اند. آنها سهولت کار را با مصرف کم منابع و قابلیت اطمینان کافی فراهم می کنند. و در چارچوب این نرم افزار، راه حل ارائه شده در بالا بهترین تناسب است.
در خاتمه می‌خواهم بگویم که AJAX از یک سو جهشی بزرگ در مهندسی وب است، اما از سوی دیگر، این یک مرحله تکاملی طولانی مدت است که افق‌های جدیدی را در زمینه توسعه نرم‌افزار باز کرده است. . در عین حال ، این فناوری هنوز کاملاً "خام" است ، زیرا استفاده از آن در حال حاضر استثنایی دلپذیر است. اما من مطمئن هستم که همه بیش از یک بار در مورد آن خواهند شنید.
اکثر وب سایت های مدرن از فناوری به نام AJAX برای تعامل سریع و موثر با بازدید کننده استفاده می کنند. AJAX به روشی بسیار محبوب برای دریافت داده ها از سرور در پس زمینه و به روز رسانی پویا صفحه تبدیل شده است.
توسعه کد جاوا اسکریپت برای پیاده سازی AJAX از ابتدا فرآیندی بسیار زمان بر و خسته کننده است. با این حال، بسیاری از کتابخانه‌های جاوا اسکریپت، از جمله jQuery، پیاده‌سازی عالی AJAX در سطح بالایی را در قالب مجموعه‌ای از روش‌ها و عملکردها دارند که ساخت وب‌سایت‌ها را آسان‌تر و سریع‌تر می‌کنند.
در این مجموعه آموزشی، اصول ساخت درخواست های AJAX با jQuery را پوشش خواهیم داد. موضوعات زیر پوشش داده خواهد شد:
- فناوری AJAX چیست؟ چگونه کار می کند؟ مزایای آن چیست؟
- چگونه با jQuery انواع درخواست های AJAX ایجاد کنیم؟
- ارسال داده ها به سرور با استفاده از درخواست های AJAX.
- پردازش و استخراج داده ها از پاسخ های AJAX از سرور.
- چگونه می توان مدیریت AJAX جی کوئری را سفارشی کرد و تنظیمات پیش فرض را تغییر داد؟
توجه: دروس بر روی بخش جاوا اسکریپت سمت کلاینت تمرکز دارد. اما توسعه سمت سرور نیز بسیار ساده است. برای اطلاعات بیشتر، مطالب مربوط به زبان های برنامه نویسی سمت سرور مانند PHP را مطالعه کنید.
AJAX چیست و چرا مفید است؟
AJAX یک تکنیک توسعه برنامه وب است که در آن کد جاوا اسکریپت اجرا شده در مرورگر بازدیدکننده با یک وب سرور به صورت ناهمزمان، یعنی در پس زمینه، ارتباط برقرار می کند. تفاوت برنامه های وب معمولی به شرح زیر است:
- صفحه وب معمولیحاوی پیوندها یا فرم هایی است که وقتی روی آنها کلیک یا ارسال می شود، یک URL جدید در سرور وب درخواست می کند. سرور یک صفحه HTML کاملاً جدید را ارسال می کند، که مرورگر آن را ارائه می دهد و جایگزین صفحه اصلی می شود. این رویکرد زمان زیادی می برد و تأثیر بدی روی بازدیدکننده می گذارد، زیرا باید منتظر بارگذاری صفحه جدید باشد.
- هنگام استفاده از فناوری AJAX،کد جاوا اسکریپت درخواستی را به URL روی سرور ارسال می کند. کد همچنین می تواند داده ها را همراه با درخواست ارسال کند. کد جاوا اسکریپت سپس پاسخ سرور را پردازش می کند و بر اساس آن عمل می کند. به عنوان مثال، محاسبات را می توان با داده های برگشتی انجام داد، ویجت را می توان در صفحه اضافه یا به روز کرد، پیامی در مورد به روز رسانی پایگاه داده در سرور برای بازدید کننده صادر می شود.
از آنجایی که درخواست AJAX در پس‌زمینه اجرا می‌شود، کد جاوا اسکریپت (و بازدیدکننده) می‌توانند در زمانی که درخواست در حال پردازش است به کار روی صفحه ادامه دهند. این فرآیند از دید بازدیدکننده پنهان می شود و نیازی به ترک صفحه ای که در حال حاضر مشاهده می کند نیست. این رویکرد باعث می شود که کار با صفحات AJAX بسیار لذت بخش باشد.
نکته اساسی AJAX شی جاوا اسکریپت XMLHttpRequest است. تعدادی روش مانند open() ، send() و onreadystatechange() را ارائه می دهد که می توانند هنگام ارسال درخواست های AJAX به سرور و پردازش پاسخ ها در پس زمینه استفاده شوند.
توسعه کدهای AJAX جاوا اسکریپت بین مرورگرها می تواند یک فرآیند خسته کننده باشد. خوشبختانه، jQuery چندین روش AJAX با استفاده آسان را در اختیار شما قرار می دهد که به شما امکان می دهد بسیاری از عملیات سطح پایین را انتزاع کنید.
برای کسانی که بیشتر کنجکاو هستند، کلمه AJAX مخفف حروف اول عبارت در انگلیسی است. آهمزمان جی avascript آ nd ایکس ML" (جاوا اسکریپت ناهمزمان و XML). با این حال، این عبارت ممکن است گمراه کننده باشد - درخواست لازم نیست ناهمزمان باشد، و لازم نیست از XML برای ارسال داده استفاده کند.
ایجاد یک درخواست GET با $.get()
متد jQuery $.get() یک راه آسان و راحت برای ایجاد یک درخواست ساده AJAX فراهم می کند. درخواست را با استفاده از روش HTTP GET (که برای دریافت URL هایی مانند صفحات و تصاویر استفاده می شود) به جای روش POST (که به طور سنتی برای ارسال داده های فرم استفاده می شود) انجام می دهد.
در ساده‌ترین شکل آن، می‌توانید متدی مانند زیر را فراخوانی کنید:
جایی که url URL منبعی است که از آن پاسخ انتظار می رود. این معمولاً یک اسکریپت سمت سرور است که اقداماتی را انجام می دهد و ممکن است برخی از داده ها را برگرداند:
$.get("http://example.com/getForecast.php");
اگرچه می توانید یک سند ثابت نیز درخواست کنید:
$.get("http://example.com/mypage.html");
هنگام درخواست URL، می توانید داده ها را همراه با درخواست ارسال کنید. شما می توانید داده ها را در رشته پرس و جو ارسال کنید، درست مانند یک درخواست GET معمولی:
$.get("http://example.com/getForecast.php?city=rome&date=20120318");
درست است که همین کار را با ارسال آبجکت داده به عنوان پارامتر دوم به متد ()$.get انجام دهید. شی داده باید حاوی اطلاعاتی به شکل جفت نام ویژگی/مقدار خاصیت باشد. برای مثال:
var data = (شهر: "رم"، تاریخ: "20120318"); $.get("http://example.com/getForecast.php"، داده)؛
همچنین، می‌توانید داده‌ها را به‌عنوان یک رشته به متد $.get() ارسال کنید:
Var data = "city=rom&date=20120318"; $.get("http://example.com/getForecast.php"، داده)؛
دریافت اطلاعات از سرور
تا کنون، ما فقط نمونه‌هایی از استفاده از $.get() برای ارسال درخواست‌ها به سرور را بررسی کرده‌ایم، بدون توجه به پاسخی که ممکن است یک اسکریپت سمت سرور ایجاد کند. اما در بیشتر موارد، کد جاوا اسکریپت شما منتظر پاسخ یک اسکریپت سمت سرور می ماند و داده های دریافتی را پردازش می کند.
درخواست AJAX ناهمزمان است، به این معنی که در پس‌زمینه اجرا می‌شود در حالی که بقیه کدهای جاوا اسکریپت هنوز در حال اجرا هستند. پس چگونه می توان پس از تکمیل درخواست پاسخی از سرور دریافت کرد؟
باید بنویسی تابع بازگشت، که با تکمیل درخواست AJAX و ارسال پاسخ توسط سرور به طور خودکار اجرا می شود. حداقل، تابع شما باید داده های بازگردانده شده توسط سرور را به عنوان اولین آرگومان خود در نظر بگیرد:
تابع myCallback(returnedData) (// انجام پردازش داده بازگشت داده ها)
هنگامی که تابع callback ایجاد شد، می توانید آن را به عنوان آرگومان سوم به متد $.get() ارسال کنید:
var data = (شهر: "رم"، تاریخ: "20120318"); $.get("http://example.com/getForecast.php"، داده، myCallback)؛
تعیین نوع داده پاسخ
به طور معمول، سمت سرور داده ها را در یکی از چندین فرمت رایج، از جمله XML، JSON، جاوا اسکریپت یا HTML منتقل می کند. به طور پیش فرض، jQuery سعی می کند مناسب ترین فرمت را تعیین کند و داده ها را بر اساس آن تجزیه و تحلیل کند. اما بهتر است فرمت را به صراحت تعریف کنید.
برای تعیین فرمت، آرگومان چهارم باید به متد ()$.get ارسال شود. این آرگومان می تواند رشته ای از لیست زیر باشد:
- "xml"
- "json"
- "اسکریپت"
- "html"
برای مثال، اگر می‌دانید که اسکریپت سرور داده‌ها را با فرمت JSON برمی‌گرداند، متد $.get() را به این صورت فراخوانی کنید:
$.get("http://example.com/getForecast.php"، داده، myCallback، "json");
مثالی از استفاده از متد $.get().
در اینجا مثالی از ایجاد یک درخواست AJAX با استفاده از متد $.get() و مدیریت ساده پاسخ آورده شده است. برای اینکه مثال کار کند، باید یک فایل متنی ساده روی سرور به نام getForecast.txt ایجاد کنید که حاوی متن زیر باشد:
( "شهر": "واسیوکی"، "تاریخ": "18 مارس 2012"، "پیش‌بینی": "سرما شدید و لجن‌بار"، "maxTemp": +1 )
این فایل پاسخ JSON را تقلید می کند که ممکن است توسط یک اسکریپت پیش بینی آب و هوا در سرور ایجاد شده باشد.
سپس صفحه showForecast.html را در همان پوشه getForecast.txt ایجاد می کنیم: