LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript...
Transcript of LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript...
![Page 1: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/1.jpg)
1W3101: Programming Languages: JavascriptRamana Isukapalli
LECTURE – 6
• AJAX
•Node.js
![Page 2: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/2.jpg)
2W3101: Programming Languages: JavascriptRamana Isukapalli
AJAX – ASYNCHRONOUS JAVASCRIPT AND XML
• Made popular by Google (with Google Suggest).• NOT a new programming language• A new way to use existing standards.
• Based on JavaScript and HTTP requests.• With AJAX, JavaScript communicates• Directly with the (web) server• using XMLHttpRequest object• To retrieve data as needed• Using Javascript events (e.g., keyPressed)• WITHOUT refreshing the page.
![Page 3: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/3.jpg)
3W3101: Programming Languages: JavascriptRamana Isukapalli
HOW DOES AJAX WORK … CONTD.
Source: W3Schools
![Page 4: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/4.jpg)
4W3101: Programming Languages: JavascriptRamana Isukapalli
HOW DOES AJAX WORK
Source: SUN’s JAVA web page
![Page 5: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/5.jpg)
5W3101: Programming Languages: JavascriptRamana Isukapalli
AJAX … CONTD.
• Note: Data is typically sent in XML format
• XMLHttpRequest
• The basic data structure interfacing the client with server.
• Sends a request to a server (e.g., Google suggest server) on any
events
• Like “onKeyup(..)” when the user types any character search key.
• Receives data from the server
• Updates the required fields with data received from server.
![Page 6: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/6.jpg)
6W3101: Programming Languages: JavascriptRamana Isukapalli
REQUESTS AND RESPONSES
• XMLHTTPRequest• open(..) // open a connection to …• setRequestHeader(..) // Set the request header• send(..) // Send the request• status // response 200 OK, or other values• readState // Store the state information• onreadystatechange // callback function for status change• responseText // response in Text• responseXML // response in XML
![Page 7: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/7.jpg)
7W3101: Programming Languages: JavascriptRamana Isukapalli
XMLHTTPREQUEST FUNCTIONS
• open(method, url, async, user, psw)• method: Get/Post• url: address of the server• sync – true or false (asynchronous call or not)• user – username (optional)• psw – Password (optional)
• setRequestHeader( ) // Sets label/value pairs in the header
• send( ) or send(string) // Sends the request to the server
• abort( ) // Cancel the current request
• getResponseHeader( ) // Get specific header information
• getAllResponseHeaders( ) // Get all headers’ information
![Page 8: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/8.jpg)
8W3101: Programming Languages: JavascriptRamana Isukapalli
XMLHTTPREQUEST OBJECT PROPERTIES
• readyState – Holds the status of XMLHTTPRequest object• 0: Request Not initialized• 1: Server connection established• 2: Request received• 3: Processing request• 4: Request finished, response is ready
• Status – Returns the status number of a request• 200: OK• 403: Forbidden• 404: Not Found• ..Others
• statusText – Status text of a response (e.g., “OK”, “Not Found”, etc.)
• responseText – response data as a string
• responseXML – response as XML data
![Page 9: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/9.jpg)
9W3101: Programming Languages: JavascriptRamana Isukapalli
NODE.JS
• Open source cross-platform runtime environment
• Runs Javascript engine
• Node.js app runs in a single process
• Uses asynchronous non-blocking calls to resources
• Can handle many (thousands) of requests on a
server.
![Page 10: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/10.jpg)
10W3101: Programming Languages: JavascriptRamana Isukapalli
WHAT CAN NODE.JS DO?
• Server side Javascript
• Serves content to browsers
• Generate dynamic page content
• Can create/open/read/write/delete/close files on server
• Can interact with databases on server
• Can handle forms, events, emails, etc.
![Page 11: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/11.jpg)
11W3101: Programming Languages: JavascriptRamana Isukapalli
ADVANTAGES OF NODE.JS
• Fast and makes good use of resources (CPU,
memory, etc.)
• Can handle multiple requests simultaneously
• Open source
• Thousands of open source packages are available.
![Page 12: LECTURE –6 AJAX Node - Columbia Universityramana/lectureNotes/Lecture6.pdf•Runs Javascript engine •Node.js app runs in a single process •Uses asynchronous non-blocking calls](https://reader033.fdocuments.us/reader033/viewer/2022043003/5f80d710fa3e532c996dc68a/html5/thumbnails/12.jpg)
12W3101: Programming Languages: JavascriptRamana Isukapalli
NODE.JS – HIGH LEVEL ARCHITECTURE
Node.js
Requests Worker Threads Resources
Files
DB
Network calls
Single thread event loop Async calls