Your SlideShare is downloading. ×
Implementing Ajax In ColdFusion 7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Implementing Ajax In ColdFusion 7

1,484
views

Published on

Ajax 101 in ColdFusion 7

Ajax 101 in ColdFusion 7

Published in: Technology

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,484
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Implementing Ajax in CF7 Basic and Intermediate Level using JavaScript, JSON and ColdFusion 7 Harbinger Systems Pranav Prakash (pranav@HarbingerGroup.com)
  • 2. Agenda
      • Internet basics
      • AJAX
      • JSON
      • Case Study – Adding ILT Classes
      • Best Practices
      • Q-n-A
    Harbinger Systems
  • 3. The Internet
      • The Internet
      • Connection less in nature
        • Server has no idea from where the data is coming
        • It just creates a ‘response’ in answer to a ‘request’
    Harbinger Systems
  • 4. Under the hood
      • How a web page is viewed ?
        • Client (Firefox) sends a request to server (google.com)
        • Server generates a response (generally in HTML)
        • The response is parsed by the client
        • Displayed to the user
      • Simple and Synchronized
        • One time comm between Client & Server
        • If there is any new request, the page is reloaded/ new page comes up
    Harbinger Systems
  • 5. Limitations
      • One time comm. between client and server
      • The rendered page is static
        • No matter if the page is generated by
          • Static HTML content
          • Dynamically by ColdFusion, Python or PHP
      • If anything on the page has to be changed on the fly – no way
    Harbinger Systems
  • 6. Agenda
      • Internet basics
      • AJAX
      • JSON
      • Performance
      • Case Study – Adding ILT Classes
      • Best Practices
      • Q-n-A
    Harbinger Systems
  • 7. AJAX
      • AJAX = Asynchronous JavaScript and XML
      • AJAX is not a technology in itself, rather a group of technologies
      • Constituent technologies
        • JavaScript
        • DOM
        • XML/JSON and of-course HTTP
        • CSS
    Harbinger Systems
  • 8. AJAX in two slides … #1 Harbinger Systems
  • 9. AJAX in two slides … #2 Harbinger Systems
  • 10. AJAX flow
      • Make HTTP request
        • Creation of XMLHttpRequest
        • Sending data to server
        • Callback
      • Handling Server response
        • onreadystatechange
      • Doing something meaningful
    Harbinger Systems
  • 11. XMLHttpRequest (XHR)
      • What
        • DOM API
      • Where
        • Used inside JavaScript
      • Why
        • Send HTTP request directly to web server
        • Load server response directly in JavaScript
        • Server response can be – XML or plain text
    Harbinger Systems
  • 12. Creating XMLHttpRequest // create ajaxObject supports all browser with XMLHttpRequest Support ajaxObject = function() { try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ // Internet Explorer try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ alert("Your browser does not support AJAX!"); return false; } } } return xmlHttp; } ajax = new ajaxObject(); Harbinger Systems
  • 13. Sending data to server
      • Data to web server can be send in many ways
        • GET
        • POST
        • HEAD
        • Any other
      • Everything is supported
    Harbinger Systems
  • 14. Sending data to server
      • Two methods provided in XMLHttpRequest object for sending data
        • open()
        • send()
      • Used to send any kind of data to the server
    Harbinger Systems
  • 15. XMLHttpRequest open() method
    • open(method, url, async, user, password)
      • Opens a new connection
      • Five parameters
        • The HTTP method – GET, POST
        • The URL of page being requested
        • Sets if the request is Asynchronous. This is the “A” in AJAX
          • If TRUE, the execution of the JavaScript function will continue while the response of the server has not yet arrived
        • Optional username/password information
    Harbinger Systems
  • 16. XMLHttpRequest send() method
    • send(data)
      • Initiates the request
      • Data is optional (not strictly)
        • Must use null if no data is to be provided
        • To be send, only in case of POST-ing the request
        • Should be in form of a query string like name=value&anothername=othervalue&so=on
    Harbinger Systems
  • 17. Handling Server Response
      • onreadystatechange attribute is used to store the JavaScript function that handles the response from server
      • httpRequest.onreadystatechange = nameOfTheFunction ;
      • What this function should do
        • Check the state of request
        • Check the status code of server response
        • Obtain data and play
    Harbinger Systems
  • 18. Checking the state of request
      • Checks the current progress of request made
      • Attribute readyState stores the information
      • Possible values
        • 0 – un initialized
        • 1 – Loading
        • 2 – Loaded
        • 3 – Interactive
        • 4 – Complete
    Harbinger Systems
  • 19. Checking the state of request … if (httpRequest.readyState == 4) { // everything is good, the response is received } else { // still not ready } Harbinger Systems
  • 20. Checking the server response code
      • There are many server response codes
      • We are interested in
        • 200 ( Good, go ahead)
        • 404 ( Not found, debugging purposes)
        • 500 ( Internal Server Error, debugging)
        • 503 ( Service Not available)
    Harbinger Systems
  • 21. Checking the server response code if (httpRequest.readyState == 4) { if (httpRequest.status == 200) { // perfect! } else { // there was a problem with the request, // maybe a 404 or 500 // show user friendly message } } Harbinger Systems
  • 22. Obtaining Data
      • XMLHttpRequest has two attributes to store data send from server
      • responseText
        • The server response as a string of text
      • responseXML
        • The server response as a XMLDocument object
        • Can be traversed using JavaScript DOM functions
    Harbinger Systems
  • 23. Summing it all … Algorithm
      • Create an instance of XMLHttpRequest
      • If created proceed to #3
      • Use onreadystatechange to call a function upon completion
      • Open the connection and send the request
      • Excellent example at - https://developer.mozilla.org/en/AJAX/Getting_Started
    Harbinger Systems
  • 24. Done with AJAX
      • Internet basics
      • AJAX
      • JSON
      • Case Study – Adding ILT Classes
      • Best Practices
      • Q-n-A
    Harbinger Systems
  • 25. JSON
      • JSON = Jason (Phonetically)
      • JavaScript Object Notation
      • Lightweight computer data interchange format
      • Used as an alternate to XML in web communication
      • Text based, simple data structures
    Harbinger Systems
  • 26. JSON data types
      • Number (integer, real, or floating point)
      • String (double-quoted Unicode with backslash escaping)
      • Boolean (true and false)
      • Array (an ordered sequence of values, comma-separated and enclosed in square brackets)
      • Object (collection of key:value pairs, comma-separated and enclosed in curly braces)
      • Null
    Harbinger Systems
  • 27. Example JSON { "Unassigned_Instructors": [ {"name":"Chavan swapnil","id":133693}, {"name":"Instructor Default","id" :4}, {"name":"prakash Pranav","id":133699}, {"name":"s m","id":133700} ], "Unassigned_Equipment":[ {"name" :"equipment 1","id":3} ], "Classrooms": [ {"capacity":25,"name":"Test Classroom","id":1}, {"capacity":50,"name" :"test classroom (50)","id":2}, {"capacity":2,"name":"Test class","id":3}, {"capacity":15,"name":"Dev Classroom 1","id":6} ], "Assigned_Equipment":[], "Assigned_Instructors":[] } Harbinger Systems
  • 28. Recreating JSON Object
      • The server response is in Text/XML format
      • After obtaining the prev text, we need to convert it into JSON Object
      • Use of eval()
    • var myClass = eval("(" + class_details + ")");
    Harbinger Systems
  • 29. Using the JSON Objects
      • myClass.Unassigned_Instructors
        • Is an array containing the class details
      • myClass.Unassigned_Instructors[0].name
        • Stores the name of first class
      • myClass.Unassigned_Instructors[0].id
        • Stores the ID corresponding to the class
      • myClass. Classrooms
        • Stores an array of class room details
      • And so on …
    Harbinger Systems
  • 30. Creating JSON in ColdFusion
      • Third Party Component named “json.cfc”
      • Available at http://www.epiphantastic.com/cfjson/downloads.php
      • Create regular Structure, Arrays in Coldfusion and use “JSON.CFC” to convert them into JSON data
    Harbinger Systems
  • 31. Creating JSON in ColdFusion… <cfquery name=“instructors” datasource=“#application.LMSDSN#”> <!---// find out instructors ---• </cfquery> <cfset ResultStruct = StructNew() > <cfset ResultStruct[&quot;Assigned_Instructors&quot;] = structnew() > <cfloop from=&quot;1&quot; to =&quot;#instructors2.recordcount#&quot; index=&quot;i&quot;> <cfset ResultStruct.unassigned_Instructors[i][&quot;id&quot;] = #instructors2.userid[i]# > <cfset ResultStruct.unassigned_Instructors[i][&quot;name&quot;] = #instructors2.lastname[i]# & ' ' & #instructors2.firstname[i]# > </cfloop> <cfinvoke component=&quot;JSON&quot; method=&quot;encode&quot; data=&quot;#ResultStruct#&quot; returnvariable=&quot;result&quot; /> Harbinger Systems
  • 32. Done with JSON
      • Internet basics
      • AJAX
      • JSON
      • Case Study – Adding ILT Classes
      • Q-n-A
    Harbinger Systems
  • 33. Adding ILT classes
      • Specific to 43x and 44x clients
      • When Add class page loads
        • It initialize lot of instructor, classroom, equipment related data in javascript
        • Works great for small amount of data
        • Also, helps in quick addition of class
        • Better resource management
    Harbinger Systems
  • 34. The B I G picture
      • For SOM431, there are 1300 courses, over 50 locations and 97,853 Instructor associations
      • When the page loads, over 1000,000 javascript variables were being defined
      • Result – latency, browser crashes and frustration, and of course server load
    Harbinger Systems
  • 35. The solution
      • AJAX
      • Do not load any course, location, instructor and equipment details when the page is called
      • Let user select something
      • Use AJAX and fetch details on the fly
      • Result – Faster page load, less server burden
    Harbinger Systems
  • 36. Homework
      • Have a look at following SOM431 files to see how changes have been made
        • dsp_class.cfm
        • act_Saveclass.cfm
        • getDetails.cfm
        • Fbx_switch.cfm
      • Dir – x:SOM431htmltrainingclassscheduleradmin
    Harbinger Systems
  • 37. Further resources
      • https://developer.mozilla.org/en/AJAX
      • http://www.json.org/
      • http://www.epiphantastic.com/cfjson/
      • http://www.google.com
    Harbinger Systems
  • 38. That’s all from my side Thanks … Harbinger Systems