The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. September 18, 2019, 12:08:31 AM

Login with username, password and session length


Pages: [1] 2
  Print  
Author Topic: Starting with AJAX  (Read 13451 times)
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« on: April 20, 2007, 01:21:08 PM »

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 tutorial" 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:
Logged

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #1 on: April 20, 2007, 01:35:15 PM »

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 (learned that one the hard way).

When this object is created, at the most basic, you set the url (like "/ajax-handler.php") 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
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« Reply #2 on: April 20, 2007, 02:14:27 PM »

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

http://www.tizag.com/ajaxTutorial/ajaxxmlhttprequest.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 disappear 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 tutorial."

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

<form onSubmit="myAjaxFunction()">

The tutorial 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.
Logged

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #3 on: April 20, 2007, 02:18:54 PM »

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
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #4 on: April 20, 2007, 04:27:40 PM »

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:

Code:
<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="/theAjaxRequestorClassIPostedButIsNowOnYourServer.js"></script>
<script>
myAjax = new ajaxRequestor();

function executeSave()
{
myAjax.postParam('firstname', document.getElementById('firstname').value);
myAjax.postParam('lastname', document.getElementById('lastname').value);
myAjax.onSuccess = handleAjax;
myAjax.execute();
}

function handleAjax(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...)
Code:
<?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
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« Reply #5 on: April 21, 2007, 06:30:25 AM »

Hey perk,

I couldn't find that AjaxRequestor class...

Logged

Will code for food.
nutballs
Administrator
Lifer
*****
Offline Offline

Posts: 5627


Back in my day we had 9 planets


View Profile
« Reply #6 on: April 21, 2007, 08:55:24 AM »

* 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.
Logged

I could eat a bowl of Alphabet Soup and shit a better argument than that.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #7 on: April 21, 2007, 11:24:49 AM »

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"  ROFLMAO
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« Reply #8 on: April 21, 2007, 01:01:22 PM »

There you go hiding stuff again!  D'oh!

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 ajaxrequestor or ajax requestor just returns this thread...not sure why.

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

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #9 on: April 21, 2007, 01:24:01 PM »

Fucking 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  Wink
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« Reply #10 on: April 21, 2007, 01:30:12 PM »

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.
Logged

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #11 on: April 21, 2007, 01:32:53 PM »

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
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« Reply #12 on: April 22, 2007, 08:40:25 AM »

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?
Logged

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #13 on: April 22, 2007, 11:25:42 AM »

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, "handleajax.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 ajaxRequestor();
a.url = '/handleajax.php';
a.onSuccess = clientSideAjaxHandlerFunction; // 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 clientSideAjaxHandlerFunction(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
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
wilsondavid
n00b
*
Offline Offline

Posts: 6


View Profile
« Reply #14 on: December 26, 2011, 06:43:04 AM »

AJAX is stands for Asynchronous Java and XML. It is used to perform your operation without page posting back to server. So the traffic on the WEB is decrease and the performance of the web is increased so much.
Logged
Pages: [1] 2
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!