Ajax chap 5
Upcoming SlideShare
Loading in...5
×
 

Ajax chap 5

on

  • 1,129 views

AJAX Lecture notes

AJAX Lecture notes

Statistics

Views

Total Views
1,129
Views on SlideShare
1,129
Embed Views
0

Actions

Likes
0
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Ajax chap 5 Ajax chap 5 Document Transcript

    • Chap 5. Introducing Ajax Frameworks 1 5. Introducing Ajax Frameworks 1. What is Ajax framework? What are the advantages of using a framework? 1. A framework is simply a reusable set of libraries or classes which simplify application development. 2. Ajax framework is simply JavaScript files that that we can include in our own scripts. These JavaScript files contain JavaScript functions that we can call in our applications. 3. These frameworks make coding easier and reduce the code development time. E.g., the programmer does not have to every time type out the syntax like ‘onreadystatechange’ and worry about spelling errors. 4. To use the framework, we must include it in our script as follows: Suppose the framework is ajagold.js. We include it as follows: <script language = ‘text/javascript’ src = ‘ajaxgold.js’></script> Although these frameworks are for client-side coding, some Ajax frameworks also include a server- side component that enables database search and data manipulation. 2. Explain the working of the getDataReturnText function of the Ajax Gold library to fetch text from a file on the server. Explain the role of the callback function. The getDataReturnText function of the Ajax Gold library uses the GET method to get text from the server. Similarly, the function getDataReturnXml function is used to get XML file from the server. The general syntax of the getDataReturnText function is : getDataReturnText(url, callback); This function is passed two parameters: the url and the callback function. The function gets the text from the URL specified. This function in turn calls the function known as the ‘callback’ function. The callback function then receives the text. The getDataReturnText function is as follows: function getDataReturnText(url, callback) { var xhr = false; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } if(xhr) { xhr.open("GET", url); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText);mukeshtekwani@hotmail.com Prof. Mukesh N. Tekwani
    • 2 Ajax in Depth delete xhr; xhr = null; } } xhr.send(null); } } Now to use this function in our program, we create a HTML file called AJAX51.HTML: <html> <head> <title>Getting text with Ajax Gold</title> <script type = "text/javascript" src = "ajaxgold.js"></script> <script language = "javascript"> function callback1(text) { document.getElementById("targetDiv").innerHTML = "Function 1 says" + text; } function callback2(text) { document.getElementById("targetDiv").innerHTML = "Function 2 says" + text; } </script> </head> <body> <H1>Getting text with Ajax Gold</H1> <form> <input type = "button" value = "Display Message" onclick = "getDataReturnText(data51.txt, callback1)"> <input type = "button" value = "Display Message 2" onclick = "getDataReturnText(data52.txt, callback2)"> </form> <div id="targetDiv"> <p>The fetched data will go here.</p> </div> </body> </html> We first load the Ajax Gold library by using this line: <script type = "text/javascript" src = "ajaxgold.js"></script> Each of the two buttons calls its own URL and has its own callback function to handle the text fetched from its URL. 3. Create a function getDataReturnXml to get XML data from the server. function getDataReturnXml(url, callback) Prof. Mukesh N Tekwani mukeshtekwani@hotmail.com
    • Chap 4. Ajax in Depth 3 { var xhr = false; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } if(xhr) { xhr.open("GET", url); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseXML); delete xhr; xhr = null; } } xhr.send(null); } } 4. Create a function postDataReturnText that uses the POST method to post (send) data to the server and get the text back from the server. The general syntax of the function postDataReturnText is as follows: postDataReturnText(url, data, callback); Here, we have to pass the URL, the data we want to post to the server and the callback function that will be passed the text obtained from the server. The POSt method is used to send data when confidentiality of data is important and also when large amount of data is to be sent. function postDataReturnText(url, data, callback) { var xhr = false; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { Xhr = new ActiveXObject("Microsoft.XMLHTTP"); } if(xhrMLHttpRequestObject) { xhr.open("POST", url); xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);mukeshtekwani@hotmail.com Prof. Mukesh N. Tekwani
    • 4 Ajax in Depth xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText); delete xhr; xhr = null; } } XMLHttpRequestObject.send(data); } } Prof. Mukesh N Tekwani mukeshtekwani@hotmail.com