Real Ajax - richtiges Ajax

Wer im Visual Studio das UpdatePanel in Verbindung mit Ajax Requests verwendet, weiss oft nicht, dass der eigentliche Traffic, welcher durch Ajax vermindert werden soll, gar nicht im eigentlichen Umfang vermindert wird. Wie kommt das? Das UpdatePanel vom Visual Studio führt immer einen Request der ganzen Seite aus. Gut sichtbar mit dem Firebug vom FireFox. Hier kann man sehen, dass bei einem auslösen eines Request die gesamte Seite neu geladen wird. Nicht so wenn man einen Ajax Request mit einem Webservice kombiniert. Hierbei programmiert man ein JavaScript selbst, das wiederum eine Methode eines Webservice aufruft. Was man auf die Seite einbindet ist der .NET ScriptManager und man führt die selbstgeschriebenen JavaScript Funktionen auf. Wenn man dann die Seite verfolgt sieht man, dass nur ein Request auf die Methode ausgeführt wird.
Im Detail funktioniert das wie folgt:

People, that use the updatepanel for Ajax request in Visual Studio usually do not know, that the traffic, that is supposed to be reduced with Ajax, is not fully reduced. How does this happen? The updatepanel performs always a full page load of the current page using. You can trace this with the FireBug in FireFox. There you can see, that in triggering a request, the whole page is loaded. This is not the case, when you combine self written javascript with a webservice. In this case you develop a javascript on your own, that calls methods of a webservice. What you include in your aspx page is the .NET ScriptManager and you call the self written javascript functions. If you trace this request afterwards you see, that just the requested methods are loaded.
Here is some detailed information on that:

Füge den ScriptManager mit Verweis auf Javascript und Webservice hinzu
Add the ScriptManager with reference to the javascript and webservice
<asp:ScriptManager runat="server" ID="scriptManagerId">
<Scripts>
<asp:ScriptReference Path="MyJavascript.js" />
</Scripts>
<Services> <asp:ServiceReference Path="MyWebservice.asmx" />
</Services>
</asp:ScriptManager>

<asp:Literal ID="output" runat="server" /><br />
<asp:button ID="Button1" onclick="WriteHello()"><br />

Hier ein kurzes "Hello world!" Skript zur Anschauung. Bitte die Funktion im MyJavascript.js speichern
Here a short "hello world!" script to show how it works. Please save this function in the MyJavascript.js file.
function WriteHello()
{
Sample.MyService.WriteHello( SucceededCallback);
}

function SucceededCallback(WriteThis, eventArgs)
{
var OutputElement = document.getElementById("output");
OutputElement.innerHTML = WriteThis;
}

Danach geht es an den Webservice. Hier die Methode einfügen und als MyWebservice.asmx speichern.
Afterwards we create the webservice and enter the method and save it as MyWebservice.asmx.
namespace Sample {
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MyService : System.Web.Services.WebService
{
[WebMethod]
public string WriteHello()
{
return "Hello World!";
}
}
}

Das wars eigentlich. Wenn man auf diese Art und Weise ohne UpdatePanel den Ajax Request startet, sieht man im FireBug, dass nur die Methode geladen wird.
This is basically it. If you now perform the Ajax request without the updatepanel, then you see in FireBug, that just the method is loaded.