Web Servers Succinctly^®
by Marc Clifton

CHAPTER 10

Form Parameters and AJAX

The source code presented in this section is in the folder Examples\Chapter 10 in the Bitbucket repository. The Visual Studio solution file is in the Chapter 10\Clifton.WebServer folder.

Let’s look at a route handler for a common client-side practice: entering data into a form. We can take a couple approaches here. We’ll first look at a form postback, and next we’ll look at an AJAX post and compare the differences.

Form Parameters

We’ll start with a basic login HTML form:

<!DOCTYPE html>

<head>

<title>Login</title>

</head>

<body>

Username: 

</div>

Password: 

</div>

</div>

</form>

</body>

</html>

Code Listing 77

It’s backed by a simple route handler (we’re not actually authenticating the user here):

// Test a form post

routeTable.AddRoute("post", "login", "application/x-www-form-urlencoded", new RouteEntry()

{

RouteHandler = (continuation, context, session, pathParams) =>

{

string data = new StreamReader(context.Request.InputStream,

context.Request.ContentEncoding).ReadToEnd();

context.Redirect("welcome");

return WorkflowState.Done;

}

});

Code Listing 78

Note how here we’re qualifying the same path with the content type. In the AJAX example that follows, we will use the same path, but for JSON content.

When we click on the Login button:

Figure 32: Login

We see that the form parameters are passed in via the request input stream:

Figure 33: Form Parameters

Note how the key in each key-value pair is the value associated with the HTML control’s name attribute.

AJAX Post

We’ll be using jQuery in this example, where we send the username and password as an AJAX POST request:

<!DOCTYPE html>

<head>

<title>AJAX Login</title>

$(document).ready(function () {

$("#btnLogin").click(function () {

$.ajax({

url: “/login”,

async: true,

cache: false,

type: "post",

data: {

username: $("#username").val(),

password: $("#password").val()

success: function (data, status) {

alert(data);

}

});

</script>

</head>

<body>

Username: 

</div>

Password: 

</div>

</div>

</body>

</html>

Code Listing 79

Here the input stream’s parameters are exactly the same as in the from POST request, and are handled by the same route handler.

But let’s put the data into JSON format and specify the content type:

contentType: "application/json",
data: JSON.stringify({

username: $("#username").val(),

password: $("#password").val()

}),

Code Listing 80

We now need a new route handler for the same path (because we declared the URL in the AJAX command), but for a different content type:

// Test a form post with JSON content.

routeTable.AddRoute("post", "login", "application/json; charset=UTF-8", new RouteEntry()

{

RouteHandler = (continuation, context, session, pathParams) =>

{

string data = new StreamReader(context.Request.InputStream, context.Request.ContentEncoding).ReadToEnd();

context.RespondWith("Welcome!");

return WorkflowState.Done;

}

});

Code Listing 81

Here we note that we receive a JSON string:

JSON String

Figure 34: JSON String

The point of bringing this up is that an issue such as using a form post versus an AJAX post or the post data format, while being independent of the server implementation, does impact your web application route handlers. Also, the content type and path, as qualifiers to your route handler, further complicate the design decisions when working with forms, AJAX, and content.

Build apps 2X faster

using Syncfusion Essential Studio^® suite

1800+ high-performance UI components.
Includes popular controls such as Grid, Chart, Scheduler, and more.
24x5 unlimited support by developers.

Get Your Free Trial Now

Form Parameters and AJAX

Form Parameters

AJAX Post

DISCLAIMER: Web reader is currently in beta. Please report any issues through our support system. PDF and Kindle format files are also available for download.