rabeeajaffari.files.wordpress.com€¦ · web viewajax’s core function is to update web content...
TRANSCRIPT
Department of Software EngineeringMehran University of Engineering and Technology, Jamshoro
Course: SW412 – Web TechnologiesInstructor Rabeea Jaffari Practical/Lab No. 09Date CLOs CLO-3: P5Signature Assessment Score
Topic To become familiar with AJAX for data fetchingObjectives - To learn Basic Jquery syntax
- Fetching and posting form data using AJAX
Lab Discussion: Theoretical concepts and Procedural steps
JQuery : jQuery is a light-weight JavaScript library designed to simplify HTML DOM tree manipulation, as well as event handling, CSS animation, and Ajax. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. The jQuery library contains the following features:
HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities
Adding JQuery to Webpages: There are two ways of including Jquery library to your website i.e.:
Download the jQuery library from jQuery.com: and include it in your webpage by using a script tag to point to its path location (External script).
<head><!—-jquery downloaded and referenced locally --><script src="jquery-3.3.1.min.js"></script> </head>
Include jQuery from a CDN: Directly fetch the Jquery library from an online Content Delivery Network (CDN) by using the link in the script tag of your webpage.
<head><!—online jquery--><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
Note: One advantage of using online JQuery is that many users already have downloaded jQuery from Google or Microsoft in their browsers when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
JQuery Syntax:
The jQuery syntax is used for selecting HTML elements and performing some action on the element(s).Basic syntax is: $(selector).action()
A $ sign to define/access jQuery A (selector) to "query (or find)" HTML elements (Can be any CSS selector
such as ID (#), Class (.) etc.) A jQuery action() to be performed on the element(s)
Examples:
1. $("p").hide() - hides all <p> elements.2. $(".test").hide() - hides all elements with class="test".3. $("#test").hide() - hides the element with id="test".
Document Ready Event:
Usually all the JQuery statements are placed inside document ready event to prevent any jQuery code from running before the document has finished loading (is ready). It is good practice to wait for the document to be fully loaded and ready before using JQuery to work with it.
$(document).ready(function(){
// jQuery methods go here...
});
AJAX: AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster and more interactive web applications with the help of XML, HTML, CSS, and Java Script. AJAX’s core function is to update web content asynchronously (the “A” of AJAX), meaning a user’s web browser doesn’t need to reload an entire web page when only a small portion of content on the page needs to change. AJAX is commonly used to update features like status and notification bars, online forms, comments sections, and surveys and polls.
Example: Google Suggestion
One of the most ubiquitous examples of asynchronous updating is Google’s “Google Suggest” feature. When you enter a search query into
Google’s search bar and the Google website automatically begins offering auto-complete options while you type, that’s AJAX in action. The content on the page changes (in this case, the auto-complete options in the search bar) without having to manually refresh the page (something that would make Google Suggest impractical to use).
Using AJAX to post form data to a PHP page:
form.html
postform.php
insertval.js
Output: With the use of insertval.js jQuery file in between the HTML form and the PHP server script the result (alert message of Inserted successfully) is displayed to the user immediately without the page being refreshed, as it normally does whenever the form is posted to the PHP server.
Lab TasksSubmission Date: 21-01-19
Part A: JQuery: Create an HTML page with
1. All six headings. Hide all headings on the page when they are clicked.2. A paragraph tag. Double click on paragraph to change its background
color.3. Three text fields (first name, last name and middle name) and empty span
elements to display information regarding them. When the text fields are focused the corresponding span elements display a message regarding the text field.
4. Two text fields (name and roll number). Stop the user from typing anything in first text input box (name).
5. A list and a button. Display the number of list items in the list on button click.
Part B: AJAX:
1. Apply AJAX on feedback/contact form (created in previous HTML+CSS lectures) to send the form data to the php server without refreshing the page. Reset all the text fields after the data has been sent and display a success message in the alert box.
2. Create an HTML form with a combo box which gets populated with countries when the page is loaded and an empty combo box beside it for its cities. When a specific country is selected, its cities must appear in the city combo box asynchronously (without refreshing the page).