AJAX FTW!!!

[t3hl33td4rg0n]

So I've finally got around to really understanding how AJAX works. A few friends and myself are trying to put a little geek squad type company, since there really isn't much around here. Just about every little corner computer shop has failed, but they all lacked some things. In-home service, computer pickup, good marketing, etc. We plan on competing with Geek Squad and Cox Tech Solutions, directly. What they cant compete, Geek Squad and CTS, is the price... Well, anyway, I've been working on for our phone/dispatch agent, is a nice back-end where the agent can enter and retrieve data quickly, which is our goal. The biggest setback, it needs to be web-based because it will be utilized by field techs remotely via air cards on laptops.

So why not minimize loading times, bandwidth, and page refreshing intervals and use AJAX? Yup, so this is my first production web-app that's really going to use it heavily.

So far the coding has gone well and it works perfect with FF and IE. Fortunately, I tried to produce the issue with FF pulling AJAX data from cache, which appears to have been fixed. I've modified some server-side content without refreshing the page thus far, I have yet to see FF not pull server-side content from the cache, its modified in real-time, which I am glad to say is exactly what I was hoping for; despite the contrary statements from people saying FF will not pull AJAX data properly, grabbing old data instead of seeking new data.

here it is (http://ngzroot.ath.cx/www/xntek/admin/)

Feedback?

[fivefeet8]

Your site doesn't load for me. What datatype are you using for the return data? I've been developing AJAX enabled applications for a year or so and have recently started using JSON data for cross scripting data exchange between PHP/Javascript. What are you using for the AJAX functionality? A custom javascript with direct xmlhttp post/get requests or one of the many javascript toolkits with built in functions for AJAX?

[t3hl33td4rg0n]

Oh sorry, I had my ethernet adapter disabled for a while and forgot... Should be working now.

[Toss3]

It's nice and all, but not very inviting. A normal person would immediately be turned off by the dark colors and "scary" look of the page. Imho it looks more like a clan page than a computer help desk.. :o

[t3hl33td4rg0n]

Your site doesn't load for me. What datatype are you using for the return data?

Just HTML returned from a little php script I made... I haven't setup the db connection yet, but the last echo statement will output the HTML returned to the page.

What are you using for the AJAX functionality? A custom javascript with direct xmlhttp post/get requests or one of the many javascript toolkits with built in functions for AJAX?

I took a simple script I found somewhere from a little tutorial and modified it to my taste. Theres a bit more to it now, just generic xmlhttp using GET. I would like to use POST eventually, but this works for now.

I prefer to make my own stuff, or build from something small like in this case. Sometime in the future I would like to create some modular libraries out of it and make it reusable.

[ViN86]

looks great :D

yea, i really want to learn more about AJAX. i need to get a book and learn java and XML first. i know quite a bit of PHP and how to work with databases, but if i could learn AJAX i could probably increase my site quality quite a bit.

oh one more thing, you have some CSS errors in your page. nothing critical, just an FYI :)

check out the Web Developer Add On for Firefox. works great.

[jcrox]

Looks nice :thumbsup:

As soon as I get done configuring Salesforce.com I get to jump into creating some AJAX applications at work, I can't wait :D

[t3hl33td4rg0n]

It's nice and all, but not very inviting. A normal person would immediately be turned off by the dark colors and "scary" look of the page. Imho it looks more like a clan page than a computer help desk.. :o

This wont be viewed by any customers and we like darker colors, its easier on the eyes.

[fivefeet8]

I took a simple script I found somewhere from a little tutorial and modified it to my taste. Theres a bit more to it now, just generic xmlhttp using GET. I would like to use POST eventually, but this works for now.

I prefer to make my own stuff, or build from something small like in this case. Sometime in the future I would like to create some modular libraries out of it and make it reusable.

That's what I did when I first started doing AJAX development, but as time went on, I simply needed to do things that required me to use more developed libraries as I didn't have the time to really develop my own.

I ended up using the dojotoolkit for my recent projects. The concept of using AJAX for asyncronous post/get is not that hard to implement. It's the data type return that you want and need to use that is the part to consider. I also used a lot of HTML return data as well, but now I've started using JSON data for the data exchange simply because the amount of data being returned was becoming quite large with HTML. And also because newer versions of PHP includes a JSON encoding/decoding extension written in C that is super fast at taking any object in PHP and changing it into a JSON string for echoing back to the javascript.

[t3hl33td4rg0n]

That's what I did when I first started doing AJAX development, but as time went on, I simply needed to do things that required me to use more developed libraries as I didn't have the time to really develop my own.

I ended up using the dojotoolkit for my recent projects.

I believe i've heard of that, luckily for me I have he extra time and no constraints.... I may post the srouce once its a it more mature although my coding can be a bit cryptic, I use very short names for variables and functions. :D

[Monolyth]

That's what I did when I first started doing AJAX development, but as time went on, I simply needed to do things that required me to use more developed libraries as I didn't have the time to really develop my own.

I ended up using the dojotoolkit for my recent projects. The concept of using AJAX for asyncronous post/get is not that hard to implement. It's the data type return that you want and need to use that is the part to consider. I also used a lot of HTML return data as well, but now I've started using JSON data for the data exchange simply because the amount of data being returned was becoming quite large with HTML. And also because newer versions of PHP includes a JSON encoding/decoding extension written in C that is super fast at taking any object in PHP and changing it into a JSON string for echoing back to the javascript.

Aye I developed a generic PHP<->JSON translator a few months ago for a project I was working on using object reflection so it was easier to code my front-ends using the generated JSON structures and the back-end using PHP.

[t3hl33td4rg0n]

Heh, I was just thinking about this a bit earlier. Right now my AJAX handler only spits out some html (element.innerHTML), no DOM... Generated by PHP and thats about it.

I was playing around with the Google Maps API and realized a huge limitation in this method. Maybe you can help me with this....

The ultimate goal here is when a customers information is put in, a google map is created with an automatic route to that address from dispatch will be created. As of now, all it does is center on the map based on the zips lat/long coordinates, which is a plain text property coming from the fxhr.responseText...

Let me see how this could work.....

User input >> XMLHttpRequest (fxhr) >> PHP Script (Make JSON output in plain text and send to fxhr.responseText) >> js script, parse JSON into DOM >> output to targeted elements via JS.

Please tell me if I'm going in the right direction.

[fivefeet8]

User input >> XMLHttpRequest (fxhr) >> PHP Script (Make JSON output in plain text and send to fxhr.responseText) >> js script, parse JSON into DOM >> output to targeted elements via JS.


You'll need to use the Javascript eval(); function to evaluate the JSON string into a javascript object. Essentially, you'll:


// if responseText is {'state':'CA','zip':'93727'}
var jsobj = eval(fxhr.responseText);

// jsobj.state == 'CA'
// jsobj.zip == '93727'


JSON Strings can also evaluate into arrays of variables and objects.

[t3hl33td4rg0n]

I guess I shouldve read more about that in my book. The Javascript book I have mostly covers general DOM stuff, and very little on AJAX XML and JSON.

Actually, that little snippet is the perfect example, thanks! :thumbsup:

[t3hl33td4rg0n]

And also because newer versions of PHP includes a JSON encoding/decoding extension written in C that is super fast at taking any object in PHP and changing it into a JSON string for echoing back to the javascript.

You're referring to?
json_encode($array);

Just looked it up, this is gonna make things much easier! For the past few days I've procrastinating and loathing how everything was going to be compiled and parsed back and forth lol!

[fivefeet8]

You're referring to?
json_encode($array);

Just looked it up, this is gonna make things much easier! For the past few days I've procrastinating and loathing how everything was going to be compiled and parsed back and forth lol!

Yep. That PHP function will encode any array or objects into a JSON string. There was also a php version of the json_encode functions for use in servers which don't have the newest version of PHP installed, but it was far far slower than the C extension. Remember though, that the JSON encoding will only encode data, not functions. Functions do not get encoded back into Javascript object functions.

Also, json_encode will only encode public object variables. Any object variable that is not public will be left out of the encoding.