jquery 3.ایجاکس در

Download Report

Transcript jquery 3.ایجاکس در

‫پروژه درس مهندسی اینترنت‬
‫‪1‬‬
‫استاد مربوطه‪:‬آقای زمانیان‬
‫تهیه کننده‪:‬الدن مداح‬
‫دانشکده برق و کامپیوتر‬
‫بهار ‪92‬‬
‫‪2‬‬
:‫فهرست‬
Jquary.1
Ajax.2
jquery ‫ایجاکس در‬.3
3
‫‪jquary‬‬
‫‪ jQuery‬یک کتابخانه جاوااسکریپت سبک وزن چند مرورگری میباشد که برای‬
‫ساده کردن نوشتن اسکریپهای سمت‪-‬مشتری دراچ تی ام ال (‪ )HTML‬طراحی شده‬
‫است‪.‬جی کوئری امروزه محبوبترین کتابخانه جاوااسکریپت در حال استفاده است‪.‬‬
‫دستور زبان جی کوئری به گونهای طراحی شده است که عمل هدایت یه پرونده را‬
‫اسان تر کرده باشد‪ ،‬بدین صورت که میتوان حرکات انیمیشین ایجاد کرد و‬
‫رویدادهای صفحه استفاده کند ‪.‬‬
‫‪4‬‬
‫جدا از اینها جی کوئری به توسعه دهندگان این اختیار را میدهد که تکه برنامههای‬
‫سطح پایین مبادلهای (ارتباط مرورگر با کاربر) و یا انیمیشنی و حتی افکتهای‬
‫پیشرفته و سطح باال و ایجاد اشیا فرضی را ایجاد کنند‪ .‬به کارگیری همه این اجزای‬
‫جی کوئری کمک میکند صفحات وب قدرتمند و داینامیک (پویا) داشته باشیم‪.‬‬
‫‪5‬‬
‫‪ajax‬‬
‫‪ajax‬یک تکنیک برای جذاب کردن صفحات وب و از طرف دیگر باال بردن سرعت‬
‫بروز رسانی صفحات است‪.‬‬
‫دربازدید از یک صفحه وب با کلیک بر روی هر لینک یا دکمه ای برای تغییر محتوای‬
‫صفحه و یا ارسال یک فیلد به سرور باید تمام صفحه بروز شود و این به معنی‬
‫درخواست تمام عکسها ‪ ,‬لوگوها و کدها از سرور می باشد اما شما با استفاده از این‬
‫تکنیک فقط قسمتهای مورد نیاز را بروز میکنید و برای انجام هر عملیاتی نیاز به بروز‬
‫کردن کل صفحه نیست این کار توسط فناوری ‪ ajax‬انجام میشود‪.‬‬
‫‪6‬‬
7
‫تابع ‪ get‬و ‪: post‬‬
‫;)‪$.post(url,data,callback,type‬‬
‫;)‪$.get(url,data,callback,type‬‬
‫این دو تابع همان طور که از نامشان پیداست با دو متد مختلف ‪ post‬و ‪ get‬اسکریپت‬
‫‪ url‬را از سرور فراخوانی نموده و نتیجه را توسط تابع ‪ callback‬برمیگردانند‪.‬‬
‫آدرس اسکریپتی که سمت سرور باید اجرا شود ‪url :‬‬
‫}…‪ : {name:value,name:value,‬داده هایی که به سرور فرستاده میشود ‪Data :‬‬
‫تابعی است که هنگامی که داده ها از سرور به طور کامل بارگزاری شد ‪Callback :‬‬
‫‪ .‬صدا زده میشود‬
‫نوع داده های خروجی از سرور را مشخص میکند و میتواند مقادیر ‪Type :‬‬
‫)‪(html,xml,json,jasonp,script,text‬باشد‪.‬‬
‫‪8‬‬
‫‪ jQuery‬و ایجاکس ‪:‬‬
‫‪ Jquery‬کتابخانه ای بسیار کارآمد برای کار با تکنولوژی ‪ Ajax‬در خود دارد ‪.‬‬
‫قبل از شروع باید بدانیم ‪ Ajax‬چیست ؟‬
‫‪ Ajax‬مختصر شده عبارت ‪Asynchronous JavaScript and XML‬میباشد ‪ .‬این‬
‫تکنولوژی اولین بار برای استفاده از داده های ‪ Xml‬در جاوا اسکریپت ایجاد شد‪.‬‬
‫‪ Ajax‬یک زبان برنامه نویسی نیست ‪ .‬بلکه تکنولوژی برای ارتباط با سرور از طریق‬
‫جاوااسکریپت و ایجاد صفحات داینامیک میباشد ‪.‬‬
‫هسته اصلی ایجاکس شیی به نام ‪XMLHttpRequest‬می باشد ‪.‬‬
‫بطور مختصر ‪ :‬ایجاکس ارتباط غیر مستقیم و تبادل اطالعات با وب سرور است‬
‫بطوریکه همه چیز در بک گراند اتفاق بیافتد و نتیجه فقط در قسمتی از صفحه نمایش‬
‫یابد بطوریکه کل صفحه نیاز به بازنگری نداشته باشد ‪.‬‬
‫‪9‬‬
‫ایجاکس در ‪: jquery‬‬
‫در ‪ jquery‬توابعی برای کار با ایجاکس وجود دارد که کار را با این تکنولوژی‬
‫بسیار آسان نموده است ‪ .‬توسط این توابع میتوان تبادل اطالعات را با سرور‬
‫بصورت ‪ TXT , HTML , XML‬و ‪ JASON‬و با استفاده از دو متد ‪ GET‬و ‪POST‬‬
‫انجام داد ‪.‬‬
‫و شما میتوانید اطالعات نتیجه که از سرور بدست می آید را در عنصر انتخابی‬
‫(‪ ) selector‬به نمایش در آورید ‪.‬‬
‫‪10‬‬
‫تنها تفاوت این دو تابع در نوع ارسال داده به سرور است که اولی از متد ‪post‬‬
‫استفاده مینماید و دومی از متد ‪ . get‬بنابراین در صورتی که میخواهید فقط فایلی‬
‫را از سرور بازخوانی نمایید و قصد ارسال داده به سرور را ندارید‪ ،‬بهتر است از‬
‫تابع ‪ get‬استفاده نمایید ‪( .‬و یا تابع ‪. ) load‬‬
‫‪11‬‬
12