SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Location
    London, ON
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question AJAX Help... my first attempt.

    Hello,

    I've been reading up on AJAX quite a bit lately. I bought a book called Head Rush AJAX which has been a useful read. I've also read over the article here that I believe is an extract from SitePoint's AJAX book.

    I currently have information for each project I've completed stored in a database. What I would like to have happen when I launch the new version of my portfolio is to have the information from a particular project showcased.

    From here, I'd like to let the user have the ability to click and choose the particular project they'd like to preview. Through the magic of AJAX I'd like to display a "loading..." image while the asynchronus call is made, and then display the new information.

    My question, being that this is my first stab at AJAX, is:

    - how do I display the loading icon? I'm thinking that in the callback function I could have code that would replace the project info with the loading image if the readyState is anything but 4.

    - what is the best way to return the data from the PHP script? I've read that it can be text, XML, or an object. If its text, can it be HTML code that is returned? I've also read that using innerHTML isn't a great idea, so is it better to access the DOM directly and replace code that way. If it is better this way, how would I structure the response from the PHP script?

    Thanks in advance.
    Ryan Price
    Subscribe to my blog for regular tips and tricks

  2. #2
    SitePoint Addict dek's Avatar
    Join Date
    Oct 2004
    Location
    UK
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no right or wrong way to do this kind of stuff (correction: there's lots of wrong ways, but there's also lots of right ways), so I'm just going to describe my own usual ways.

    Quote Originally Posted by Jeanco
    My question, being that this is my first stab at AJAX, is:

    - how do I display the loading icon? I'm thinking that in the callback function I could have code that would replace the project info with the loading image if the readyState is anything but 4.
    I generally display the loading icon when I first make the AJAX call. My standard thing is to create a transparent div which covers the whole window & prevents the user clicking on any links (transparent gif background to make IE6 do that) - I then put the loading gif in the middle of that. I hide or remove said div in the callback function when readyState reaches 4 (or when I time out the call)
    I do this if I need to, to stop anyone from clicking on any links or controls when the page isn't ready for that yet.

    Quote Originally Posted by Jeanco
    - what is the best way to return the data from the PHP script? I've read that it can be text, XML, or an object. If its text, can it be HTML code that is returned? I've also read that using innerHTML isn't a great idea, so is it better to access the DOM directly and replace code that way. If it is better this way, how would I structure the response from the PHP script?

    Thanks in advance.
    Here we have a lot of different options.
    First off, for returning (and sending) data, I use JSON.
    It's fast, it's compact, and it's easy. I used to use XML, but got fed up with its idiosyncracies. You can use it to encode raw html if you want, so innerHTML use isn't ruled out.

    innerHTML use. There is no problem using this. It's discouraged by some because it's not in any of the standards, but as just about every browser implements it, and half the world uses it, it's a safe bet that it's not going anywhere. And, perversely, it's actually quicker to execute than building up elements with the DOM.
    Of course, equally perversely (considering what I've just said) - I will very often build up results using the DOM. If I have a list of results from a search, for example, sending them sans markup reduces bandwidth, and the JS to build the list is simple. The other reason is that I like to separate concerns (display logic, business logic etc) as much as possible, and so if the AJAX calls are only returning data, the formatting can be attended to elsewhere.
    Only dead fish go with the flow

  3. #3
    SitePoint Addict
    Join Date
    May 2005
    Location
    London, ON
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dek
    I generally display the loading icon when I first make the AJAX call. My standard thing is to create a transparent div which covers the whole window & prevents the user clicking on any links (transparent gif background to make IE6 do that) - I then put the loading gif in the middle of that. I hide or remove said div in the callback function when readyState reaches 4 (or when I time out the call)
    I do this if I need to, to stop anyone from clicking on any links or controls when the page isn't ready for that yet.
    The whole idea of AJAX is to allow users to continue using the site while their request is made... so I'm not sure why you would go about it in this manner.

    Other then that though, I appreciate the detailed response. I took a brief look into JSON and don't think its me just yet - it appears to be need third party files installed, much like a templating engine... something I do not require for such a small task. Thanks again.

    Any other opinions?
    Ryan Price
    Subscribe to my blog for regular tips and tricks

  4. #4
    SitePoint Addict dek's Avatar
    Join Date
    Oct 2004
    Location
    UK
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeanco
    The whole idea of AJAX is to allow users to continue using the site while their request is made... so I'm not sure why you would go about it in this manner.
    Have to disagree with you there (in a small way) - the whole point of AJAX is to allow web pages to exhibit a whole range of extra functionality that wouldn't otherwise be possible. After that, it's down to what you're trying to do.
    Give you an example of when I'd use said functionality - on my home-grown CMS, there's a couple of places where one can regenerate the whole site. For a large site, this can take a while (upwards of 30 seconds) - and it's important to stop the user from doing anything else while that's going on. I don't use it everywhere - but when I do, it's very important.

    Quote Originally Posted by Jeanco
    Other then that though, I appreciate the detailed response. I took a brief look into JSON and don't think its me just yet - it appears to be need third party files installed, much like a templating engine... something I do not require for such a small task. Thanks again.
    You're welcome. It's entirely up to you, but I would suggest looking into JSON a little further before dismissing it. It's actually very simple to use, both at the PHP and JS ends. Whichever way you choose though, best of luck with your project.
    Only dead fish go with the flow

  5. #5
    SitePoint Addict
    Join Date
    May 2005
    Location
    London, ON
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks dek. If I were to look into JSON some more, is there any particular PHP companion you'd recommend along with it? I see that the site has listed a few there. I downloaded one only to find its supposed to be used with Ruby on Rails, which I don't use.
    Ryan Price
    Subscribe to my blog for regular tips and tricks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •