|
Beginner's Guide to Ajax
I'm starting to get my feet wet with Ajax, and finding that even I can make it do some pretty neat things. For starters, I'm a good way toward using it to emulate something I'd previously used an iframe for, which is nice since I now get to switch back to a strict doctype instead of frameset.
Now that I've whetted my appetite for Ajax, what's a good way to learn more and take it farther? I don't know much javascript, but I'm getting better with PHP and that seems to help a lot with interpreting js properly. <see also this thread for more details - mod> Back to top |
|||||
|
:: Quote :: what's a good way to learn more and take it farther?Make increasingly complex actions occur. And make sure to post your scripts here so we can check them out ;-). Feel free to post any ajax thing you've done so far too. Speaking only for myself, I'd definitely like to see the type of thing you're doing. I'm assuming that you're handling the MSIE and Standards ajax modes correctly? If I remember right, you need to test for method support for at least two different ajax syntaxes. Ajax is definitely the way forward, iframes have always been problematic. However, equally obviously, since ajax is a client side operation, and brings in new content dynamically, which is cool, that new content won't be available for seo purposes, which depending on the site requirements, might or might not become an issue. Back to top |
|||||
|
Sure, here's what I'm working on so far, cobbled together from two other scripts I found online:
In the <head>: :: Code :: // Ajax form submission
function submitForm() { var http = null; if(window.XMLHttpRequest) http = new XMLHttpRequest(); else if (window.ActiveXObject) http = new ActiveXObject("Microsoft.XMLHTTP"); http.onreadystatechange = function() { if(http.readyState == 4){ var response = http.responseText; var update = new Array(); if(response.indexOf('|' != -1)) { update = response.split('|'); document.getElementById(update[0]).innerHTML = update[1]; } } }; http.open('POST', '/FormProcessor.php', true); http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); http.send("email=" + document.getElementById('email').value); } And in the HTML: :: Code :: <script type="text/javascript">
document.write('<form>'); document.write('<div id="newsletter">'); document.write('<input type="text" name="email" id="email" value="E-mail address">'); document.write('<input type="button" value="Submit" onclick="submitForm();">'); document.write('</div>'); document.write('</form>'); </script> Clicking the "Submit" button (which you'll notice is type="button" instead of type="submit") fires the submitForm() function, which submits the form for processing by the serverside script 'FormProcessor.php.' That script processes the data and returns a line something like this: :: Code :: echo "newsletter|Success or Error Message Goes Here";The javascript then parses the response from the PHP script and writes the content after the '|' to the page element with the ID that matches the part before the '|', which is "newsletter" in this case. Incidentally, you've probably guessed by now that this is the script I was talking about in the other thread, where I need the form to submit when the "Enter" key is pressed. As it sits now, I can't figure that out. It all works very well, the serverside processing is fast enough that the response is pretty much immediate. It's a big improvement over the iframe I had been using to get approximately the same result. One question - this apparently uses ActiveX to for IE. With all the hoopla lately about IE's increased security (don't make me laugh), and more ActiveX warnings in WinXP and/or IE7, is this the type of thing that will be giving scary warnings to my IE visitors? Back to top |
|||||
|
Ok, that was easy:
:: Code :: <script>
// which determines if it's a link/onclick event or not function doit(which) { alert('I did it'); document.getElementById('test').value = 'yippee'; if(which!='link'){return false;} } </script> <form action='one.htm' onsubmit='return doit("submit");' > <input type='text' name='test' id='test'> <input type='button' value='ok' onclick='javascript:doit("link");'> <a href='javascript:doit("link");'>submit</a> </form> that's how you make it submit. This page is one.htm, so it's just submitting to itself. This version lets you submit the form by hitting enter, hitting input button, or clicking on a link. All do the same thing, all seem to only fire the submit one time, I think anyway. As you can see when you run this, it submits to itself, well, actually, you could put anything in there, but keep it clear, it would submit to itself except that the function returns false on submit, so it doesn't submit anywhere, which means hitting enter does nothing except fire the function,. I'm not sure if this will work in combination with your javascript returned headers and post, try it and let me know. It should. Note: if(which!='link'){return false;} Must be the last line in your function, and you must add the parameter 'which' to the function, and add the parameter value 'link' or 'something else' to the function call. 'link' or something else can be anything, doesn't matter, as long as you test for the right value. 'something else' can be ''. Note that this only fires on hitting enter if the form field has focus. I believe this will work, I've tested it and it seems fine. Back to top |
|||||
|
All times are GMT - 8 Hours
|
|||||