AJAX, short for Asynchronous JavaScript and XML, it isn’t a technology but rather a grouping of technologies. AJAX uses a communication technology (typically SOAP and XML) to send and receive an asynchronous request/response to the server, and then leverages presentation technologies (JavaScript, DOM, HTML, and CSS) to process the response. Applications using AJAX are legitimate today, because most browsers support the necessary technology.

First thing we need to do is to import the AJAX namespace from Ajax.DLL.The Ajax namespace contains Ajax.dll encapsulate Asynchronous JavaScript and XML in Bin folder. This is a combination of JavaScript and XML. The data is transferred in the form of XML.

Now we can simply just call the Script Manager Service or ToolKit Script Manager.

Also go into you code behind and import these 2 lines, since we will be using a database we made to pull data from, you will want to import these namespaces. We have included a database to use during the tutorial, feel free to download our source code.

In this tutorial, the only configuration step beyond that is to add the following code in the web.config file, inside the element.

If you have Visual Studio 2008 and above the AJAX Control Toolkit manager will make these changes for you automatically.

In order to make server-side functions available through JavaScript, two things must be done. First, the function or functions in question must be marked with the Ajax.AjaxMethodAttribute. Second, the class containing these functions must be registered through a call to Ajax.Utility.RegisterTypeForAjax during the page load event.

Then we use GetData() even of btnGetData and display() event of DropDownList to do the work. The button btnGetData is an html button, it displays employee data without page post-back. When we choose a particular record in the Dropdownlist, the employee name and employee ID will be displayed in the label.

The front end AjaxDataSearchVB.aspx page looks something like this:
As you can see it’s only a button and Drop Down list, and a label with an error message

Below we added

A button to invoke our button click event.

A simple ASP DropDown List.

Then we added a Label to report to our user that ” No Record was Selected.”

Now we will register ajax in the pageload function, and we will extract the data from the employee table of the database we used for the example. Use the SQLConnection Method to connect to the database.

We have included the database in our source code which is available for download.

Just to simply explain what the code is doing, We Called our ajax functionality in our Page_load, Then connected to our Database using simple SQL commands and then returning results from our employees database. We invoked a try / catch statement to catch return a message that we specified to our label that no record was selected.

And there you have, Your first AJAX application, a simple introduction to get your feet wet.
Remember we included the source file so you may follow along and get your hands dirty with the code.

Download Source Files