xml='<invoice date="01-20-2000" number="123">' +
' <address country="US">' +
' <name>John Smith</name>' +
' <street>123 George St.</street>' +
' <city>Mountain View</city>' +
' <state>CA</state>' +
' <zip>94041</zip>' +
' </address>' +
'</invoice>';
invoice = JSOM(xml);
alert(invoice.$number);
alert(invoice.address.name);
overflow: hidden; position:fixed;It is OK if web developer have the total control of the HTML. However, we have web components in .Net and Java Server Face. If such components do not aware of this, user may had a bad experience.
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.setRequestHeader('Content-length', '0');XMLHTTPRequest is the key doing AJAX! The HTTP request is usually uncachable when using POST. Why on earth developers need to code it themselves?To make any design decision, we may highlight the nodes and paths in the graph in top-down manner. For example, in the case of original AJAX defintion, we may hightlight Asychronous, XHR, HTTP/REST, XML, and Client Side Rendering:
The UI update style is undetermined up to this moment. We can make a complete decision before sending the design to programmers. Designers and programmers may have different preference of AJAX approach. With this simple graph, designers can communicate and synchronize with programmers more effectively. The architect can also use the graph to generate the implementation blueprints for programmers to follow so that more maintainable code can be expected.
function y() {
this.x = 0;
this.start = function () {
this.interval = setInterval(this.run, 1000);
};
this.run = function () {
this.x++;
debug(this.x); // or some other things you want to do
};
this.stop = function () {
clearInterval(this.interval);
};
}You may attempt to refer the x in the run() function. However, in JavaScript, the scope of the function becomes the window after running setInterval() (or setTimeout()).function y() {
this.x = 0;
var self;
this.start = function () {
self = this;
this.interval = setInterval(run, 1000);
};
function run() {
self.x++;
debug(self.x);
}
this.stop = function () {
clearInterval(this.interval);
self = undefined;
};
}Since using the self variable will create a cyclic reference, it should be cleaned up properly. Otherwise, the garbage collector of the script interpreter(s) which use(s) reference count will not be able to collect the instance.function y() {
this.x = 0;
this.start = function () {
var self = this;
this.interval = setInterval(function(){ self.run(); }, 1000);
};
this.run = function () {
this.x++;
debug(this.x); // or some other things you want to do
};
this.stop = function () {
clearInterval(this.interval);
};
}
function run1() {
xmlhttp = new XMLHTTPRequest();
xmlhttp.onreadystatechange = processStateChange;
...
}
function processStateChange() {
if (xmlhttp.readyState == 4) ...
}The problem is, when you have many events to handle, the variable xmlhttp in run1 may have assigned to different instances by different functions (e.g. run2, run3, etc). If you rely on this code, no one can gaurentee that your code will run correctly.function run1() {
var xmlhttp = new XMLHTTPRequest();
xmlhttp.onreadystatechange = function() { ... }
}If you insist to write the handle in a function, here is another style of writing it:function run1() {
var xmlhttp = new XMLHTTPRequest();
xmlhttp.onreadystatechange = function() {
processStateChange(xmlhttp);
}
...
}
function processStateChange(xmlhttp) { ... }