ajax node js

2 jQuery Documentation, http://api.jquery.com/jQuery.get/ Ajax Programming, http://en.wikipedia.org/wiki/Ajax_programming XMLHttprequest, http://en.wikipedia.org/wiki/XMLHttpRequest Node

CS 696 Emerging Web and Mobile Technologies

Spring Semester, 2011 Doc 13 Ajax & Node.js

Mar 8, 2011

Copyright ©, 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, 2011

2

jQuery Documentation, http://api.jquery.com/jQuery.get/

Ajax Programming, http://en.wikipedia.org/wiki/Ajax_(programming) XMLHttprequest, http://en.wikipedia.org/wiki/XMLHttpRequest

Node.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.html

Wikipedia, as noted on individual slides

Tuesday, March 8, 2011

3

Many Web and Mobile Apps require data from serverPhoneGap does not provide direct access to network socketHow to get data from server

Tuesday, March 8, 2011

code (scripts)

Tuesday, March 8, 2011

JSON - JavaScript Object Notation

"strings"

12.345 (numbers)12

12.3e12arraysobjects

array[12, "cat", true]

["this", "is", "an array"]

object{"key":"value"}

{"name":"Roger", "age": 12}

{"colors: ["red","black", "blue"]}

Tuesday, March 8, 2011

JQuery XMLHttpRequest Shortcuts

data - data returned by servertextStatus -

jqXHR - superset of XMLHttpRequest object

dataType - type of data requested, optional

xml, json, script, html

Tuesday, March 8, 2011

Equivalent Versions

8

jQuery.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, 2011

9

$.get('ajax/test.html', function(data) { $('.result').html(data);

alert('Load was performed.');

});

Tuesday, March 8, 2011

Sample Requests & Server

Server - Handling Requests

11

There are many different systems to handle web requests

php

18+ frameworks.net

7+ frameworksperl

6+ frameworksJava

34+ frameworksRuby

6+ frameworksPython

15+ frameworksSeaside (Smalltalk)Kepler (Lua)

Lift (Scala)Nitrogen (Erlang)etc

Tuesday, March 8, 2011

http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks

12

JavaScript on desktop/server sideEvent-driven non-blocking I/O frameworkScalable network programs

Uses Googles V8 JavaScript Engine

Compiles JavaScript to machine codeUsed in HP's WebOS Phones and tablets

http://nodejs.org/

Tuesday, March 8, 2011

Up and Running with Node.js

13

Early draft of Node.js book by Tom Hughes-Croucher

http://ofps.oreilly.com/titles/9781449398583/index.html

Tuesday, March 8, 2011

Delays in I/O

14

To read a file with blocking I/O

Get 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 contents

May require multiple movement of hard drive headWhile this happens your code waits

Tuesday, March 8, 2011

15

Common way to scale performanceWhile one thread is blocked on I/O another thread can perform workTypical server

One high priority thread accepts connects from clientsOnce accepted a client connection is give to a worker thread

Tuesday, March 8, 2011

Thread Issues

16

Overhead

MemoryTime in context switchesManaging threads

Programming issues

Communication between threadsDeadlock

LivelockMultiple threads accessing same data

Tuesday, March 8, 2011

Instead uses callbacks

When OS has data for you to read you callback function is called

Tuesday, March 8, 2011

*Well it does have proccesses and will use WebWorkers

Reading a File

18

var fs = require('fs');

function processFileContents(error, data) {

if (error) throw error;

console.log(data);

}fs.readFile('Client.html','utf8', processFileContents );

Tuesday, March 8, 2011

Node.js does support synchronous reading of files

Second Example - Reading Chunks

Simple WebServer - Standard Example

Complete Example

22

Use clicks on "Cats" or "Cars" buttonConnect to server to get list of "Cats" or "Cars"Add list to next page

Display new page with list

Tuesday, March 8, 2011

<a href="#result" data-role="button" data-inline="true" onclick="sendDatắcats')">Cats</a>

<a href="#result" data-role="button" data-inline="true" onclick="sendDatắcars')">Cars</a>

Client Side JavaScript

var startList = '<ul data-role="listview" data-theme="a"><li>';

var endList = '</li></ul>';

var listContents = array.join("</li><li>");

return startList + listContents + endList;

}

</script>

Tuesday, March 8, 2011

function handleRequest(request, response) {

var category = requestedCategory(request.url);

var requestedData = dataFor(category);

returnData(requestedData, response);

}

function returnData(data, response) { response.writeHead(200, {'Content-Type': 'application/json'}); response.end(data);

}

Tuesday, March 8, 2011