Implementing Ajax In ColdFusion 7


Published on

Ajax 101 in ColdFusion 7

Published in: Technology
1 Comment
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Implementing Ajax In ColdFusion 7

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