vegUISiteKit - Using the VegUIBridge

The VegUIBridge was originally developed for the original vegUI web-application framework. But it also works stand alone and therefor i could take it over to the VSK package as well. It is the AJAX frame work of vegUI allowing you to send requests to the server and to deal with the server's response.

It also handles time outs and latency (time between request and response) , but more on that further down in the tutorial.

Let's start with the core functionality, sending a request and acting accordingly to a response from the server.

First we need to initialize a new bridge object


In my example the server side action will be handled by a simple php script. We will use it to generate a response for our ajax request. So create a php file and have it echo some random line


Call the file "echo.php" and store it in the directory of your project (the directory where this script will be executed in).

Now, lets request that file using our bridge. We use the bridge's send() method.

Example:


The first argument is the file were requesting, test.php, which should be stored in the same location as the script for this example to work. The second argument would be url / post parameters (a=1&b=2 for example) but we dont need those in this example so we omit it by setting it to null. The third argument is the method of our request, most commonly you will use GET or POST - make sure they are capitalized. The last argument in this example is the function to call when the server response is through.

The function will be a property of the created VegUIRequest object and this.request will point to the actual XMLHttpRequest object that was created and therefor let's us access it's responseText or responseXML properties.

There is also a fifth argument - which i ignored here - that can let you make the request synchronous with the script (SJAX), which you probably wont ever need but it's there anyways.

All arguments are optional except the first one, and if the method argument is omitted it will be set to GET by default. If the pFunc argument is omitted then the bridge's execute() method will attempt to deal with it.

The execute() method can be redefined by you and would be useful if you want to develop your own network protocol to use for your application, but thats too much to cover in this basic tutorial.

So if you run the code above, you should get a pop up message holding the line that the php script echoed.

Toying around

The VegUIRequest object that is created holds two properties that might be of interest to you, the first is timeCreation which holds the time stamp of when the request was created and sent off (ms) and the other is the timeSend property which holds the time it took for the server to respond to the request.

So you could for example do this:


This would alert the time it took for the server to respond to the request.

The bridge itself has a few useful properties as well.

maxSendTime:

maxSendTime allows you to define the time (ms) a single request can take before timing out manually.

maxTimeouts:

maxTimeouts defines how many timeouts can happen continuously before onmaxtimeouts is called

conTimeouts:

conTimeouts holds the current number of continuous timeouts.

sendNum:

sendNum holds the number of requests sent (total)

timeoutNum:

timeoutNum holds the number of timeouts (total)

successNum:

successNum holds the number of successful requests (total). A successful request is a request that received a response from the server.

denyRequests:

You can set the denyRequests property to true in order to keep the send() method from sending any requests. This is useful when max timeouts have occured.

resend

If the resend property is true then requests will be resent on failure.

Dealing with timeouts

The vegUI bridge has several properties to work with connection timeouts. There is the maxSendTime property which can be set to how long a request can take before it is seen as a timeout by the bridge and canceled. The conTimeouts property holds the current amount of continuous timeouts. maxTimeouts defines how many timeouts can happen in a row before the onmaxtimeouts event is fired. The resend property will try to resend any requests that have timed out. There are some other properties which you can read about in the api docs.

There are two events that can help you handle timeouts. The ontimeout event which will fire on every timeout and the onmaxtimeouts event which will only fire if there have been n continues timeouts.

For example you could do something like this:

Sending data with the bridge

In order to send data, like variables to a PHP script you can use the second argument of the bridge's send() method which can hold variables delimited by the & character.

This is similar to submitting url variables but you can omit the starting question mark.


Then within script.php you can access the v variable over the $_GET or $_REQUEST array.

Related Posts

• vegUI Tutorial 16 - The VegUI Bridge

---

Your Comment

name:*
email-address:
Are you human?

Comments

No comments yet.

---