http://www.udev.info
Mail/Login: Password : forgot my password!
[UPDATE MODE]
Back

HTML Basics part 3 - What is Ajax

Direct link http://www.udev.info/uniface/html-basics-part-3-what-is-ajax
Written by -GHAN- // Tags: ajax usp dsp uniface

Welcome to the third part of my HOW-TO. Its nice to have you back in front of my text and see your eyes run from right to left while I use my coffee breaks to write all this for you, hehe.

In this part I will take a focus on AJAX. We will find out
- what it is
- how we can use it and
- start a first attempt on the voodoo behind RIA

So, what is AJAX anyway?

It stands for Asynchronous JavaScript And XML and is nothing new invented. Mostly it is a set of techniques enabling us to get data from somewhere into the current HMTL Page. All of it is written in JavaScript and has been available since the launch of Microsoft Internet Explorer 4.0.

The inventer of the name "AJAX" is surely unknown but the name became popular after Jesse James Garrett published and used it in his document "Ajax: A New Approach to Web Applications" in February 2005. To finish the historical background I would like to say that AJAX is the key to WEB2.0!

More footage on this is found on Wikipedia.com

Time to reveal what it looks like. I took the HTML code from PART 01 an put some Javascript on it.
SOURCE CODE
Sorry- ... please log-in or register to get this!


You are not supposed to understand all this at this point :) This code shows the HTML from part 01 where we figured how to manipulate the content of tags via JavaScript.

The line with the "innerHTML" puts the string "do as I do!" into content of the <div> tag. Somewhere below there is a line called "function do_ajax()". When called it GETs us data from the address "MY_URL_FROM_SOMEHWERE" (e.g. this could be your Uniface server page) and puts its output to the <div> tag. If all this is a bit blurry at the moment don't hesitate :) Its ok!

But now you know what AJAX looks like ;)

I want you to take this code into your editor. Search and replace the following:

MY_URL_FROM_SOMEWHERE => Path and name to your server page of PART 02 (I called it MYUSP: e.g. "MYUSP.hello_entity")

Afterwards save it and load it into your favorite browser. Try to click on the text "click me!"

If everything worked out, you should see the contents of the entity in your HTML page.

Caveats and a fast check list

- Did your browser complain about "JAVASCRIPT" ERRORS when it opened the page?
- Is uRouter up and running?
- Is it possible to call the server page by hand (like in PART 02)?
- If the assignment file is told to produce a putmess log, what does it say?

I will assume it to work! And my first task is then to tell you:
"CONGRATULATIONS"! You just did your first AJAX WEB2.0 RIA UNIFACE server page by yourself :) Go get the Champaign... awesome!

You should start to play around with your server page and the calling HTML. Make your mind and try out some things! Play and learn how it behaves. To make it a bit easier, I will tweak up the "do_ajax()" thing for you.

Change the function called "do_ajax()" and "show_the_result()" to the following:
SOURCE CODE
Sorry- ... please log-in or register to get this!

Having done so lets you easy do different calls on different urls. The function requires a parameter for the url which in our page looks like:
SOURCE CODE
Sorry- ... please log-in or register to get this!

The function "do_ajax()" needs to know what has to be done. We hereby tell it to GET MYUSP.hello_entity. Later we PUT the result in to the tag with the id "xcontent" (in our page a <div> tag) by calling the function show_the_result. Although this looks good, its still far from being perfect! But NOW you can interact with Uniface in a dynamic way and retrieve data by choice.
All this is basically what happens within a DSP (ok, let me be precise: DSP works with AJAX). The DSP produces a HTML code which then generates AJAX calls to the DSP. The DSP answers and feeds the browser.

HERE we now (can) do the same while we still are in control of what happens (when)!

Conclusion on PART 03

AJAX is a word invented in 2005 describing techniques based upon an JavaScript object called XMLHttp(Request). It looks a bit weird although it's not (...says who? *s*).
Using AJAX and the stuff learned in the previous parts puts us in the situation to take control on dynamic server pages with regular Uniface versions. This lets us reinvent the common USP and catch up to what will be introduced as Uniface dynamic server page.As we learned in Part 01 this has some disadvantages (less triggers) but still it opens up a whole bunch of new options including to have control of what happens in the server page.

Please let me know, if you find some errors :)

Update Note:

Osie found some bugs, so I fixed them :D Big thanks for that :)

Comments

745 view(s) / 2010-02-22 01:50:39 / LAST UPDATED: 2011-09-14 08:05:49