Your SlideShare is downloading. ×
Chap 4. Ajax in Depth         1                                      4. Ajax in Depth 1.   Write the Ajax code to illustra...
2    Ajax in Depth          <body>               <H1>Returning JavaScript</H1>                  <form>                    ...
Chap 4. Ajax in Depth    3     File HEAD.HTML     <html>     <head>     <title>Getting header information</title>     <scr...
4    Ajax in Depth     4.   Modify the above program to obtain only the last modified date from the Http header.          ...
Chap 4. Ajax in Depth      5 5.   Modify the above program so that it displays the following parts of a date: date, month,...
6    Ajax in Depth         <body>         <H1>Returning JavaScript</H1>         <form>         <input type = "button" valu...
Upcoming SlideShare
Loading in...5
×

Ajax chap 4

1,348

Published on

AJAX Lecture notes

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,348
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ajax chap 4"

  1. 1. Chap 4. Ajax in Depth 1 4. Ajax in Depth 1. Write the Ajax code to illustrate how JavaScript code can be returned from the server by a PHP script. A PHP script can be used to send a JavaScript back from the server to the client browser. In the client browser, this JavaScript can be evaluated by using the eval() function of JavaScript. The PHP file JAVASCRIPT.PHP is as follows: <?php echo myalert(); ?> The HTML file JAVASCRIPT.HTML is as follows: <html> <head> <title>Returning JavaScript</title> <script language = "javascript"> var xhr = false; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } function getData(dataSource) { if(xhr) { xhr.open("GET", dataSource); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { eval(xhr.responseText); } } xhr.send(null); } } function myalert() { var targetDiv = document.getElementById("targetDiv"); targetDiv.innerHTML = "Got the JavaScript OK."; } </script> </head>mukeshtekwani@hotmail.com Prof. Mukesh N. Tekwani
  2. 2. 2 Ajax in Depth <body> <H1>Returning JavaScript</H1> <form> <input type = "button" value = "Fetch JavaScript" onclick = "getData(javascript.php)"> </form> <div id="targetDiv"> <p>The fetched data will go here.</p> </div> </body> </html> 2. Write the Ajax code to illustrate how to return a JavaScript object from the server. <html> <head> <title>Converting text to a JavaScript object</title> <script> var text = "{method: adder, operand1: 2, operand2: 3};"; var jSObject; eval(jSObject = + text); eval(jSObject.method + ( + jSObject.operand1 + , + jSObject.operand2 + );); function adder(op1, op2) { var sum = op1 + op2; alert(op1 + " + " + op2 + " = " + sum); } </script> </head> <body> <h1>Converting text to a JavaScript object</h1> </body> </html> 3. Write Ajax code to get the following header information from the server: data about the server, current date and time on server, date of last modification of a file type of document being accessed. To get the header information, we use the HEAD method with the XMLHttpRequest object open(). This is instead of the GET method. The data transferred from the server are the values of the Http headers returned by the server when an Ajax script it tries to read a file on the server. If we send a GET request, we get the text file back from the server. But if we send HEAD, we get data about the file or metadata. Why is header information important? We can se the information in HTTP header before we try to download the resource from the server. The HTTP header will contain information about resource size, type, last-modified date, etc. This allows us to decide whether to download a resource. Also if the user tries to download a resource that does not exist, we can inform the user. Prof. Mukesh N Tekwani mukeshtekwani@hotmail.com
  3. 3. Chap 4. Ajax in Depth 3 File HEAD.HTML <html> <head> <title>Getting header information</title> <script language = "javascript"> var xhr = false; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } function getData(dataSource, divID) { if(xhr) { var obj = document.getElementById(divID); xhr.open("HEAD", dataSource); //observe that we have used // HEAD instead of GET. xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { obj.innerHTML = xhr.getAllResponseHeaders(); } } xhr.send(null); } } </script> </head> <body> <H1>Getting header information</H1> <form> <input type = "button" value = "Display Message" onclick = "getData(data.txt, targetDiv)"> </form> <div id="targetDiv"> <p>The fetched data will go here.</p> </div> </body> </html> The output of this, on my computer, was: Server: Microsoft-IIS/5.1 X-Powered-By: ASP.NET Date: Tue, 09 Nov 2010 17:54:30 GMT Content-Type: text/plain Accept-Ranges: bytes Last-Modified: Thu, 04 Nov 2010 08:15:17 GMT Etag: "f27876af87bcb1:b44" Content-Length: 43mukeshtekwani@hotmail.com Prof. Mukesh N. Tekwani
  4. 4. 4 Ajax in Depth 4. Modify the above program to obtain only the last modified date from the Http header. Instead of using getAllResponseHeaders method, we will use the getResponseHeader method to get only data for specific header, like this: File : DATE.HTML <html> <head> <title>Getting date information</title> <script language = "javascript"> var xhr = false; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } function getData(dataSource, divID) { if(xhr) { var obj = document.getElementById(divID); xhr.open("HEAD", dataSource); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { obj.innerHTML = "data.txt was last modified on " + xhr.getResponseHeader("Last-Modified"); } } xhr.send(null); } } </script> </head> <body> <H1>Getting date information</H1> <form> <input type = "button" value = "Display Date" onclick = "getData(data.txt, targetDiv)"> </form> <div id="targetDiv"> <p>The fetched data will go here.</p> </div> </body> </html> Prof. Mukesh N Tekwani mukeshtekwani@hotmail.com
  5. 5. Chap 4. Ajax in Depth 5 5. Modify the above program so that it displays the following parts of a date: date, month, year, hours, minutes, seconds. The modified part is shown below: if (xhr.readyState == 4 && xhr.status == 200) { var date = new Date(xhr.getResponseHeader("Last-Modified")); var details; details = "Date: " + date.getDate() + <br>; details = details + "Month: " + date.getMonth() + <br>; details = details + "Year: " + date.getFullYear() + <br>; details = details + "Hours: " + date.getHours() + <br>; details = details + "Minutes: " + date.getMinutes() + <br>; details = details + "Seconds: " + date.getSeconds() + <br>; obj.innerHTML = details } 6. Write Ajax code to check whether a URL exisis. <html> <head> <title>Returning JavaScript</title> <script language = "javascript"> var xhr = false; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } function getData(dataSource, divId) { if(xhr) { var obj = document.getElementById(divId); xhr.open("HEAD", dataSource); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { obj.innerHTML = "URL exists"; } else { obj.innerHTML = "URL does not exist"; } } xhr.send(null); } } </script> </head>mukeshtekwani@hotmail.com Prof. Mukesh N. Tekwani
  6. 6. 6 Ajax in Depth <body> <H1>Returning JavaScript</H1> <form> <input type = "button" value = "Fetch JavaScript" onclick = "getData(data22.txt, targetDiv)"> </form> <div id="targetDiv"> <p>The fetched data will go here.</p> </div> </body> </html> Prof. Mukesh N Tekwani mukeshtekwani@hotmail.com

×