JQuery və Regex istifadə edərək, JavaScript-lə müştəri tərəfindəki veb qaşqabağı

İlk açıq mənbə proyektimi, codeBadges qurarkən, düşündüm ki, bütün əsas kod öyrənmə saytlarından istifadəçi profil məlumatlarını əldə etmək asan olacaq.

API zəngləri ilə tanış oldum və sorğu aldım. Düşündüm ki, müxtəlif API-lərdən məlumatları götürmək və istifadə etmək üçün jQuery-dən istifadə edə bilərəm.

var name = 'kodemzy'; $ .get ('https://api.github.com/users/' + adı, funksiyası (cavab) {var izləyicilər = cavab.followers;});

Düzdü, bu asan oldu. Ancaq belə çıxır ki, hər veb saytında sadəcə istədiyiniz məlumatları toplaya biləcəyiniz açıq bir API yoxdur.

404: API tapılmadı

Ancaq açıq bir API olmadığı üçün imtina etməyiniz lazım deyil! Məlumatları ələ keçirmək üçün veb kazıma istifadə edə bilərsiniz, yalnız bir az əlavə iş.

JavaScript ilə müştəri tərəfi olan veb kazıma istifadə edə biləcəyimizi görək.

Bir nümunə üçün istifadəçi məlumatlarımı ictimai freeCodeCamp profilimdən götürəcəyəm. Ancaq bu addımları istənilən ictimai HTML səhifəsində istifadə edə bilərsiniz.

Məlumatların cırılmasında ilk addım html-i jQuery .get sorğusundan istifadə edərək tam səhifəni tutmaqdır.

var name = "codemzy"; $ .get ('https://www.freecodecamp.com/' + adı, funksiyası (cavab) {console.log (cavab);});

Zəhmli, bütün səhifə mənbəyi kodu yalnız konsola daxil oldu.

Qeyd: Əgər bu mərhələdə səhv yoxdursa 'Heç bir giriş-nəzarət-icazə verin' başlığı tələb olunan qaynaqda mövcuddur. Bu yazının "CORS-ların səni dayandırmasına icazə verməyin" hissəsinə aşağı diyirləyin.

Bu asan idi. JavaScript və jQuery istifadə edərək, yuxarıda göstərilən kodu brauzer kimi www.freecodecamp.org saytından bir səhifə tələb edir. Və freeCodeCamp səhifə ilə cavab verir. Səhifəni göstərmək üçün kodu işlədən bir brauzer əvəzinə HTML kodunu alırıq.

Və veb-saytlardan məlumat çıxarmaqla veb kazıma budur.

Bəli, cavab bir API-dən geri aldığımız məlumatlar qədər səliqəli deyil.

Ancaq ... bizdə bir məlumat var.

Bizə lazım olan məlumat mənbəyinin kodunu tapdıqdan sonra sadəcə lazım olan məlumatları götürməliyik!

Lazımi elementləri tapmaq üçün cavab vasitəsilə axtarış edə bilərik.

Deyək ki, istifadəçi profilinin cavabından geri qaldığımız istifadəçinin neçə çətinliklə başa vurduğunu bilmək istəyirik.

Yazı zamanı bir kamperin başa çatmış problemləri istifadəçi profilindəki cədvəllərdə təşkil olunur. Beləliklə, problemlərin ümumi sayını başa çatdırmaq üçün sıra sayını saya bilərik.

Bir yolu, bütün cavabı bir jQuery obyektinə bağlamaqdır ki, məlumat almaq üçün .find () kimi jQuery metodlarından istifadə edək.

// başa çatan problemlərin sayı var çətinliklər = $ (cavab) .find ('tbody tr'). uzunluğu;

Bu yaxşı işləyir - düzgün nəticə alırıq. Ancaq bu, əldə etdiyimiz nəticəni əldə etmək üçün yaxşı yol deyil. Cavabı bir jQuery obyektinə çevirmək, əslində bütün səhifəni, o səhifədəki bütün xarici yazıları, şriftləri və üslub cədvəllərini yükləyir ... Uh oh!

Bizə bir neçə bit məlumat lazımdır. Səhifənin yüklənməsinə, əlbəttə ki, bütün xarici mənbələrə ehtiyacımız yoxdur.

Skript etiketlərini kənarlaşdıra bilərik və sonra cavabın qalan hissəsini jQuery vasitəsilə işlədə bilərik. Bunu etmək üçün Regex-dən istifadə edərək mətndəki skript nümunələrini axtarıb onları çıxara bilərik.

Və ya daha yaxşı, niyə ilk növbədə axtardığımızı tapmaq üçün Regex-dən istifadə etməyək?

// başa çatmış problemlərin sayı var çətinliklər = cavab.replace (/ [\ s | \ S] *?  / g) .match (/ /g). uzunluq;

Və işləyir! Yuxarıdakı Regex kodunu istifadə edərək, masanın baş sətirlərini (heç bir çətinlik yaratmadı) kənarlaşdırırıq və tamamlanmış problemlərin sayını hesablamaq üçün bütün masa satırlarını uyğunlaşdırırıq.

İstədiyiniz məlumatların düz mətndəki cavabda olması daha asandır. Yazı zamanı istifadəçi nöqtələri html kimi idi [1498] yalnız qırınmağı gözləyir.

var xal = cavab.match (/ \ [([\ d] *?) \] <\ / h1> /) [1];

Yuxarıdakı Regex nümunəsində nöqtələri əhatə edən [] daxil olmaqla axtardığımız h1 elementə uyğun gəlir və içərisində istənilən sayı ([\ d] *?) Qruplaşdırırıq. Bir sıra geri alırıq, birinci [0] element bütün matç, ikincisi [1] qrup matçımızdır (xallarımız).

Regex, hər növ nümunələri stringsə uyğunlaşdırmaq üçün faydalıdır və ehtiyac duyduğumuz məlumatları əldə etmək üçün cavablarımızla axtarış üçün əladır.

Müxtəlif veb saytlardan profil məlumatlarını silmək üçün eyni 3 addım əməliyyatından istifadə edə bilərsiniz:

  1. Müştəri tərəfi JavaScript istifadə edin
  2. Verilənləri qırmaq üçün jQuery istifadə edin
  3. Müvafiq məlumat üçün məlumatları filtrləmək üçün Regex istifadə edin

Bir problemə çatana qədər CORS.

CORS: Giriş rədd edildi

CORS səni dayandırmasına imkan verməyin!

CORS və ya Cross-Origin Resurs Paylaşımı, müştəri tərəfində olan veb kazıma ilə əsl problem ola bilər.

Təhlükəsizliyə görə brauzerlər skript daxilində başlanan çapraz mənşəli HTTP tələblərini məhdudlaşdırır. Veb qırıntısı üçün ön tərəfdəki müştəri Javascript istifadə etdiyimiz üçün CORS səhvləri baş verə bilər.

Budur CodeWars-dan profil məlumatlarını qırmağa çalışan bir nümunə ...

var name = "codemzy"; $ .get ('https://www.codewars.com/users/' + adı, funksiyası (cavab) {console.log (cavab);});

Yazı zamanı yuxarıdakı kodu işlətmək sizə CORS ilə əlaqəli bir səhv verir.

Sıxdığınız yerdən heç bir əlavəsi yoxlamaq-icazə vermə başlığı yoxdursa, problemlərlə üzləşə bilərsiniz.

Pis xəbər budur ki, bu məsələni həll etmək üçün bu cür sorğuları server tərəfində işlətməlisiniz.

Whaaaaaaaat, bu müştəri tərəfi olan veb kazıma olduğu ehtimal olunur ?!

Yaxşı xəbər budur ki, eyni mövzulara girən bir çox digər gözəl tərtibatçı sayəsində arxa ucun özünə toxunmaq lazım deyil.

Ön son yazılarımızın arxasında möhkəm dayanaraq, istənilən mənşəli, nə olursa olsun, bütün mənşəli, crossorigin və daha çox şey kimi trans-domain alətlərindən istifadə edə bilərik. Qırıntılı olduğunuz saytda işləyəcək birini tapmaq üçün tez-tez bunların bir neçəsini sınamalı olduğunuzu gördüm.

CodeWars nümunəmizə qayıdaraq, sorğumuzu CORS məsələsini keçmək üçün bir domen vasitəsi ilə göndərə bilərik.

var name = "codemzy"; var url = "http://anyorigin.com/go?url=" + encodeURIComponent ("https://www.codewars.com/users/") + adı + "& Çağırış =?"; $ .get (url, funksiya (cavab) {console.log (cavab);});

Həm də sehr kimi, cavabımız da var.