To create (with Ajax) your first live-updated web page, this no less applies. (Of course, these kinds of web pages don't require full page refreshes to change their appearance—familiar, right?)
The chosen web stack also makes its own recommendations. For getting Ajax to work, the elements of complexity include:
- Understanding normally what happens in Ajax on the server and getting that to work, especially in an evolving web stack like Rails. (Googling gives obsolete information.)
- Learning the details of the recommended language for the browser (naturally it gets compiled into Javascript). This is CoffeeScript for Rails now.
- Learning the details of the particular Javascript library; Rails now recommends jQuery.
- Getting from an external server the chosen Javascript library into the browser (which might not be working, giving no sign).
- Learning in the chosen Javascript library (jQuery, e.g.) how to do Ajax.
- Learning in (raw) Javascript how to do Ajax in a combination of browsers (using try-and-catch).
- Learning in (raw) Javascript in a chosen, single browser how to do Ajax (e.g., doing XMLHttpRequest).
- Learning to troubleshoot Javascript in a browser.
- Learning the (browser) Document Object Model.
- Learning Javascript.
Obviously if Ajax isn't working and nothing's happening, one had better remove all possible dimensions and get one thing working at a time!
So I have written a simple Ajax testbed server for the cloud:
- It is always running.
- It is extremely simple.
- It doesn't have to be installed or configured by you.
- It responds absolutely identically to:
- GET and POST requests.
- Header-specified HTML, JSON, XML and JS requests.
- URL extension-specified HTML, JSON, XML and JS requests.
- It simply returns the same JSON no matter what you do.
Here's some browser client code to match (it runs on Mozilla's browsers):
<html> <head>
<title>bare Ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<script type="text/javascript">
<!--
//Browser support code:
function getAjaxObject(){
var result;
try{ //Gecko: Mozilla, Firefox; Webkit: Chrome, Safari; ?: Opera; (etc.?) browsers:
result = new XMLHttpRequest();
} catch (e){ //Internet Explorer browsers:
try{
result = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try{
result = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){ //Something went wrong:
alert('Unable to obtain an Ajax object.');
return false;
}
}
}
return result;
}
//Non-browser support code:
function targetId() {
return 'replaceable';
}
function Target(id) {
this.id = id;
}
function alterTarget(s) {
var target = new Target(targetId());
var elem = document.getElementById(target.id);
elem.innerHTML = s;
}
function requestAjaxUpdate() {
var req = getAjaxObject();
//req.open('GET', 'http://localhost:5000/ajax',false);
req.open('GET', 'http://ajax-testbed-simple.herokuapp.com/ajax',false); //Synchronous.
req.send();
//alert(req.status);
var myJSON = JSON.parse(req.responseText);
var s = myJSON.message;
alert(s);
alterTarget(s);
}
// When the DOM is fully loaded:
window.document.addEventListener('DOMContentLoaded', function() {
//alert('window document ready');
}, false);
// When images, etc. are fully loaded:
window.onload = function() {
//alert('window load');
requestAjaxUpdate();
};
//-->
</script> </head> <body>
<div id="replaceable" >replaceable-content</div>
</body> </html>
References:
http://ajaxpatterns.org/XMLHttpRequest_Call
https://developer.mozilla.org/en/AJAX/Getting_Started
https://developer.mozilla.org/en/DOM/
https://developer.mozilla.org/en/DOM/About_the_Document_Object_Model
https://developer.mozilla.org/en/DOM/DOM_event_reference/DOMContentLoaded
https://developer.mozilla.org/en/DOM/XMLHttpRequest
https://developer.mozilla.org/en/DOM/XMLHttpRequest/Using_XMLHttpRequest
https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/DOM_Events
https://developer.mozilla.org/en/JavaScript/
https://developer.mozilla.org/en/JavaScript/A_re-introduction_to_JavaScript
https://developer.mozilla.org/en/JavaScript/Guide
https://developer.mozilla.org/en/JavaScript/Reference/
https://developer.mozilla.org/en/JavaScript_technologies_overview
https://developer.mozilla.org/en/Server-Side_Access_Control
http://en.wikipedia.org/wiki/Ajax_(programming)
http://en.wikipedia.org/wiki/JSON
http://en.wikipedia.org/wiki/XMLHttpRequest
http://linuxgazette.net/123/smith.html
http://molily.de/weblog/domcontentloaded
http://stackoverflow.com/questions/1457/modify-address-bar-url-in-ajax-app-to-match-current-state
http://stackoverflow.com/questions/6410951/how-to-simplify-render-to-string-in-rails-3
http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_)
http://www.json.org/js.html
http://www.mousewhisperer.co.uk/ajax_page.html
Ajax Tutorial – tizag.com/
http://www.w3.org/TR/XMLHttpRequest/
http://www.w3schools.com/json/default.asp
http://www.w3schools.com/xml/xml_http.asp
http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
Copyright (c) 2012 Mark D. Blackwell.
No comments:
Post a Comment
Thanks for commenting on my post!