Ajax GET and POST

I’m posting my GET and POST ajax code it will hopefully be useful to some people.

I searched a lot to find some simple code as i didn’t need to validate the forms. So many scripts didn’t work properly or seemed unnecesserily complicated for my requirements.

The code has been adapted from
http://www.w3schools.com/ajax/def

the GET from:
http://www.openjs.com/articles/ajax_xmlhttp_using_post.php

Hope you find this helpful!

//Set up the XMLHttpRequest

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

//THE GET

function getNewContent(){
http.open(‘get’,'newcontent.php’);
http.onreadystatechange = updateNewContent;
http.send(null);
return false;
}

function updateNewContent(){
if(http.readyState == 4){
document.getElementById(‘Content’).innerHTML = http.responseText;
}
}

//THE POST

function postForm() {
var url = “formentry.php”;
var formtag = document.getElementById(‘fmfield’).value;
var params = “newfield=” + formfield;
http.open(“POST”, url, true);

//Send the proper header information along with the request
http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http.setRequestHeader(“Content-length”, params.length);
http.setRequestHeader(“Connection”, “close”);

http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
document.getElementById(‘fomentered’).innerHTML = http.responseText;
document.getElementById(‘fmfield’).value = “”;
}
}
http.send(params);
}

the functions are called through an onclick event
e.g.
GET <a href=”#” onclick=”getNewContent()”>New Content</a>
POST <a href=”#” onclick=”postForm()”><img src=”Submit.gif”></a>

I couldn’t get it to work properly with a button with type image and i wanted an image so i did it with an <a> tag – i think it works with a normal <input type=”button” onclick=”postForm()”> But it won’t work if you have an <input type=”submit”> button.

I am still trying to figure out how to get it to work when the user presses return or enter – it calls the postForm() but refreshes the page.

If any one can help me on this please comment!!

Firebug, Pitfalls and Videos

Decided this is a good place to put notes for my final report – mostly critical evaluation, rather than a word document where i’ll never rememeber the title and end up opening a different one each time, at least here they’re in one place and i can browse through and pick bits out that might be useful.

So firstly testing – i have discovered how useful the firebug extension for firefox is. I’ve had it for ages and never used it but it’s fantastic. I found it particularly useful when developing the Ajax sections of the site as i could tell whether or not the script was making the ajax call and whether the problem was with an other area of the code. It was sometimes one or the other, but then i could fix the relevent bit instead of spending hours just messing around wondering what wasn’t working.

Secondly pitfalls – how did i create them? Basically, in most cases i entered the first tags that came to mind when i thought of the video. I figured that as this would make them the tags that took least cognitive effort to create, this would make it likely that players of the game would also think of the same tags. Some are very basic, some not so. I did watch a couple of videos and come up with tags that were based on objects or words that stood out. This was especially the case for videos in tougher levels where more pitfalls needed to be found.

What criteria did i use to select the videos? A painful process of watching clips, seeing if they made me laugh or at least smile, sometimes then having to rule them out because although the begining was funny it got a bit silly toward the end. I was also careful to avoid videos with strong language, sexual references or violence – so that ruled out half of what i had looked at. I have let the odd mild violence video through – comparable with Tom and Jerry or The Simpsons levels of violence and there is the odd isolated case of strong language. As my demographic age range is over 18’s then i reasoned that the content was suitable for the percieved audience. Some videos aren’t histerically funny, but were ‘nice’ videos, or scary or simply high rated and i was running out of time and patience so they’ve made it in there. 3 of the videos are what 3 very kind people uploaded to my youtube group. If i get more and they are suitable, i will consider adding some extra videos to the game over the next couple of months as it will keep it fresh.

I have one problem left to fix with the game points and the tags not updating from a set timeout function which is frustrating – again it’s because i’m trying to be clever and use ajax! i need to build my admin section and create a questionnairre. i think that’s it i’m so close, i reckon 3 or 4 hurdles to go to the finish line.