New version page

SDSU CS 696 - Ajax & Node.js

Upgrade to remove ads

This preview shows page 1-2-3-24-25-26 out of 26 pages.

Save
View Full Document
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience

Upgrade to remove ads
Unformatted text preview:

CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 13 Ajax & Node.jsMar 8, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Tuesday, March 8, 2011References2jQuery Documentation, http://api.jquery.com/jQuery.get/Ajax Programming, http://en.wikipedia.org/wiki/Ajax_(programming)XMLHttprequest, http://en.wikipedia.org/wiki/XMLHttpRequestNode.js Documentation, http://nodejs.org/docs/v0.4.2/api/Up and Running with Node.js, Tom Hughes-Croucher, http://ofps.oreilly.com/titles/9781449398583/index.htmlWikipedia, as noted on individual slidesTuesday, March 8, 2011Data3Many Web and Mobile Apps require data from serverPhoneGap does not provide direct access to network socketHow to get data from serverTuesday, March 8, 2011Ajax4Asynchronous JavaScript and XMLInitially Ajax used:HTML and CSS PresentationDOM Dynamic display of dataXML Encoding dataXMLHttpRequestAsynchronous communicationJavaScriptProgram logicTuesday, March 8, 2011http://en.wikipedia.org/wiki/Ajax_(programming)XMLHttpRequest5Makes http/https request to server without loading new pageUsed to getWeb page (html)Media (images, sound, video)Data (xml, json)code (scripts)Tuesday, March 8, 2011JSON - JavaScript Object Notation6Created as alternative to XML for transmitting data between server and web browserJSON parsers exist in over 40 languagesJSON data typestruefalsenull"strings"12.345 (numbers)1212.3e12arraysobjectsarray[12, "cat", true]["this", "is", "an array"]object{"key":"value"}{"name":"Roger", "age": 12}{"colors: ["red","black", "blue"]}Tuesday, March 8, 2011JQuery XMLHttpRequest Shortcuts7jQuery.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )Supports get and posturl - were to send the requestdata - map or string sent to serversuccess(data, textStatus, jqXHR) - function called with result of requestdata - data returned by servertextStatus - jqXHR - superset of XMLHttpRequest object dataType - type of data requested, optionalxml, json, script, htmlTuesday, March 8, 2011Equivalent Versions8jQuery.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )$.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )$.ajax({ url: url, data: data, success: success, dataType: dataType});Tuesday, March 8, 2011Example9$.get('ajax/test.html', function(data) { $('.result').html(data); alert('Load was performed.');});Tuesday, March 8, 2011Sample Requests & Server10$.get('http://127.0.0.1:8000/test', { name: "John", time: "2pm" });http://127.0.0.1:8000/test?name=John&time=2pm$.get('http://127.0.0.1:8000/test', { 'choices[]': ["Jon", "Susan"]} );http://127.0.0.1:8000/test?choices%5B%5D=Jon&choices%5B%5D=Susan$.get('http://127.0.0.1:8000/test', "cat");http://127.0.0.1:8000/test?catTuesday, March 8, 2011%5B%5D = [] but is url encodedServer - Handling Requests11There are many different systems to handle web requestsphp18+ frameworks.net7+ frameworksperl6+ frameworksJava34+ frameworksRuby6+ frameworksPython15+ frameworksSeaside (Smalltalk)Kepler (Lua)Lift (Scala)Nitrogen (Erlang)etcTuesday, March 8, 2011http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworksNode.js12JavaScript on desktop/server sideEvent-driven non-blocking I/O frameworkScalable network programs Uses Googles V8 JavaScript EngineCompiles JavaScript to machine codeUsed in HP's WebOS Phones and tablets http://nodejs.org/Tuesday, March 8, 2011Up and Running with Node.js13Early draft of Node.js book by Tom Hughes-Croucherhttp://ofps.oreilly.com/titles/9781449398583/index.htmlTuesday, March 8, 2011Delays in I/O14To read a file with blocking I/OGet File descriptor from file name"Open" file for readingWait for hard drive head to get to correct locationWait as hard drive spins to read file contentsMay require multiple movement of hard drive headWhile this happens your code waitsTuesday, March 8, 2011Threads15Common way to scale performanceWhile one thread is blocked on I/O another thread can perform workTypical serverOne high priority thread accepts connects from clientsOnce accepted a client connection is give to a worker threadTuesday, March 8, 2011Thread Issues16OverheadMemoryTime in context switchesManaging threadsProgramming issuesCommunication between threadsDeadlockLivelockMultiple threads accessing same dataTuesday, March 8, 2011Node.js17To be highly scalable it does not use:Threads*Blocking I/OInstead uses callbacksWhen OS has data for you to read you callback function is calledTuesday, March 8, 2011*Well it does have proccesses and will use WebWorkers.Reading a File18var fs = require('fs');function processFileContents(error, data) { if (error) throw error; console.log(data);}fs.readFile('Client.html','utf8', processFileContents );Tuesday, March 8, 2011Node.js does support synchronous reading of filesSecond Example - Reading Chunks19var fs = require('fs');var spool = "";function processFileContents( data) { spool += data;}function doneReading( ) { console.log(spool);}var fileStream = fs.createReadStream('Client.html',{encoding: 'utf8'} );fileStream.on('data', processFileContents);fileStream.on('end' , doneReading);Tuesday, March 8, 2011Don't block the event Loop. Depending on what one is doing it maybe better to use Buffer for better performance.Simple WebServer20var http = require('http');var server = http.createServer()server.on('request', handleRequest);server.listen(8000, "127.0.0.1");console.log('Server running at http://127.0.0.1:8000/');function handleRequest(request, response) { console.log(request.url); response.writeHead(200, {'Content-Type': 'text/plain'}); response.end(data);; }Tuesday, March 8, 2011Simple WebServer - Standard Example21var http = require('http');http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.end('Hello World\n');}).listen(8000, "127.0.0.1");console.log('Server running at http://127.0.0.1:8000/');Tuesday, March 8, 2011Same as previous slide. This is the standard Node.js example but is a bit more compact and harder to readComplete Example22Use clicks on "Cats" or "Cars" buttonConnect to server to get list of "Cats" or "Cars"Add list to next pageDisplay new page with listTuesday, March 8, 2011HTML23<body> <div data-role="page" > <div data-role="header"> <h1> Client Examples </h1> </div> <div


View Full Document
Download Ajax & Node.js
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Ajax & Node.js and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Ajax & Node.js 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?