Ajax Framework & jQuery

Ajax Framework & jQuery

Dr. Domenico Gendarmi

Ajax Advantages • Based on open standards • Can decrease bandwidth by only updating content that needs to be updated • Allows sites to be more interactive, yet quicker than static sites • Reduces connections to web servers (i.e. .css file only needs to be requested once)

Dr. Domenico Gendarmi

1

Ajax Disadvantages • May not register with browser’s history engine, making back button only semi-functional • Does not work well with search engine optimization • Does not work if user has JavaScript disabled in browser • Minimal support with mobile devices

Dr. Domenico Gendarmi

Ajax Frameworks Framework JavaScript Java .NET PHP Python

Framework Example jQuery Google Web Toolkit ASP.NET AJAX Sajax Pyjamas

• http://en.wikipedia.org/wiki/Ajax_framework • http://en.wikipedia.org/wiki/List_of_Ajax_frameworks Dr. Domenico Gendarmi

2

JQuery

Dr. Domenico Gendarmi

Adding the jQuery Library to Your Pages • The jQuery library is stored a single JavaScript file, containing all the jQuery functions – Point to your copy of jquery.js

– USe Google's/Microsoft’s CDN to load the jQuery core file OR Dr. Domenico Gendarmi

3

Launching Code on Document Ready • jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event $(document).ready(function() { // Your code here });

Dr. Domenico Gendarmi

Callback and Functions • Callback without arguments $.get('myhtmlpage.html',myCallBack);

• Callback with arguments $.get('myhtmlpage.html', function(){ myCallBack(param1, param2); });

Dr. Domenico Gendarmi

4

jQuery Syntax • selecting g HTML elements and p perform some action on the element(s)

$(selector).action() – A dollar sign to define jQuery – A (selector) to "query (or find)" HTML elements – A jQuery action() to be performed on the element(s) $(this).hide() - hides current element $("p").hide() - hides all paragraphs $("p.test").hide() - hides all paragraphs with class="test" $("#test").hide() - hides the element with id="test" Dr. Domenico Gendarmi

jQuery Selectors • Allow to manipulate HTML elements as a group or as a single (DOM) node http://www.w3schools.com/jquery/jquery_ref_selectors.asp – CSS Selectors $("p").css("background-color","yellow");

– Element Selectors $("p") selects all

elements. $("p.intro") $( p ) selects all

p elements with class="intro" $("p#demo") selects the first

element with id="demo"

– Attribute Selectors $("[href]") select all elements with an href attribute $("[href='#']") select all elements with an href value equal to "#" $("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg" Dr. Domenico Gendarmi

5

Selector Context • $( selector,, [ context ] ) – By default, selectors perform their searches within the DOM starting at the document root but an alternate context can be given $('div.foo').click(function() { $('span',this).addClass('bar'); }); – Restrict the span selector to the context of this, thus only spans within the clicked element will get the additional class Dr. Domenico Gendarmi

jQuery Events Event Function

Binds a Function to

$(document) ready(function) $(document).ready(function)

The ready event of a document (when an HTML document is ready to use)

$(selector).click(function)

The click event of selected elements

$(selector).dblclick(function)

The double click event of selected elements

$(selector).focus(function)

The focus event of selected elements

$(selector).mouseover(function)

The mouse over event of selected elements

• $("img").click(function(){$("#n10").hide()}) – hide an element with id="n10" when any image is clicked http://www.w3schools.com/jquery/jquery_ref_events.asp Dr. Domenico Gendarmi

6

jQuery Effects Hide / Show

Description

$(selector).show(speed,callback) $( ) ( p , )

Show selected elements

$(selector).hide(speed,callback)

Hide selected elements

$(selector).toggle(speed,callback)

Toggle hide and show for selected elements

Slide

Description

$(selector).slideDown(speed,callback)

Slide-show selected elements by adjusting height

$(selector).slideUp(speed,callback)

Slide-hide selected elements by adjusting height

$(selector).slideToggle(speed,callback)

Toggle slide-hide and slide-show for selected elements

F d in Fade i / outt

D Description i ti

$(selector).fadeIn(speed,callback)

Fade in selected elements to full opacity

$(selector).fadeOut(speed,callback)

Fade out selected elements to zero opacity

$(selector).fadeTo(speed,opacity,callback)

Fade selected elements to a given opacity

http://www.w3schools.com/jquery/jquery_ref_effects.asp Dr. Domenico Gendarmi

Hide/Show Example $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); });

If you click on the "Hide" button, I will disappear.

Hide Show Dr. Domenico Gendarmi

7

Toggle Example src="jquery js"> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); /head Toggle

This is a paragraph with little content.

This is another small paragraph.

Dr. Domenico Gendarmi

jQuery HTML Manipulation Function

Description

$(selector) html(content) $(selector).html(content)

Changes the (inner) HTML of selected elements

$(selector).append(content)

Appends content to the (inner) HTML of selected elements

$(selector).prepend(content)

"Prepends" content to the (inner) HTML of selected elements

$(selector).after(content)

Adds HTML after selected elements

$(selector).before(content)

Adds HTML before selected elements

• $("p").html("W3Schools"); • $("p").append(" W3Schools"); • $("p").after(" W3Schools.");

http://www.w3schools.com/jquery/jquery_ref_html.asp Dr. Domenico Gendarmi

8

jQuery CSS Manipulation CSS Properties

Description

$(selector).css(name,value)

Set the value of one style property for matched elements

$(selector).css({properties})

Set multiple style properties for matched elements

$(selector).css(name)

Get the style property value of the first matched element

• $(" $("p").css("background-color","yellow"); ") ("b k d l " " ll ") • $("p").css({"background-color":"yellow","fontsize":"200%"}); http://www.w3schools.com/jquery/jquery_ref_css.asp Dr. Domenico Gendarmi

JQuery & Ajax

Dr. Domenico Gendarmi

9

jQuery AJAX Requests Request

Description

$(selector).load(url,data,callback)

Load remote data into selected elements

$.ajax(options)

Load remote data into an XMLHttpRequest object

$.get(url,data,callback,type)

Load remote data using HTTP GET

$.post(url,data,callback,type)

Load remote data using HTTP POST

$.getJSON(url,data,callback)

Load remote JSON data using HTTP GET

$ getScript(url,callback) $.getScript(url,callback)

Load and execute a remote JavaScript file

• Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol. Dr. Domenico Gendarmi

load(url, data, callback) • url, A string containing the URL to which the request is sent • data, A map or string that is sent to the server with the request • callback, The function called when the ajax request is complete (not necessarily success) – function (responseText, textStatus, XMLHttpRequest) { this; // dom element }

•

A GET request will be performed by default but if you pass in any extra parameters then a POST will occur $("#feeds").load("feeds.php", {limit: 25}, function() { alert("The last 25 entries in the feed have been loaded"); });

Dr. Domenico Gendarmi

10

XmlHttpRequest Vs JQuery function loadXMLDoc() { xmlhttp=new XMLHttpRequest(); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv"). innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","test1.txt",true); xmlhttp.send(); }

script type type="text/javascript"> text/javascript