Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
http request
protocol
path
parameters
host
data data data
web application servers
Sometimes, the representation (model) of a database does not directly match the constructs of the language in which a web service is written—this is when some type of mapping is necessary, the more automated the better
For example, when an object-oriented language like Java interacts with a relational database like PostgreSQL, it is convenient to have object-relational mapping (ORM): automated or semi-automated conversion between objects and relational constructs (rows, columns, etc.)
Modern database implementations vary widely, ranging from traditional relational database management systems to more recently-developed “big data” or “NoSQL” systems that use alternative and sometimes simpler data models
At this level, the concern is solely the proper management and efficient retrieval of information—major concepts include:
web browsers
Web application servers, as the direct “feeders” of HTML, CSS, JavaScript, and other data to web browsers, typically have the following functionality:
http response
An HTML document is a tree of elements, which are defined using tags or markup
This element tells the browser that the page is in HTML5
CSS consists of rules in curly-brace delimited blocks
The link element associates an HTML page with a CSS file—there may be more than one link element, and they should all be in the head
Some elements stand alone—they have a single tag and typically have a slash as the last character
Proficiency in CSS can be broken down into two areas:
Keep your markup readable by indenting one level for child elements
Each block begins with a selector—this identifies the elements for which the properties within should apply
Some elements have one or more attributes, expressed as a name followed by an equals sign and a value in double-quotes
The script element associates an HTML page with JavaScript code—there may also be more than one script element in the page
The properties are name-value pairs separated by colons; the properties themselves are separated by semicolons
Although script elements may go anywhere, their preferred location is the end of the body—this allows the web browser to display the page before it interprets and executes the JavaScript code
(Note that file references are given in the href attribute for link but in the src attribute for script)
Some elements contain children or text content—they have start and end tags, where the end tag begins with a slash
The top-level element is html, which in turn contains a head and a body—the head then must have at least a meta charset and a title, while the body can have pretty much anything
Many web page development libraries come with CSS—they’ve taken the trouble of defining a visual system for you, so you don’t have to start from scratch
More notes on the sequential execution of script elements
JavaScript code is read and executed in the order that script elements appear
Many scripts require that an entire page be loaded before they can do their job
As much as possible, “wrap” distinct execution units in functions in order to encapsulate variables—remember to call them right away
Many JavaScript libraries (like jQuery) execute code that defines top-level objects which your code can then use (jQuery defines $):
Things to do with JavaScript
But because script elements can appear anywhere, and they are executed as the browser comes across them, it is nice to have a guaranteed mechanism that runs code only when the browser has finished processing a web page
This might be stating the obvious, but what the hey:
jQuery provides a variant for this technique by sending a function into yet another function—the global jQuery object (which has the convenient alias $):
The cycle of displaying a web page, waiting for events to happen, then responding to events in a way that modifies or updates that web page, is a paradigm known as event-driven programming—and the major roles in this cycle consist of the model, the view, and the controller (MVC)…which you have actually already seen…
Two footnotes on this:
Because JavaScript code is read in the order that script elements appear on the web page, references to JavaScript libraries are made before references to code that depends on these libraries (including other libraries)
Instead of multiple parameters, ajax takes a single object whose properties play the role of “arguments” to this function
jQuery provides more than one function for making Ajax connections, varying mainly in terms flexibility and simplicity
In addition to getJSON, jQuery provides get (which can handle non-JSON responses) and post (for sending representations to the web service)
These functions are all “shorthand” for the mother of all Ajax functions, simply known as, well, ajax
At a minimum, getJSON is given the URL to GET, then the function to call upon receiving the response
Because we just came from talking about JSON, let’s start with one of the simpler jQuery Ajax functions: getJSON
getJSON can also be given query parameters—if you have these, supply them as the second argument, between the URL and the success callback
The function to call upon success is known as a callback—this is why the first “A” in Ajax stood for “asynchronous”
This is only a small subset of the full range of settings you can specify for your Ajax call—check the jQuery API documentation to see all of them
Get used to callbacks—they’re everywhere in modern JavaScript
These functions can take certain parameters also—repeat after me: “check the API documentation”
Most of the time, you only care about the first argument to the callback: the data that was returned by the web service
(the meaning of the other two arguments can be found in the jQuery API documentation, though you might be able to guess them based on their names)
As an exercise, try implementing getJSON, get, and post in terms of ajax (they’re called “shorthand” for a reason)
Make sure that you are comfortable with JavaScript’s scoping rules so that you know what your callbacks can or cannot see
http request
query on the collection resource
Multiple strategies have been developed regarding how web service URLs should be formed (the service’s “API,” as they say)
The current best practice is an approach known as REST, short for Representational State Transfer
web service root
collection resource
The primary rules of REST are:
“leaf” resource
Every URL request pertains to the state of that resource at that moment and at that moment only, with the content of the request or response typically transferring a representation of the state of that resource at that time (which is why REST is called REST)
http response
Just as RESTful requests follow certain rules or conventions, RESTful responses do the same:
Typical errors include:
JSON, short for JavaScript Object Notation, is a hugely popular (and very convenient) representation scheme for web service resources—it is none other than a JavaScript literal for objects or arrays:
Coming full circle: we talked about web services because connections to them constitute one of the major activities of JavaScript in a web page
This network activity has a name—Ajax
Square brackets delimit arrays, holding comma-separated lists of typically, but not necessarily, the same type of object or value
Ajax used to be an acronym, but now it is simply the name for what happens when JavaScript code in a web page connects to a web service to acquire or modify information
Like the DOM, there is a “browser-native” way to do Ajax—this would be the XMLHttpRequest object
Unfortunately, doing it this way can be awkward and generate a lot of repeated code
Curly braces delimit objects, which are comma-separated lists of name-and-value pairs—in JSON, names are enclosed in quotes and colons separate names from values
Fortunately, jQuery provides a much cleaner approach to Ajax…and so we go back to JavaScript on the client side (the web browser)
(If you really must know, Ajax used to stand for “Asynchronous JavaScript and XML,” XML being an resource state representation scheme that predates the rise of JSON…you can see now why it’s better to drop the acronym, because “AJAJ” just doesn’t quite have the same ring to it)
The rest of the specifics for what goes into a particular web service’s JSON representations are pretty much up to the web service—thus, that service’s providers must provide good documentation if they expect others to use their API
web services
desktop & mobile
applications
http request
Web services, which handle resource information only, typically provide the following (but also via HTTP request/response):
http response