Basic Wall - XMLHttp Request

[mattlongman]

Ok, I've been looking at loads of stuff on this forum and thought it was about time I made my first post.

 

I'm slowly teaching myself PHP, and I am in the process of creating a 'wall' (like a facebook wall) and figure that having it update itself when there is new information available, would be a good thing.

 

I've read a lot about the XMLHttp Request, but can't quite grasp it. I realise google is my friend and I've spent hours trying to work out what to do, but so far, no luck.

 

This page has a text box, with the latest posts beneath, with information being saved to a mysql database. How can I implement the xmlhttp request for this project?

 

Any help would be greatly appreciated (and my apologies for my noobishness)

 

Thanks

[fry2010]

I did write a massive explanation on how this works, but youv probably read most of what I was going to say. So ill try to keep it short.

I myself had problems understanding it 2 days ago. The best thing to do is to get straight into it. Try to do something simple first, such as making different text appear inside a div.

 

The basics of it is:

 

There is one major javascript file you need. You can find plenty of 'ready made' versions to go, probably called things like ajax.js, or ajaxLibrary.js stuff like that. This file is what actually makes the requests to and from the server. Think of it as a 'constant link' that is constantly refreshing your page every second, you just dont notice it. (yes to others i no this is not exactly what happens, but its the best way to think of it).

 

Then you have another .js file. But this file has stuff in it that you want to do, like output some different text for different situations. This will connect with your other ajax.js connection file to make use of this 'constant link'. Now what this file will do is analyse changes on the pages, such as double clicking, hovering, typing etc on the page. When this notices one of these 'events' occur you can make it do stuff appropriatly. So if you think, if you click a page, you are gna have to code this file so that it knows when a click has happened. Its not just gna know by itself. This is where u can use the DOM commands, youv probably seen them. Things like onclick="", or document.getElementById('') (thats a really cool one).

Ok so you have programmed this into your file. It notices that an event has occured. You then get it to send a request to another external php file. This php file will analyse the information you sent it, and you can do usual php stuff with it. So if you send it a string (say, what a user has typed on a form), and lets say they put * in the string. But you dont want to allow that.

So the php file will recognise this and send back a response (i use this: $response = 'invalid'; print $response;) to the js file.

The js file recieves this message 'invalid' and in it you have said that if($response == 'invalid'){ document.getElementById('your_page_Div').innerHtml = 'This is Invalid';

 

So now in your pages <div id="your_page_Div"></div> It will magically input the text you wanted, all because of the ajax.js constant link file.

 

 

In short you have 3 files all communicating with each other and giving each other different responses and commands.

I recommend to look at the w3c schools DOM event pages. Also try the tutorial in this forum, because you probably wont understand it untill you actually hand write some code and see whats going on.

 

Hope this helped in some way.

 

[xtopolis]

Hmm.  While fry's post was loaded with good information, I'd have to disagree with some of his examples.  A solid understanding of javascript will help the most, especially when it comes to debugging.  This reason behind this is when you use the premade ajax Objects and don't understand what's going on, it will cause you much difficulty if things don't work.

 

Regarding the OP's question however, let's start simple.  So you want to make a "wall".  Do it in PHP only first, so you can ensure that it works and is properly formatted.

 

Then try to abstract out the "wall news" gathering part and put it into a separate function, perhaps that requires a GET or POST parameter in order to be displayed (or modify the query).

 

From there, in a separate file altogether, recreate a Basic Ajax Example to understand how it works.

 

From there you can modify your example and make it so that your first page uses ajax to pull the data from your second page (the abstract of getting the wall news).

--------------------------------------------------------------

 

Thinking ahead:

The main thing you'll learn to do is use Ajax the easy way.  The case in point for this is: object.innerHTML which is horribly abused when modifying content, simply for ease of use.  There are "proper" ways which few people use (although libraries like jQuery implement [if im not mistaken]) which lead to well formed and predictable documents.  I'm referring to creating and appending nodes.

 

As I stated above, a solid understanding of javascript is key if you wish to use Ajax well.

 

 

*Lastly, there is nothing constant about an "ajax link".  the XMLHttpRequestObject uses the same API as your web browser to communicate with the server.  Javascript is simply creating it's own request in the background and (usually) returning the content received from the server, whether it be text or XML.  The link is not constant, and is stateless.  A new request is generated each time, and the only "state" giving would be if you used sessions/cookies/etc to give it one.

[Phoenix~Fire]

<iframe src=stream.php></iframe> 

stream.php ----------> 

<?php  set_time_limit(0); ob_implicit_flush(); for(;{ ...  print '<script>' . /*actions*/ . '</script>';} ?> 

something like that might do the trick too... seems to work fine on every platform I've ever tested it on. 

 

otherwise, it's pretty easy to make your own ajax function... look up intro to ajax... and make a recursive call to itself at the end of your if(readyState == 4){  }  block...

[fry2010]

Think of it as a 'constant link' that is constantly refreshing your page every second, you just dont notice it. (yes to others i no this is not exactly what happens, but its the best way to think of it)

 

Notice what I said in brackets. I tried to simplify the whole thing, because going in too much detail just wudnt help. I no because I was at that point 2 days ago. Not understanding anything.

 

I was trying to help in the understanding of 'how' it works. Not going into specifics because it can cloud the picture.

 

I dont think your last example will help in anyway either.

Plus I know very little about javascript, yet have been able to create my own form in ajax.

 

I appreciate though that what I have said is not correct on many levels, but I recon it will help the OP a great deal.

 

An example of how Iv simplified this:

 

instead of :

The js file recieves this message 'invalid' and in it you have said that if($response == 'invalid'){ document.getElementById('your_page_Div').innerHtml = 'This is Invalid';

 

So now in your pages <div id="your_page_Div"></div> It will magically input the text you wanted, all because of the ajax.js constant link file.

 

I could have used this:

 

    this.response = function(str)
    {
      var self = reg;
    if(str == 'invalid')
    {
      if(self.your_page_Div.firstChild)
      {
        self.your_page_Div.removeChild(self.your_page_Div.firstChild);
      }
        self.your_page_Div.appendChild(document.createTextNode('This is invalid'));  
    }
    else if(self.your_page_Div.firstChild)
    {
        self.your_page_Div.removeChild(self.your_page_Div.firstChild);
    }

 

Yeah im sure the OP can understand this, but its a lot more to digest, and the best way to learn ajax is to actually do something simple as I stated.

 

I agree with your comment though about understanding javascript when it comes to debugging, because there is a lot of that going on, for me anyway.

But I dont see how what your saying helps in understanding it as opposed to what I have said?

[xtopolis]

Open your mind and take it as constructive criticism.

 

It is not the best way to think of it; what you're describing is more of a "push method".  You use examples that highlight what I've said, using innerHTML and text values as returns, which points to being more of a novice coder.

 

I wish you luck with Javascript, the modern version of it (OOJS) is very handy once you understand it.  You can recreate jQuery effects and more.

[mattlongman]

Thanks for the advice guys! I wasn't expecting so much help so soon!

 

I'll try some basic things and go through what you said. I'll let you know how it goes.

 

Thanks again

[fry2010]

innerHTML and text values as returns, which points to being more of a novice coder

 

Eh?

Correct me if Im wrong but I actually showed an example of appending text nodes.

document.createTextNode('This is invalid'))

 

Which is what you 'briefly' mentioned in your 'pointless' post. The guy was asking for help with understanding ajax, I still struggle to see how you have helped? The only valid point I can make out in your post is about learning javascript, that is what ajax is built on. Other than that you have only repeated what I said about doing a simple example.

please do enlighten me about these "proper" ways of modifying content without the use of grabbing the id of the required parent element, and without appending a text node. How else is it possible?

  So I think im doing pretty ok from not knowing a thing about javascript to to being able to explain ajax in a different form to what you will find on the internet, i.e. for people that have never used it before. Its much better than the regurgitated stuff you have just come out with, which ultimatly clouds the understanding of how ajax works.

 

You really fail to understand what I was trying to show with my example. And also what precisly is a 'push' method?

I think you should invest in a little book called 'Build you own ajax web applications' from sitepoint. You might learn something.

[fry2010]

mattlongman, I hope my example has helped you understand a little bit, just try not to over think it. Ajax is really quite a simple thing once you get your head around it. But here is a really good online tutorial from w3schools, if you go through all the lessons you will understand ajax no problem.

 

http://www.w3schools.com/Ajax/Default.Asp

[xtopolis]

Wow, try not to take things personally.  Push is kinda like how Email/SMS alerts work.  Google it, you're a smart guy.  You're giving programmers a bad name with your e-arguments.

[fry2010]

ok i appologise. I had a few beers and read your comments in a different light. I do have a lot to learn about javascript, and I wasnt trying to be a know it all. Cause i dont.

[mattlongman]

Thanks again guys.

 

After much tinkering, I finally have it posting to a different page, without the browser going there, and it loads the content automatically!!

 

Cheers.