Kliento pusės žiniatinklio naudojimas naudojant „JavaScript“ naudojant „jQuery“ ir „Regex“

Kai kūriau savo pirmąjį atvirojo kodo projektą „codeBadges“, maniau, kad bus lengva gauti vartotojo profilio duomenis iš visų pagrindinių kodų mokymosi svetainių.

Aš buvau susipažinęs su API skambučiais ir gavau užklausas. Maniau, kad galėčiau tiesiog naudoti „jQuery“, norėdamas gauti duomenis iš įvairių API ir juos naudoti.

var name = 'codemzy'; $.get('//api.github.com/users/' + name, function(response) { var followers = response.followers;});

Na, tai buvo lengva. Bet paaiškėja, kad ne kiekvienoje svetainėje yra vieša API, kurią galite tiesiog paimti iš norimų duomenų.

Bet tai, kad nėra viešos API, dar nereiškia, kad reikia pasiduoti! Norėdami sugriebti duomenis, galite naudoti žiniatinklio grandymą, atlikdami tik šiek tiek papildomo darbo .

Pažiūrėkime, kaip mes galime naudoti kliento žiniatinklio grandymą naudodami „JavaScript“.

Pavyzdžiui, paimsiu savo vartotojo informaciją iš savo viešojo „freeCodeCamp“ profilio. Bet šiuos veiksmus galite atlikti bet kuriame viešame HTML puslapyje.

Pirmasis duomenų rinkimo žingsnis yra patraukti viso puslapio HTML naudojant „jQuery“ .getužklausą.

var name = "codemzy";$.get('//www.freecodecamp.com/' + name, function(response) { console.log(response);});

Nuostabu, visas puslapio šaltinio kodas tiesiog prisijungė prie konsolės.

Pastaba: jei šiame etape gausite klaidą pagal No ‘Access-Control-Allow-Origin’ header is present on the requested resourcenesijaudink. Slinkite žemyn į šio įrašo skyrių „ Neleisk CORS sustabdyti tavęs“ .

Tai buvo lengva. Naudojant „JavaScript“ ir „jQuery“, aukščiau pateiktas kodas reikalauja puslapio iš www.freecodecamp.org, kaip tai darytų naršyklė. „FreeCodeCamp“ atsako į puslapį. Vietoj to, kad naršyklė paleistų kodą puslapiui rodyti, mes gauname HTML kodą.

Štai kas yra žiniatinklio grandymas, išgaunant duomenis iš svetainių.

Gerai, atsakymas nėra visiškai toks tvarkingas, kaip duomenys, kuriuos gauname iš API.

Bet ... mes turime duomenų, kažkur ten.

Turėdami šaltinio kodą, kuriame yra reikalinga informacija, mes tiesiog turime patraukti reikalingus duomenis!

Mes galime ieškoti atsakymo, norėdami rasti reikalingus elementus.

Tarkime, kad norime sužinoti, kiek iššūkių vartotojas įveikė, atsižvelgiant į atsakymą, kurį gavome iš vartotojo profilio.

Rašymo metu įvykdyti kemperio atlikti iššūkiai yra išdėstyti lentelėse vartotojo profilyje. Taigi, kad gautume bendrą iššūkių skaičių, galime suskaičiuoti eilučių skaičių.

Vienas iš būdų yra apgaubti visą atsakymą „jQuery“ objekte, kad galėtume naudoti „jQuery“ metodus, pavyzdžiui, .find()norėdami gauti duomenis.

// number of challenges completedvar challenges = $(response).find('tbody tr').length;

Tai veikia gerai - mes gauname teisingą rezultatą. Tačiau tai nėra geras būdas pasiekti rezultatą, kurio siekiame. Atsakymą pavertus „jQuery“ objektu, iš tikrųjų įkeliamas visas puslapis, įskaitant visus to puslapio išorinius scenarijus, šriftus ir stiliaus lapus ... O, o!

Mums reikia kelių duomenų bitų. Mums tikrai nereikia įkelti puslapio ir tikrai ne visų su juo susijusių išorinių išteklių.

Mes galėtume ištrinti scenarijaus žymes, o likusį atsakymą paleisti per „jQuery“. Norėdami tai padaryti, galėtume naudoti „Regex“ ieškoti teksto scenarijų šablonų ir juos pašalinti.

Arba dar geriau, kodėl gi ne naudoti „Regex“ norint rasti tai, ko mes pirmiausia ieškome?

// number of challenges completedvar challenges = response.replace(/[\s|\S]*?/g).match(//g).length;

Ir tai veikia! Naudodami aukščiau pateiktą „Regex“ kodą, mes pašaliname lentelės galvučių eilutes (kuriose nebuvo jokių iššūkių), tada suderiname visas lentelių eilutes, kad suskaičiuotume įvykdytų iššūkių skaičių.

Tai dar lengviau, jei norimi duomenys yra tiesiog atsakyme paprastu tekstu. Rašymo metu vartotojo taškai buvo panašūs į HTML

[ 1498 ]

tik laukiu, kol bus nugramdytas.

var points = response.match(/

\[ ([\d]*?) \]/)[1];

Pirmiau pateiktame „Regex“ šablone mes suderiname ieškomą h1 elementą, įskaitant [ ]tašką, kuris supa taškus, ir sugrupuokite bet kurį skaičių viduje. ([\d]*?).Mes gauname masyvą atgal, pirmasis [0]elementas yra visas mačas, o antrasis [1]yra mūsų grupės mačas (mūsų taškai ).

„Regex“ yra naudinga derinant įvairius modelius eilutėse, ir puikiai tinka ieškant mūsų atsakymo, kad gautume reikiamus duomenis.

Galite naudoti tą patį trijų žingsnių procesą, kad nuskaitytumėte profilio duomenis iš įvairių svetainių:

  1. Naudokite kliento „JavaScript“
  2. Naudokite „jQuery“, kad subraižytumėte duomenis
  3. Naudokite „Regex“, jei norite filtruoti duomenis, kad gautumėte reikiamą informaciją

Kol nepataikau į problemą, CORS.

Neleisk CORS tavęs sustabdyti!

CORS arba „Cross-Origin Resource Sharing“ gali būti reali kliento žiniatinklio grandymo problema.

Saugumo sumetimais naršyklės riboja kryžminio pobūdžio HTTP užklausas, inicijuojamas iš scenarijų. Kadangi žiniatinklio sąveikai mes naudojame kliento „Javascript“ iš anksto, gali atsirasti CORS klaidų.

Štai pavyzdys, kai bandoma nuskaityti profilio duomenis iš „CodeWars“ ...

var name = "codemzy";$.get('//www.codewars.com/users/' + name, function(response) { console.log(response);});

Rašymo metu paleidus pirmiau nurodytą kodą, gaunama su CORS susijusi klaida.

Jei nėra Access-Control-Allow-Originantraštės iš tos vietos, kurią nubraukiate, galite susidurti su problemomis.

Blogos naujienos yra tai, kad norėdami išspręsti šią problemą turite paleisti tokio tipo užklausas serverio pusėje.

Ką gi, tai turėtų būti kliento žiniatinklio grandymas ?!

Geros naujienos yra tai, kad daugelio kitų nuostabių kūrėjų, susidūrusių su tomis pačiomis problemomis, dėka jūs neturite patys liesti galinės pusės.

Tvirtai laikydamiesi savo išankstinio scenarijaus, galime naudoti įvairių sričių įrankius, tokius kaip „Any Origin“, „Whatever Origin“, „All Origins“, crossorigin ir tikriausiai daug daugiau. Pastebėjau, kad dažnai reikia išbandyti kelis iš jų, kad rastumėte tą, kuris veiks toje svetainėje, kurią bandote nukopijuoti.

Grįždami į mūsų „CodeWars“ pavyzdį, mes galime išsiųsti užklausą naudodami tarpdomeninį įrankį, kad apeitume CORS problemą.

var name = "codemzy";var url = "//anyorigin.com/go?url=" + encodeURIComponent("//www.codewars.com/users/") + name + "&callback=?";$.get(url, function(response) { console.log(response);});

Kaip ir magija, mes turime savo atsakymą.