6. Accelerated Development with jquery Library and AJAX Technology

Size: px

Start display at page:

Download "6. Accelerated Development with jquery Library and AJAX Technology"

Jocelyn Eaton
5 years ago
Views:

1 Web Engineering I BIT Pre-Semester Accelerated Development with jquery Library and AJAX Technology (Modal Question) Lessons for Mid-Exam 1. Web Administration skills in Analysis, Design, Develop and Deploy a Website 2. Defining the Content of a Webpage using HTML 3. Beautify and Layout the content using CSS 4. Responsive Design with Bootstrap-CSS Only Components Lessons for End-Exam 5. Client-Side Interactivity with JavaScript 6. Accelerated Development with jquery Library and AJAX Technology 7. Accelerated Development with Bootstrap-JavaScript Mediated Components 8. Introduction to Server-Side Programming with PHP and MySQL 1

2 Example 1 a. 1. Give 3 advantages of jquery? (3 Marks, 3 Minutes) Fast Development Hide Browser Incompatibility Has Large Community and Good Documentation 2. Consider the following code segment (4 Marks, 5 Minutes) <button id= btn >Click Me</button> <p id= para >Hello World</p> Write down a code to fulfill following requirement using only jquery without any pure JS code. Note: You can t change any code in the above html code. When Click the Click Me button, Paragraph color has been changed as red. After hide the button. <script> $(document).ready(function(){ $("#btn").click(function(){ $("#btn").hide(); $("#para").css("color","red"); b. 1. Write down a Code segment to create a AJAX Request Object (1 Mark, 1 Minutes) var req = new XMLHttpRequest(); 2. What are the ready states of an ajax request and briefly describe them. (5 Marks, 4 Minutes) 0: connection not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready 3. What are the meaning of following status codes (2 Marks, 2 Minutes) I. 404 II. 200 III. 403 IV : Page Not Fount 200 : Success 403 : Forbidden 500 : Internal Server Error 2

3 c. 1. Consider the Following files. (8 Marks, 12 Minutes) data.json [ { "name":"nimal", "age":20, "city":"colombo", { "name":"ruwan", "age":25, "city":"gampaha", { "name":"kamal", "age":45, "city":"kandy" ] View.html <html> <body onload="filltable()"> <table border="1" cellspacing="0" cellpadding="3"> <thead> <th>name</th> <th>age</th> <th>city</th> </thead> <tbody id="dataarea"> </tbody> </table> <script> function filltable(){ x </html> When after load the view.html filltable method has been invoked. filltable has following duties, Get Data from data.json file using ajax object Create rows for each data in the Json file and append that rows to the table body 3

4 Write down a code segment to replace X. var req = new XMLHttpRequest(); req.onreadystatechange = function(){ if(this.readystate==4 && this.status==200){ var data = JSON.parse(this.responseText); var tbody = document.getelementbyid('dataarea'); for(var i=0; i<data.length; i++){ var row = document.createelement('tr'); var namecell = document.createelement('td'); var agecell = document.createelement('td'); var citycell = document.createelement('td'); namecell.innerhtml = data[i].name; agecell.innerhtml = data[i].age; citycell.innerhtml = data[i].city; row.appendchild(namecell); row.appendchild(agecell); row.appendchild(citycell); tbody.appendchild(row); req.open('get','data.json',true); req.send(); 2. writes 4 method names of jquery library which use ajax? (2 Marks, 3 Minutes) $.get(); $.post(); $.ajax(); $(selector).load(); Example 2 a. 1. Give 3 method names in an ajax object (3 Marks, 2 minutes) open() send() setrequestheader() 2. Briefly Describe what is the difference between synchronous and asynchronous request (3 Marks, 3 minutes) Synchronous: A synchronous request blocks the client until operation completes. In such case, JavaScript engine of the browser is blocked. Asynchronous: An asynchronous request doesn t block the client. At that time, user can perform another operation also. 4

b. 1. Write a code segment to replace following X. (4 Marks, 5 minutes) Consider the following HTML page <html> <head> <script src="js/jquery.min.js"> <script> $(document).

Initially look like below, After 1 Second, like below After 1 Second, like Below $("button").click(function(){ $("div").animate({borderradius:'50%',1000).

(5 Marks, 5 Minutes) animate() - Perform a custom animation of a set of CSS properties. slideup() - Hide the matched elements with a sliding motion.

5 b. 1. Write a code segment to replace following X. (4 Marks, 5 minutes) Consider the following HTML page <html> <head> <script src="js/jquery.min.js"> <script> $(document).ready(function(){ X </head> <body> <button>start Animation</button> <div style="background:red;height:100px;width:100px;position:absolute;"></div> </html> Initially look like below, After 1 Second, like below After 1 Second, like Below $("button").click(function(){ $("div").animate({borderradius:'50%',1000).animate({left:'100px',1000); 2. Give 5 animation methods in jquery library and briefly describe them. (5 Marks, 5 Minutes) animate() - Perform a custom animation of a set of CSS properties. slideup() - Hide the matched elements with a sliding motion. slidedown() - Display the matched elements with a sliding motion. fadein() Display the matched elements by fading them to opaque. fadeout - Hide the matched elements by fading them to transparent. 5

6 c. 1. Consider the following HTML file and JSON file (5 Marks, 7 Minutes) employee.json [ { "id":1, "name":"nimal", { "id":2, "name":"kamal", { "id":3, "name":"sunil" ] View.html <html> <head> <title></title> </head> <body> <button onclick="loademployees()">load Employees</button> <select id="cmbemployee"> <option>select an Employee</option> </select> <script> function loademployees(){ x </html> When click the button, fill Employee data to the combo box. Write down the content of X. var req = new XMLHttpRequest(); req.onreadystatechange = function(){ if(this.readystate==4 && this.status==200){ var data = JSON.parse(this.responseText); var combo = document.getelementbyid('cmbemployee'); for(var i=0; i<data.length; i++){ var option = document.createelement('option'); option.value = data[i].id; option.innerhtml = data[i].name; combo.appendchild(option); req.open('get','data.json',true); req.send(); 6

7 2. Consider the Following HTML page (5 Marks, 8 minutes) <body> <a href="#" onclick="loadwindow('home.html')">home</a> <a href="#" onclick="loadwindow('about.html')">about Us</a> <a href="#" onclick="loadwindow('contact.html')">contact Us</a> <div id="subwindow"> </div> <script> X When User click a link, relevant page load to the subwindow without page refreshment. Implement the loadwindow function. function loadwindow(path){ var req = new XMLHttpRequest(); req.onreadystatechange = function(){ if(this.readystate==4 && this.status==200){ document.getelementbyid('subwindow').innerhtml = this.responsetext; req.open('get',path,true); req.send(); Example 3 a. 1. Convert below ajax get request to ajax post request (3 Marks, 5 Marks) function senddata() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readystate == 4 && this.status == 200) { alert(this.responsetext); ; xhttp.open("get", "insert.php?name=nimal&mobile=123", true); xhttp.send(); function senddata() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readystate == 4 && this.status == 200) { alert(this.responsetext); ; xhttp.open("post", "insert.php", true); xhttp.setrequestheader('content-type','application/x-www-form-urlencode'); xhttp.send("name=nimal&mobile=123"); 7

8 2. What is the meaning of third parameter in the open method of an ajax object? What are the possible values for it? (3 Marks, 3 Minutes) Boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If it is true connection will be asynchronous If it is false connection will be synchronous b. Consider the following json file and HTML file data.json { "students":[ {"no":1, "name":"nimal", {"no":2, "name":"sunil", {"no":3, "name":"ruwan" ], "batches":[ {"no":1, "name":"bit-sem1-col-sat-18", {"no":2, "name":"bit-sem1-col-sun-18", {"no":3, "name":"bit-sem1-gam-sat-18", {"no":4, "name":"bit-sem1-gam-sun-18", {"no":5, "name":"bit-sem1-gam-mon-18" ] Form.html <html> <head> <title></title> </head> <body onload="loaddata()"> <select id="cmbstudent"> <option>select a Student</option> </select> <select id="cmbbatch"> <option>select a Batch</option> </select> <button type="button" onclick="register()">register</button> <script type="text/javascript"> function loaddata(){ X function register(){ Y </html> 8

9 1. Implement the loaddata Method. It has duty to read data.json file using ajax and load data to the student and batch combo boxes. (8 Marks, 10 Minutes) var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readystate == 4 && this.status == 200) { var data = JSON.parse(this.responseText); var students = data.students; var batches = data.batches; var stucombo = document.getelementbyid('cmbstudent'); var batchcombo = document.getelementbyid('cmbbatch'); for(var i=0; i<students.length; i++){ var option = document.createelement('option'); option.value=students[i].no; option.innerhtml=students[i].name; stucombo.appendchild(option); for(var i=0; i<batches.length; i++){ var option = document.createelement('option'); option.value=batches[i].no; option.innerhtml=batches[i].name; batchcombo.appendchild(option); ; xhttp.open("get", "data.json", true); xhttp.send(); 2. Implement the register Method. It has duty to send selected student and batch to the insert.php file using ajax. Hint: Use post method to send data. (6 Marks, 7 Minutes) var student = document.getelementbyid('cmbstudent').value; var batch = document.getelementbyid('cmbbatch').value; var xhttp = new XMLHttpRequest(); xhttp.open("post", "insert.php", true); xhttp.setrequestheader('content-type','application/x-www-form-urlencode'); xhttp.send("student="+student+"&batch="+batch); 9

10 c. Consider the Following HTML code <html> <head> <title></title> <script src="js/jquery.min.js"> </head> <body> <input type="text" placeholder="search Text Type Here" id="searchfield"><br/><br/> <table border="1" cellspacing="0" cellpadding="5"> <thead> <tr> <th>name</th> <th>number</th> </tr> </thead> <tbody id="dataarea"> <tr> <td>nimal</td> <td> </td> </tr> <tr> <td>kamal</td> <td> </td> </tr> <tr> <td>ruwan</td> <td> </td> </tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function(){ $("#searchfield").keyup(function(){ X </html> X has duty of row filtering regarding search text. Implement it. (5 Marks, 5 Minutes) var searhtext = $("#searchfield").val(); $("#dataarea tr").each(function(){ var rowtext = $(this).html(); if(rowtext.search(searhtext)==-1){ $(this).hide(); else{ $(this).show(); 10

11 Example 4 a. 1. Write down 3 properties of an ajax object. (3 Marks, 2 minutes) readystate status responsetext 2. Write down 3 disadvantages of AJAX. (3 Marks, 3 minutes) Search Engine like Google cannot index AJAX pages. JavaScript disabled browsers cannot use the application. The back and refresh button are rendered useless. Hight Security vulnerability b. 1. create a Reusable function to load specific html file inside the specific parent HTML element. (5 Marks, 6 minutes) function loadwindow(parentid,path){ var req = new XMLHttpRequest(); req.onreadystatechange = function(){ if(this.readystate==4 && this.status==200){ document.getelementbyid(parentid).innerhtml = this.responsetext; req.open('get',path,true); req.send(); 2. Consider the following HTML code (8 Marks, 12 Minutes) <html> <head> <title></title> </head> <body> Name <input type="text" id="namefield"> Mobile <input type="text" id="mobilefield"> <button type="button" onclick="save()">save</button> <script> function save(){ </html> Implement the save method. Save method has following duties, Get Name Get Mobile Number Send Data to the insert.php using post ajax request 11

12 var name = document.getelementbyid('namefield').value; var mobile = document.getelementbyid('mobilefield').value; var xhttp = new XMLHttpRequest(); xhttp.open("post", "insert.php", true); xhttp.setrequestheader('content-type','application/x-www-form-urlencode'); xhttp.send("name="+name+"&mobile="+mobile); c. Consider the following HTML code (6 Marks, 7 Minutes) <html> <head> <title></title> <script src=" </head> <body> <button id="btnhide">hide</button> <button id="btnshow">show</button> <div id="data" style="width:250px;height: 150px; background-color: yellow"> Hello, I am the Data </div> <script type="text/javascript"> X </html> When user clicked the Hide button, data div will be slide up and hide. When User clicked the Show button, data dive will be slide down and show. Implement that program using jquery. $(document).ready(function(){ $("#btnhide").click(function(){ $("#data").slideup(); $("#btnshow").click(function(){ $("#data").slidedown(); 12

13 MCQ 1. Which of the following jquery statements will return all div elements in an HTML document? (a) var divs = $(div); (b) var divs = jquery("div"); (c) var divs = #("div"); (d) var divs = $("div"); (e) var divs = divs(); 2. Consider the following code segment $(document).ready(function(){ alert("jquery is not loaded"); $("button").click(function(){ $("p").hide(); Which of the following is/are true? (a) when page load, user can see jquery is not loaded as a message. (b) If jquery library not loaded correctly, user can see jquery is not loaded as a message. (c) When user clicked on any button in the web page, all paragraphs will be hidden. (d) The final effect of the script will not change when the $ is replaced with the jquery (e) This code segment has an error. Because alert() is a pure JS function. Within jquery code cannot write any pure JS Code segment. 3. Which of the following statements has/have the same effect as the statement (a) value1 = $("value1").value; (b) value1 = $("value1").val(); (c) value1 = $("#value1").val; (d) value1 = $("#value1").val(); (e) value1 = $("#value1").value; value1 = document.getelementbyid("value1").value; 4. Which of the following statements about JQuery is/are correct? (a) JQuery uses CSS selectors to select elements in HTML pages. (b) JQuery is a PHP web application framework. (c) JQuery $( #id ) selector and Javascript document.getelementbyid( id ) produce the same result. (d) The JQuery selector #( div #id01 ) select all HTML elements with div tag and id id01. (e) JQuery can used to retrieve data from a mysql database. 5. Consider the following JavaScript function function x1(){ var ele = document.getelementbyid('marksfield'); var marks = ele.value; if(marks>=50){ ele.style.background = 'lightgreen'; else{ ele.style.background = 'pink'; 13

14 What is the correct jquery conversion of above x1() function? (a) (b) (c) (d) (e) 14

6. Match the column A and Column B. Column A Column B I. When page is loaded, user will see one Hi message. A. II. Not Working. Because this code segment ha errors. B. III.

When user click a paragraph, will be hidden that paragraph using sliding effects.

15 6. Match the column A and Column B. Column A Column B I. When page is loaded, user will see one Hi message. A. II. Not Working. Because this code segment ha errors. B. III. When page is loaded, user will see Hi messages for each paragraph in the web page. C. IV. When user click a paragraph user will see paragraph text as a message. D. E. V. When user click a paragraph, will be hidden that paragraph using sliding effects. (a) A-II, B-IV, C-V, D-I, E-III (b) A-I, B-III, C-IV, D-V, E-II (c) A-III, B-I, C-IV, D-V, E-II (d) A-III, B-I, C-V, D-IV, E-II (e) A-III, B-V, C-IV, D-II, E-I 7. What is correct code segment for creating an ajax object? (a) var req = XMLHttpRequest(); (b) var req = new XMLHttpRequest(); (c) var req = new XMLHTTPRequest(); (d) var req = xmlhttprequest(); (e) var req = new AjaxObject(); 8. Which of the following is/are disadvantages of using AJAX on a web page? (a) Ajax applications makes browsing history information less useful (b) Ajax code in web pages cannot be index by search engines. (c) Ajax can t send Synchronous requests to the server. (d) Ajax applications are vulnerable to hackers. (e) Ajax applications makes the navigation buttons of the browser is less useful. 15

AJAX. Ajax: Asynchronous JavaScript and XML *

AJAX. Ajax: Asynchronous JavaScript and XML * AJAX Ajax: Asynchronous JavaScript and XML * AJAX is a developer's dream, because you can: Read data from a web server - after the page has loaded Update a web page without reloading the page Send data