Jump to content

New to AJAX, please advise


ticklejuggle

Recommended Posts

Hello all, thanks up front for reading this.

 

I have found many seemingly simple scripts for making ajax calls, but can't seem to make any of them work. I am pulling out my hair, please tell me what is wrong with this. It is supposed to pass the entered text into an alert box, but when I click submit, I get nothing :(

 

here is the html file:

 

<html>

 

<head>

 

<script type="text/JavaScript">

 

<!--

function ajaxFunction() {

"use strict";

var ajaxRequest;  // The variable that makes Ajax possible!

try {

// Opera 8.0+, Firefox, Safari

ajaxRequest = new XMLHttpRequest();

} catch (e) {

// Internet Explorer Browsers

try {

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

// Something went wrong

alert("Your browser broke!");

return false;

}

}

}

 

}

function ajaxGet() {

var mygetrequest = new ajaxFunction();

var namevalue = encodeURIComponent(document.getElementById("name").value);

var agevalue = encodeURIComponent(document.getElementById("age").value);

mygetrequest.onreadystatechange = function () {

if (mygetrequest.readyState == 4) {

if (mygetrequest.status == 200 || window.location.href.indexOf("http") == -1) {

document.getElementById("result").innerHTML = mygetrequest.responseText;

} else {

alert("An error has occured making the request");

}

}

}

mygetrequest.open("GET", "basicform.php?name="+namevalue+"&age="+agevalue, true);

mygetrequest.send(null);

}

//-->

 

</script>

 

</head>

 

<body>

 

<form method="get" action="">

Your name: <input type="text" id="name" name="name" /> <br />

Your age: <input type="text" id="age" name="age" /> <br />

<input type="button" value="submit" onsubmit="ajaxGet(); return false;" />

</form>

<div id="result"> </div>

 

</body>

 

</html>

 

 

and the php file

 

<?php

$name=htmlspecialchars($_GET['name']);

$name=stripslashes($name);

$age=(int)$_GET['age'];

echo "Welcome <b>$name</b> to TickleJuggle.netne.net! So you're <b>$age</b> years old eh?";

?>

 

test link: ticklejuggle.netne.net *Hosted free at 000webhost.com, I love them :)*

the php file loads see: ticklejuggle.netne.net/basicform.php?name=joe&age=25

 

 

Before you ask why I am not using a framework or library here are the reasons:

 

1. I want to learn this, the old way, for the purpose of learning and my own personal understanding, not to build web pages

2. When I choose a library or framework to use, to build actual web pages, I want to understand how ajax works and what I can reasonably expect it to do, to make an informed decision

3. When building actual applications, debugging will *hopefully* be easier if I understand this, even when using a framework or library

Link to comment
Share on other sites

I have seen this code before and it doesn't work. The

<script type="text/JavaScript">

<!--

 

and the

function ajaxFunction() {

  "use strict";

 

Tells you it's older then the hills. I'd give you my script but you want to learn so try this site https://developer.mozilla.org/en/AJAX/Getting_Started or look at this site http://www.openjs.com/articles/ajax_xmlhttp_using_post.php

 

And when done this is a good reference page https://developer.mozilla.org/en/AJAX

Link to comment
Share on other sites

Thanks for your reply. I did think the script was old, but they all seem to follow that same pattern, so I thought I'd try it...

 

I am fairly new to programming, and I don't really expect to write all my own scripts, but I would like to understand them...So I will definately check those links out!

 

I am finding that there are certain warning signs indicating you should run, when looking at other people's codes, I try to avoid

 

1. Incomplete codes, or codes missing necessary quotation or punctuation marks, obviously untested.

 

2. When the author says "I didn't try this but it should work."

 

3. Any sample codes that use tables to display non-tabular data, yikes!

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.