Learning AngularJS

http://www.ng-newsletter.com/posts/how-to-learn-angular.html
http://modernweb.com/2014/04/21/mean-stack-a-quick-start-guide

JSONP and jQuery

JSONP (JSON with Padding) provides a method to request data from a server with different domain. Typical web browser prohibit cross domain request due to same origin policy. We can do it without jQuery, but jQuery provides the interface to wrap the underneath details.

There are 3 settings in $.ajax about JSONP
1. dataType: 'jsonp',
Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.

2. jsonp:
Use this setting to change the default callback name ({jsonp}=xxx)

3. jsonpCallback:
Use this setting to define the callback function name (callback={jsonpCallback})

Sample codes:
$.getJSON('http://example.com/get?jsonp=?', function(data) {
  $("#jsondata").text(JSON.stringify(data));
  console.log(data);
});

$.ajax({
    dataType: 'jsonp',
    url: "http://example.com/get",
    success: function (data) {
        // do stuff with data
    }
});

The code to inject information into the DOM still occurs, as does the creation of a callback function. What jQuery does is it adds script tag to the DOM only until the callback (success function) is done executing. The tag is added to the header. It also adds a function to the window object which is called on return. The URL jQuery constructs looks like http://example.com/get?callback=jsonp123456789.

Security
1. We should avoid serving any sensitive data like password, credit card etc personal data from server side jsonp code.
2. We should also avoid any update logic in jsonp server side code.

Reference
http://api.jquery.com/jQuery.ajax/   
http://infoheap.com/jquery-jsonp-cross-domain-ajax/
http://scottseely.com/2010/09/04/how-jsonp-works-and-some-bits-about-implementing-it-in-wcf/

window and document

Information from w3cschool.com
Window object represents an open window in a browser. each frame (iframe) has one additional window. It has properties and methods. Usually the global scope in javascript means this window object.

When an HTML document is loaded into a web browser, it becomes a document object. The document object is the root node of the HTML document and the "owner" of all other nodes: (element nodes, text nodes, attribute nodes, and comment nodes). Document object inherits all properties and methods from the Node object, so many properties and methods make no sense on document object.

The contentWindow property returns the Window object generated by an iframe element.

contentDocument = contentWindow.document
From the DOM iframe element, scripts can get access to the window object of the included HTML page via the contentWindow property. The contentDocument property refers to the document element inside the iframe (this is equivalent to contentWindow.document), but is not supported by Internet Explorer versions before IE8.

DocumentFragment
The createDocumentFragment() method is usefull when you want to extract parts of your document, change, add, or delete, some of the content, and insert it back to your document.

Information from stackoverflow.com discussion
Window is the main JavaScript object root, also can be treated as the root of the document object model. You can access it as window in most of the cases (in the browser);

window.screen is a small information object about physical screen dimension.

window.document or just document is the main object of the visible document object model/DOM.