jQuery del 3: jQuery och AJAX med WCF

Kombinationen jQuery och WCF (Windows Communications Foundation) som AJAX-lösning fungerar alldeles utmärkt och ger enkel och ren kod på både klient och serversidan. Den här bloggen handlar om hur man sätter upp detta på ett enkelt och snabbt sätt.

När man skapar en WCF-service fylls web.config på massa onödigt som gör felsökning och ändring svårare än vad det behöver vara, så här följer ett exempel på det minsta behövs för att få AJAX-funktionaliteten att fungera. (Servicen kallas här "Example" och "Namespace" är servicens namespace)

<system.serviceModel>
	<serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
	<services>
	  <service name="Namespace.Example" behaviorConfiguration="ExampleAspNetAjaxBehavior">
		<endpoint address="Ajax" binding="webHttpBinding" contract="Namespace.Example" behaviorConfiguration="ExampleEndpointBehavior" />
	  </service>
	</services>
	<behaviors>
	  <serviceBehaviors>
		<behavior name="ExampleAspNetAjaxBehavior">
		  <serviceMetadata httpGetEnabled="true" />
		  <serviceDebug includeExceptionDetailInFaults="true"/>
		</behavior>
	  </serviceBehaviors>
	  <endpointBehaviors>
		<behavior name="ExampleEndpointBehavior">
		  <webHttp/>
		</behavior>
	  </endpointBehaviors>
	</behaviors>
</system.serviceModel>

Javascript-anropen ser då ut ungefär som nedan i sin enklaste form. Det enda kriteriet är att sidan länkat in den vanliga jQuery-filen (56 kb okomprimerad vilket kommer att cachas efter första sidladdningen), detta i motsats till många andra ramverk som kräver att det laddas in flera JavaScript-filer som sköter snacket med servern.

$.getJSON("/WCF/Example.svc/ajax/GetItem?id=" + id, null, function(data) {
    alert(data); //data är i detta fall en bool så svaret kommer att bli true
});

I svc-filen så måste metoderna som skall användas taggas upp såhär så de serialiseras korrekt till och från json:

[OperationContract]
[WebInvoke(Method="GET", BodyStyle=WebMessageBodyStyle.WrappedRequest, ResponseFormat=WebMessageFormat.Json)]
public bool GetItem(int id)
{
  return true;
}

Givetvis finns det saker som kan strula som t.ex. datum som får ett format som inte är JavaScript-kompatibelt. Lösningen på datumformatet är att man får konvertera detta manuellt innan man använder det.

function parseNetDate(date) 
{
   if (date)
       return new Date(parseInt(date.slice(6, 19)));
     else
       return null;
}

I nästa del, d.v.s. den sista, i jQuery-serien kommer jag att gå igenom några användbara plugins som jag funnit .