Thomas Sampson


Leave a comment

Javascript Particles!

Saw this over at chrome experiments and had to share (you will need a HTML 5 compliant browser). The Javascript canvas in HTML 5 has extreme potential! This experiment also uses the audio tag to play audio without a plugin. Goodbye flash 🙂

http://9elements.com/io/projects/html5/canvas/

Advertisements


Making Flash and Javascript Communicate

Making actionscript communicate with javascript is something I have achieved before by using the following action

script….

getUrl(“javascript:”+js_code_here);

However today I found a much better way to provide stable communication between the two languages One benefit of the method described here is that it does not make the “link clicked” sound in IE6+ which the getUrl actionscript call will trigger.

http://www.codeproject.com/KB/scripting/ActionScriptJavaScript.aspx


Ajax Capabilities & Limitations

I have no official training or background in using Ajax technology, but do use it quite frequently when building web applications.

So far I have found it most effective when an AJAX call to a web service is triggered by the user. For example, they start typing in a search box and filtered results appear beneath, or perhaps they click “add comment” and that comment is posted asynchronously. This all works well and tidily through one javascript connection object, and never kicks up much of a fuss! However this post is more of a question than a solution.

My question is, what are the best practices to use for making continous timed calls to a web service / database?

I am currently building a web application where real time synchronisation between users is a key feature.

At first I wanted to approach this problem by using a technique whereby the client leaves an open connection to the web service, with the web service hooking this to a thread and delivering updates to the client (which i planned to achieve by sending JSON object code back and fourth). However, I was informed that this approach is not scalable and in-efficient on most web servers so i looked to polling.

The polling system I am now using means that the client will query the web server at (very) regular intervals in order to update the page. However I get problems when im doing a post to the webserver (perhaps posting a comment) and the page is auto polling in the background. I also have the question, how often should I asynchronously query the web server in order to keep efficient? Should I use separate connection objects in javascript to handle posts and queries? (although i dont think multiple http objects is an option in IE7? ).

As I mentioned my reading and study in this area is limited. I appreciate I could find tutorials on line and try and sequentially find information to answer my own questions, but expect that those who have experience can guide me (and other blog readers) on the orthodox way to do things when it comes to asynchronous web technology!

Anyone can appreciate that the technology here is very powerful. Only a few days ago Apple announced mobileMe and me.com which looks incredible, and very fast! A perfect example of the results I am trying to accomplish in my current project.


Ajax Capabilities & Limitations

I have no official training or background in using Ajax technology, but do use it quite frequently when building web applications.

So far I have found it most effective when an AJAX call to a web service is triggered by the user. For example, they start typing in a search box and filtered results appear beneath, or perhaps they click “add comment” and that comment is posted asynchronously. This all works well and tidily through one javascript connection object, and never kicks up much of a fuss! However this post is more of a question than a solution.

My question is, what are the best practices to use for making continous timed calls to a web service / database?

I am currently building a web application where real time synchronisation between users is a key feature.

At first I wanted to approach this problem by using a technique whereby the client leaves an open connection to the web service, with the web service hooking this to a thread and delivering updates to the client (which i planned to achieve by sending JSON object code back and fourth). However, I was informed that this approach is not scalable and in-efficient on most web servers so i looked to polling.

The polling system I am now using means that the client will query the web server at (very) regular intervals in order to update the page. However I get problems when im doing a post to the webserver (perhaps posting a comment) and the page is auto polling in the background. I also have the question, how often should I asynchronously query the web server in order to keep efficient? Should I use separate connection objects in javascript to handle posts and queries? (although i dont think multiple http objects is an option in IE7? ).

As I mentioned my reading and study in this area is limited. I appreciate I could find tutorials on line and try and sequentially find information to answer my own questions, but expect that those who have experience can guide me (and other blog readers) on the orthodox way to do things when it comes to asynchronous web technology!

Anyone can appreciate that the technology here is very powerful. Only a few days ago Apple announced mobileMe and me.com which looks incredible, and very fast! A perfect example of the results I am trying to accomplish in my current project.


Perfect Browser Dimensions Script

var theWidth, theHeight;
// Window dimensions:
if (window.innerWidth) {
theWidth=window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth) {
theWidth=document.documentElement.clientWidth;
}
else if (document.body) {
theWidth=document.body.clientWidth;
}
if (window.innerHeight) {
theHeight=window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight=document.documentElement.clientHeight;
}
else if (document.body) {
theHeight=document.body.clientHeight;
}


Leave a comment

Very good basic AJAX tutorial

simple AJAX tutorial, goes through sending a request to the server (as a querystring) and getting the response text, and applying it to a div tag

http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html

Notes

Create a new XMLHTTP request object named “http”


function createRequestObject() {

var ro;
var browser = navigator.appName;
if(browser == “Microsoft Internet Explorer”){
ro = new ActiveXObject(“Microsoft.XMLHTTP”);
}else{
ro = new XMLHttpRequest();
}
return ro;
}

var http = createRequestObject();

Create a request sender poining it to an aspx page with the querystring “number” and tell it which function to use to handle the request (“handleResponse”)

function sndReq(thenumber) { http.open(‘get’, ‘example1service.aspx?number=’+thenumber);
http.onreadystatechange = handleResponse;
http.send(null);
}

above; the “example1service.aspx” page simply takes the querystring and Response.Write ‘s it* 10 (for example) , also a try/catch for if the data sent was not an integer.

NOTE: the example1service.aspx page has ContentType=”Text” in the header

Create the request handler “handleResponse”, returnpanel is a div tag to recieve the contents of the request.

function handleResponse() {

if(http.readyState == 4){
var response = http.responseText;

document.getElementById(‘returnpanel’).innerHTML = response;

}

}

THE HTML

The HTML is simple a text input field which fires the sndReq() function on the keyup event, sending its own value as an argument , example

onkeyup=”sndReq(form.inputtextbox.value)”

The html also contains the div tag to display the response with id=”returnpanel”