Thread: Starting with AJAX
cdc

I know I'm about three decades behind, but I finally decided I'm going to

learn

 

AJAX

 . Mostly because whenever I look at job openings they all say you need to know it and I'm considering getting a J.O.B. when I get back to the States. I don't think I could convince them to hire me just because I use Gmail.

Anyway, my first project is pretty simple (which is good thing). I just need to collect some info from the user and then throw it back to the server to send me an email.

I literally know nothing about

AJAX

  (I was sitting down and about to type "

AJAX

 

tutor

 ial" into Google when I got the message from perk about this place) so I may be coming back here with some stupid questions.

Any advice for an

AJAX

  newb is appreciated.  :pary:

perkiset

Ajax

  is actually pretty simple.

On the client side, you instantiate and object that can throw a request up to the server - this is important - the same server, address and protocol that the original page came from ie., if you're ssl, you have to stay ssl (

learn

 ed that one the hard way).

When this object is created, at the most basic, you set the url (like "/

ajax

 -handler.

php

 "Applause and execute it. To the server, it looks like any other page request - you decide what you want to send back and dispatch it.

Now

AJAX

  proper is Asynchronous

Javascript

  and XML - this is a bit complicated for what you are trying to do. I'm going to post my

Ajax

  Requestor object in here later this evening and you'll see how simple it can be. In mine, you set a couple params and off you go. I'm not in love with the notion of "pure XML" as the communication mechanism because I am a "best tool for the job" kinds of guy - so your response from the server could be as simple as "OK" in which case the

Javascript

  could simply be alert('Your personal information has been stolen by me, so there.'). Or something like that.

I'll get at this part tonight and flesh out more of what I am saying, but please throw any specifics about the job up here so that I can respond appropriately.

/p

cdc

Yeah, it doesn't look too bad. I'm looking at this

tutor

 ial:

http://www.tizag.com/

ajax

 

Tutor

 ial/

ajax

 xmlhttprequest.

php

 

It seems pretty good.

I should have also mentioned that I don't know anything about

JavaScript

 , so I have to figure out how the document tree (if that's what it's called; I remember hearing someone talk about a document tree, but they could have been talking about some magic tree or something, I dunno) works.

In the example above they update another one of their form's input fields, but I want the form to disap

pear

  and have it say, "Thanks for your SSN. Please refrain from checking your financial documents for 3 months." or something like that. So I need to figure that part out. Off to Google for "

JavaScript

 

tutor

 ial."

Also, I'm guessing that I just have my form tag look like this:

<form onSubmit="my

Ajax

 Function()">

The

tutor

 ial doesn't do this, but that's what I'm guessing now until I can test it.

I'm not sure why I'm writing all this instead of just testing, which would take 1/1000 of the time. Oh yeah, I'm tired and procrastinating, that's why.

Thanks.

perkiset

You're actually blending in a lot of stuff you don't need there.

I'll show you in JS how to get the form fields as well. Walking the DOM is definitely a second step - if you ever need it. I use it often to great effect, but it is hardly necessary in most applications.

JS is at times a headache, but it is reasonably stable. More in a bit,

/p

perkiset

OK C -

I just posted my

ajax

  requestor in the

Javascript

  board.

Here's a couple things to think about when building this form:
* Use IDs on your form elements rather than NAMEs - names are read by the server when you POST something, IDs are what is used by

Javascript

  functions to get a handle on elements. Consider this:


<html><body>
<input type="text" id="firstname">
<input type="text" id="lastname">
<input type="button" value="Send It!" onClick="executeSave()">
<div id="response">Waiting For Response</div>

<script src="/the

Ajax

 RequestorClassIPostedButIsNowOnYourServer.js"></script>
<script>
my

Ajax

  = new

ajax

 Requestor();

function executeSave()
{
my

Ajax

 .postParam('firstname', document.getElementById('firstname').value);
my

Ajax

 .postParam('lastname', document.getElementById('lastname').value);
my

Ajax

 .onSuccess = handle

Ajax

 ;
my

Ajax

 .execute();
}

function handle

Ajax

 (sender)
{
document.getElementById('response').innerHTML = sender.lastResponse;
}

</script>
</body></html>


This simple example provides a crappy GUI to say the least, but a complete example of how to collect info from a surfer, pop it up to a server and then display the server's response on the page.

Code on the server might look like this: (We need to switch to

PHP

  now...)

<?

php

 
$fName = $_POST['firstname'];
$lName = $_POST['lastname'];

print "Nice to meet you, $fName!";
?>


It's about that simple. Note that there are no libs or anything necessary on the server to deal with the request at all. Of course, you'll want to do DB work or who knows what with the stuff coming from the surfer, but this is just to show you the mechanics of the

AJAX

  call.

/p

cdc

Hey perk,

I couldn't find that

Ajax

 Requestor class...

nutballs

quote author=perkiset link=topic=33.msg115#msg115 date=1177111660

* Use IDs on your form elements rather than NAMEs - names are read by the server when you POST something, IDs are what is used by

Javascript

  functions to get a handle on elements. Consider this:



i didnt know that. LOL
I lernt somtin.

perkiset

Here you go:

http://www.perkiset.org/forum/

javascript

 /

ajax

 _requestor_class-t38.0.html

It's in the Code Repository /

Javascript

  under, cleverly, "

Ajax

  Requestor"  Applause

cdc

There you go hiding stuff again!  Applause

The confusion came because I didn't realize there was a

JavaScript

  code repository board and a

JavaScript

  discussion board. I was looking at the (empty) discussion board.

Also, searching for

ajax

 requestor or

ajax

  requestor just returns this thread...not sure why.

Anyhow, I'll take a look now. Thanks for all the guidance!  :pary:

perkiset

Fishing SMF - it defaults to search *the current board you're looking at* for thangs. So when you searched it only looked in here - if you go Home then search it is the lead entry. Sorry. I'll look into hacking that.

Also - I saw you were in last night WHILE I was changing up the boards - the mods all thought that perhaps the structure was a bit confusing, what with child boards and all... so I seperated out the code repository from discussions. Feedback please, if you feel it is still confusing.

You're welcome btw  Applause

cdc

I blame all my SMF problems on Earl for using it for syndk8 and making me interested enough to try it. He doesn't know it, but I curse him everyday and have pink-thonged voodoo dolls all around my house.

Feel free to follow suit.

perkiset

Feel free to ask here (or pm) what I am doing to hack/protect myself with/from SMF... there are some interesting things that can be done, both for good and evil... I'm not going to post what I am doing publicly.

/p

cdc

I think I'm missing something...

Where do you "register" the

PHP

  script on the server so that the JS knows what to call back to?

perkiset

From the server side, it's just a url... just like a page.

From the client side, the property .url is where you set it. So imagine you have a page on your webserver, "handle

ajax

 .

php

 " - it does a variety of things... it might just return a little html like '<?

php

  echo 'hello world'; ?>.
Nothing more complicated than that.

On the client side you create one of those objects and fire it off like this:
a = new

ajax

 Requestor();
a.url = '/handle

ajax

 .

php

 ';
a.onSuccess = clientSide

Ajax

 HandlerFunction; // NOTE NO PARENS HERE
a.execute();

You will simply need a callback routine on the client to accept the return text from the server - so here it's:
function clientSide

Ajax

 HandlerFunction(sender)
{
      alert(sender.lastResponse);
}

.. note how the name of the function is what I put on the .onSuccess property of the requestor.

here I am simply throwing an alert window up on the screen showing what came back from the server.

Really, nothing more complicated than that...

/p


Perkiset's Place Home   Politics @ Perkiset's