Creating a Simple BSP Application Using AJAX

By Suman Kumar Chinnam, YASH Technologies

Summary:

In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the "Submit" button to send/get the information, wait for the server to respond, and then a new page will load with the results.

Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.

With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object

With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.

This Tutorial demonstrates how to use AJAX in BSP for getting the data from server without reloading the entire page and displays the information. 

In this BSP application we will create two BSP Pages; one for providing the data in xml format is called data.xml and another page for calling and displaying the results is called first.htm. 

Create BSP Application and Pages:

1. Create a BSP application using TCODE SE80 with name ZTEST_BSP_AJAX.
2. Right Click on Application choose context create and then Page with name FIRST.htm

Go to layout of page and design the page like below. 

This is a simple page with two elements one is an input field to enter plant and another is text view to display the name of the plant.

When the user inputs data, a function called "getName( )" is executed. The execution of the function is triggered by the "onkeyup" event. In other words: Each time the user moves his finger away from a keyboard key inside the input field, the function getName is called.

If there is some input in the input field the function executes the following:

• Defines the url (filename) to send to the server
• Adds a parameter (plant) to the URL with the content of the input field.
• Opens the XMLHTTP object with the given URL.
• Creates an XMLHTTP object, and tells the object to execute a function called getValue.
• Sends an HTTP request to the server    

The getValue () function executes every time the state of the XMLHTTP object changes.

When the state changes to 4 ("complete"), the content of the text view is filled with the response text.  

3. Create page with name data.xml which retrieves the data and scrambles the XML.

To create XML page give XML extension to the page name.  

Go to layout of page and write the below code.

Declare XML as string in page attributes.  

Now switch to the tab Event handler of page data.xml and write the below code.

Activate the application, to test the application right click on page FIRST.htm choose context Test.

Result:

Enter Plant value we will get the Plant name, no need to press/click any.