ajax chap 5
DESCRIPTION
AJAX Lecture notesTRANSCRIPT
[email protected] Prof. Mukesh N. Tekwani
1 Chap 5. Introducing Ajax Frameworks
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);
Prof. Mukesh N Tekwani [email protected]
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)
[email protected] Prof. Mukesh N. Tekwani
3 Chap 4. Ajax in Depth
{ 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');
Prof. Mukesh N Tekwani [email protected]
4 Ajax in Depth
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText); delete xhr; xhr = null; } }
XMLHttpRequestObject.send(data); } }