ترفندهای پیشرفته jQuery (قسمت 22)

- visibility ٢ mode_comment

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم. jquery trickshot

موضوع چهارم : Ajax

ترفند 43 : دسترسی به اطلاعات سایت با YQL

YQL یک API کامل برای توسعه دهندگان Javascript هست. با استفاده از قدرت اون میشه در محیطی شبیه به SQL-Lite با API های دیگه کار کرد. در اینجا میخایم دسترسی به اطلاعات HTML سایت دیگری رو بهتون آموزش بدیم. فرض کنیم میخایم اطلاعات خاصی از سایت فارسیال رو بیرون بکشیم. اگر به این سایت برید صفحه ای همانند تصویر زیر رو میبینید:

farsial.com

فرض کنید میخاید این 5 مورد رو از این صفحه بیرون بکشید. برای اینکار اول روی این موارد Inspect Element میکنیم تا بفهمیم که class و ... اونا چی هست.farsial.com2

همونطور که دیدید همشون در div با کلاس index_facilities قرار دارن. پس برای دسترسی به اونا توسط YQL به شکل زیر عمل میکنیم:

ابتدا متغیر اول رو تعریف میکنیم:

اگر با SQL آشنا باشید دستور بالا رو متوجه خواهید شد. میبینید که گفتیم به url مربوطه برو و چیزایی که درون المنتهای مورد نظر هست رو انتخاب کن. حالا برای اینکه از YQL استفاده کنیم ، باید متغیر بالا رو بصورت زیر بهش پاس بدیم:

حالا از قدرت jQuery و تابع $.getJSON بهره میبریم:

میبیند که متغیر دوم رو به این تابع پاس دادیم و با اینکار نتایج انتخابی در متغیر r ذخیره میشن. حالا میتونین اطلاعات خاصی رو ازش بیرون بکشیم. همونطور که دیدیم از تابع each هم استفاده کردیم و محتوای هر li رو در console چاپ کردیم. خروجی بصورت زیر خواهد بود:

از قدرت YQL میتونین در زمینه های دیگه ای هم استفاده کنید و خودتون میتونین در این زمینه جستجوهای بیشتری انجام بدین.

ترفند 44 : استفاده از متدهای سراسری Ajax

شما میتونین روش انجام درخواست های Ajax توسط برنامتون رو ساده سازی و مدیریت کنید و خودتون رو از شر نوشتن کدهای اضافه خلاص کنید. این کار رو میتونین با استفاده از متدهای سراسری Ajax انجام بدین:

برای مثال میایم یک div میسازیم که درون اون یک لودر قرار داده بشه که نشون بده درخواست Ajax داره اجرا میشه و اونو به body اضافه میکنیم:

بعد از اون هم میخایم کاری کنیم که هر زمانی که یک درخواست Ajax فراخوانی میشه ، لودر نمایش داده بشه:

هر وقت یک درخواست Ajax فرستاده میشه متد ajaxStart فراخوانی میشه و لودر مورد نظر نمایش داده میشه. حالا برای اینکه کاری کنیم وقتی که Ajax به پایان رسید لودر مخفی بشه ، میتونین بصورت زیر عمل کنید:

حالا مثلا برای اینکه این مورد رو تست کنیم ، کد Ajax زیر رو قرار میدیم:

با اینکار بصورت اتوماتیک از زمان آغاز تا 0.8 ثانیه بعد از پایان درخواست Ajax لودر نمایش داده میشه.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

comment دیدگاه کاربران
user 2014

سلام من کد اولی yql رو توی یه صفحه html بین دوتا تگ script گذاشتم ولی کار نمیکنه

محمد اسفندیاری

دوست عزیز چون این کدها از Ajax استفاده میکنن حتما باید بر روی یک سرور مانند Xampp یا Wamp اجرا بشن
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.