Etikettarkiv: ajax

Ajax blir sökmotorvänligt

Ajax* är ett samlingsnamn för ett gäng tekniker som webbutvecklare kan använda sig av för att bättra på surfupplevelsen. Det gör det möjligt att ladda nytt innehåll utan att ladda om hela sidan. Används det på rätt sätt så upplevs webbsajten snabbare och kan göras mer lik ett traditionellt program som du kör direkt på din dator (du vet där vi höll till innan vi flyttade oss till molnet). Ajax har fått rejält fotfäste och används ivrigt runt om på nätet, vår kundzon är t ex fullmatad av det.

En gigantisk baksida med tekniken har varit att sökmotorerna inte kunnat indexera Ajax-sidor på ett bra sätt. Och med tanke på hur mycket trafik som drivs genom sökmotorerna vill du ju inte hamna utanför deras synfält.

Nu har dock Google börjat indexera Ajax-sidor för fulla muggar. Riktigt najs – men innan du lutar dig tillbaka och väntar på att din fräcka webbtjänst ska bli indexerad så behöver du kontrollera att du gjort saker på ett sätt som gör Google nöjda. Din kod måste nämligen uppfylla deras villkor för att hamna under luppen. Så surfa först in och kolla deras kom-igång-guide.

Använder du Ajax på din sajt idag? Varför, varför inte?

* Asynchronous JavaScript and XML

Dela: Facebooktwittergoogle_pluslinkedinmail

Snabbaste webbläsaren

Ajax gör det möjligt för webbläsarna att ladda nytt material till sidan utan att hela sidan laddas om. Detta gör att surfupplevelsen blir trevligare och smidigare, men det ställer också krav på att webbläsarna hanterar javascript på ett bra sätt. Användandet av Ajax breder ut sig fort, t ex använder vi oss av en rejäl dos i Loopias nya kundzon, och därför kan prestandaskillnaden bli stor beroende på vilken webbläsare du använder.

Tidigare har Apple Safari och Google Chrome varit de främsta fartmonstrena gällande javascript, men nu kliver den norska uppstickaren Opera om i fartracet – betaversionen av Opera 10.5 tar täten. Den senaste versionen av Firefox (3.6) hanterar också javascript acceptabelt, men den största webbläsaren, Microsoft Internet Explorer, liknar en sengångare i jämförelse. Ytterligare ett argument att överge Windows-tillverkarens internet-utforskare.

Här kan du se resultatet av en mätning som Computer World gjorde i mitten av februari (lägre värde är bättre):

Vi gör fler och fler av våra sysslor direkt i molnet (som det så populärt kallas), och det gör att vi också kommer att ställa högre krav på den webbläsare vi använder. Du som aldrig provat en annan webbläsare än den som var installerad när du fick datorn kan vinna mycket på att ladda ner och prova några alternativ. Alla ovanstående webbläsare är gratis, och finns för Windows och Mac, utom Internet Explorer som bara finns för Windows. Utöver dessa finns det dessutom massor andra webbläsare med unika funktioner och egenskaper för speciella önskemål.

Vilken webbläsare använder du idag och varför?

Dela: Facebooktwittergoogle_pluslinkedinmail

Njut av det förgångna

Att utvecklingen på Internet ständigt går framåt är det nog ganska få som säger emot. Både vad det gäller tekniska lösningar och hur de presenteras rent grafiskt.

Även om jag verkligen uppskattar utvecklingen med större grafiska möjligheter och tekniska lösningar som t ex Ajax som gör upplevelsen på webben mer ”seamless” så är det ju ofantligt roligt att ibland titta tillbaka på det som varit.

Och vad passar då bättre än att söka runt lite på den gamla favoriten Internet archive: Wayback machine?

Visst var loopia.se en skönhet år 2001?! 🙂

Hur har din sajt sett ut genom tiderna? Lägg upp länkar i kommentarerna.

loopia.se_2001

Dela: Facebooktwittergoogle_pluslinkedinmail

Världens bästa påskpyssel med jQuery

Eftersom jag inte fick några kommentarer på min utmärkta SQL-skola så tänkte jag försöka hitta något lite mer hippt och inne att skriva om så här till påskhelgen. 😉

Vad passar då bättre än en artikel om det enormt härliga JavaScript-biblioteket jQuery som på egen hand gjort att klient-baserad programmering på webben har gått från att vara timtal av frustration och nya gråa hårstrån funna under varje kaffepaus, till att frammana mentala bilder av guld, rökelse och myrra.

För att göra det hela ännu roligare så tänkte jag visa hur man på ett enkelt sätt kan använda jQuery för att göra AJAX-baserade sökningar mot en webservice som vi lagt upp så att ni har något att testa mot.

För att använda jQuery så börjar man med att lägga till följande kodsnutt i <head>-sektionen av sitt HTML-dokument:

<script type="text/javascript"
   src="/js/jquery/jquery-1.2.1.min.js">
</script>

En av de fina sakerna med jQuery är alla plugins man kan nyttja. I vårt fall kommer vi använda en plugin som heter jquery.suggest, vilken kräver att man också inkluderar jquery.dimensions.js från jQuery UI, som är ett underprojekt som tillhandahåller en rad med användbara komponenter för att bygga användargränssnitt, så vår kodsnutt för att inkludera allt godis ser ut som:

<link rel="stylesheet" type="text/css"
   href="/js/jquery/jquery.suggest.css" title="" media="screen" />
<script type="text/javascript"
   src="/js/jquery/jquery-1.2.1.min.js">
</script>
<script type="text/javascript"
   src="/js/jquery/jquery.ui-1.0/jquery.dimensions.js">
</script>
<script type="text/javascript"
   src="/js/jquery/jquery.suggest.js">
</script>

För att sedan göra om ett sökfält som har id=”domainsearch” och finns någonstans på vår sida till en AJAX-sökruta så använder vi följande kodsnutt:

$(document).ready(function() {
   $("#domainsearch").suggest("/search.php", {
      onSelect: function() {
         domain = this.value.replace(/^([^:]*):.*$/, "$1");
         status = this.value.replace(/^[^:]*:\s*(.*)$/, "$1");
         if (status == "ledig") {
            document.location.href =
               'https://www.loopia.se/bestall/bestalldoman/'
                  + domain;
         }
      }
   });
});

Detta exempel visar två koncept som är viktiga i jQuery. Först och främst så är det en bra vana att man lägger till den funktionalitet som man vill utöka sidan med på formen:

$(document).ready(function() {
   ... användbar funktionalitet här
});

När man gör på detta sätt så körs inte koden förrän sidan är helt färdigladdad, vilket oftast är önskvärt.

Det andra konceptet som visas upp är användandet av jQuery’s selector-funktionalitet för att välja vilka element som en eller flera funktioner ska appliceras på.

I detta fallet väljer vi att applicara funktionen suggest() på alla element som matchar (med CSS-syntax, se fullständig dokumentation här) #domainsearch, vilket betyder ”alla element med id satt till domainsearch”.

Funktionen suggest (vilket är vad jquery.suggest lägger till) tar en URL som ska anropas med XMLHttpRequest i bakgrunden samt ett antal parametrar, en av vilka är onSelect. onSelect anger vilken JavaScript-funktion som ska anropas när användaren har valt en rad ur sökresultatet.

Sökresultatet består av utmatningen från den anropade URL:en. Utmatningen ska ha en sökträff per rad.

Vi väljer att returnera sökresultat på formen:

doman.se:  ledig
doman.com: upptagen
doman.nu:  ledig

… och anger sedan i onSelect-funktionen att man ska skickas till vår beställningssida med domänen förvald om man väljer en ledig domän från sökresultaten.

För att mata denna lilla kodsnutt med data så använder vi oss av följande PHP-kod (sparad som search.php):

<?
   try {
      $client = new
         SoapClient('http://ws.loopia.se/LoopiaPublicServices.wsdl');

      $results = $client->search_domain_popular_tlds($_GET['q']);
         if ($results && count($results) > 0) {
            foreach ($results as $result) {
               if ($result->result == "FREE") {
                  echo $result->domain . ": ledig\n";
               } else {
                  echo $result->domain . ": upptagen\n";
               }
            }
         }
      } catch (Exception $e) {
         // Ignore exceptions, this simply means that no
         // results will be echoed to the user.
      }
?>

Ni kan ladda ned ett fullständigt exempel som bör fungera om ni bara packar upp det och laddar upp det i public_html för en domän eller subdomän hos oss.

Exemplet hittar ni också på http://sigint.se/.

Vad kan man mer göra med jQuery då? Ett vanligt användningsområde för JavaScript är att dölja och visa element när användaren gör något, t ex klickar på en knapp.

Istället för att böka med kod som:

var element = document.getElementById('someid');
if (element != null) {
	element.style.display = "none";
}

… och kämpa för att sedan få den att fungera i alla moderna webbläsare så använder man istället:

$("#someid").hide();
$("#someid").show();
$("#someid").toggle();

… med mera.

På så sätt kan man naturligtvis även använda andra selectors som t ex för class och mycket annat användbart.

Så gott som alla funktioner i jQuery, inklusive de ovan, returnerar ett nytt jQuery-object – så det går bra att kedja anropen om man vill göra flera saker med samma element. T ex:

$("#someid").fadeIn("slow").fadeOut("slow");

Vi har inkluderat lite test-animationer i exempelfilen ovan.

Hoppas att detta gett er lite kul inspiration att leka med över ledigheten.

Glad påsk!

Dela: Facebooktwittergoogle_pluslinkedinmail