Multimediaim NetzOnlineMultimediaWintersemester2015/16
Tutorial07– MinorSubject
OnlineMultimediaWS2015/16- Tutorial06(NF)-Ludwig-Maximilians-UniversitätMünchen 1
Today’sAgenda
• Recap• AJAXwithjQuery
– XMLvsJSON– Example:AsynchronousContactFormwithPHPback-end– Formserialization
• BreakoutSession:MovieSearch• Quiz
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 2
Evaluation&FeedbackPleasehelpusimprovethetutorialsandassignmentsbyfillingoutthissurvey:http://goo.gl/forms/DTdGh4TYaC
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial07- 3
AJAX:GoogleInstantSearch
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2014/15- Übung09- 4
Recap
1. What does the $standfor injQuery?2. What is a„selector“?3. What is „DOM-Manipulation“good for?4. What is acallback function?5. How doyou handlea„click“event?6. What is returned by $('div');
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 5
AJAX
• Acronym:AsynchronousJavaScriptAndXML• Allowspassing around data between client- and server-side
applicationsbackand forth –without refreshingthe page• AJAXrequests (also:XHR=XMLHttpRequest):
– GET:retrieve data – no manipulation onthe server– POST:retrieve and/ormodify data
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial05- 7
XML
• ExtensibleMarkupLanguage• Example:
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 8
<?xml version="1.0" encoding="UTF-8" ?><contact>
<firstName>John</firstName><lastName>Doe</lastName><phone>
<type>Home</type><number>5648978965</number>
</phone><phone>
<type>Mobile</type><nummer>6458979878</nummer>
</phone></contact>
XML JSON!• BeforeJSONwaswidelyadopted,XMLwasthestateoftheart• JavaScriptObject Notation• Human-readable format for data exchange• Based onkey-valuepairs and smaller than XML• Example:
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial05- 9
{"firstName": "John","lastName": "Doe","phone": [
{"type": "Home","number": "5648978965"
},{"type": "Mobil","nummer": "6458979878"
}]
}
AJAXwith jQuery
• jQuery offers differentfunctions to create AJAX-requests:– $.ajax()– $.get()– $.post()
• Moredetailled information:– https://api.jquery.com/jQuery.ajax/– https://api.jquery.com/jQuery.get/– https://api.jquery.com/jQuery.post/
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2014/15- Übung09- 10
Example:AsynchronousContactForm
• SendingacontactformisatypicalusecasewhereAJAXisuseful,becauseacompletepagerefreshisnotnecessary.
• ImaginetheserverrespondswiththisJSON:
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 11
{"status": "OK","info": {
"name": "Peter","message": "This is nice!"
}}
PHPScripthandlingthecontactrequest
<?phpif (isset($_POST['Name']) &&
isset($_POST['Message'])) {
$response =array(
"status" => "OK","info" => array(
"name" => $_POST['Name'],"message" => $_POST['Message']));
} else {$response = array("status" => "missingParameter");
}header("Content-type: application/json");echo json_encode($response);?>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 12
Example:AsynchronousContactForm(1)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Asynchronous Contact Form</title><script src="https://code.jquery.com/jquery-2.1.3.min.js"></script></head><body>
<form id="contactForm" onsubmit="submitContactForm(event)"><input type="text" name="Name"/><textarea name="Message" cols="50"></textarea><input type="submit" value="Submit!"/>
</form>
<div id="response"></div>
<script> // script from next slide</script>
</body></html>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial05- 13
Example:AsynchronousContactForm(2)
function submitContactForm(event) {
var contactForm = $('#contactForm');var data = contactForm.serialize();
var settings = {type: 'POST',data: data,success: function (response) {
var feedback = '<p>Thanks for your message, '+ response.info.name+ '!</p>'+ '<p>Your message: '+ response.info.message + '</p>';
$("#response").html(feedback);}
};
// this prevents the page from refreshingevent.preventDefault();
$.ajax('contactFormHandler.php', settings);}
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 14
$.ajax(url,settings)- Rundown
• url:Stringwith server URL
• settings:Optionalsettings as object with key/value pairs.Themost commonly used settings are:
─ type: typeof the request (either 'post' or 'get')─ data: data that are sent (e.g.formdata)─ dataType: the result data typethat we expect.jQuery automatically
guesses if this key is missing.(e.g.text,xml,html,…)
─ success: callback function that is called once the request is done
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2014/15- Übung09- 15
.serialize()
• Usefultoconstructastringcontainingallformdata• Example:
• Result:Name=Peter&Message=This+is+nice!
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 16
<form id="contactForm" ><input type="text" name="Name"/><textarea name="Message" cols="50"></textarea><input type="submit" value="Submit!"/>
</form>
Breakout:MovieSearch
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 17
ExampleResponseforhttp://www.omdbapi.com/?t=blue%20velvet{"Title": "Blue Velvet","Year": "1986","Rated": "R","Released": "30 Oct 1986","Runtime": "120 min","Genre": "Crime, Drama, Mystery","Director": "David Lynch”,
…
"Metascore": "75","imdbRating": "7.8","imdbVotes": "122,811","imdbID": "tt0090756","Type": "movie","Response": "True"
}
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 18
Breakout:Tasks
• Downloadthematerialfromthewebpage:http://www.medien.ifi.lmu.de/lehre/ws1516/mmn/uebung/material/mmn_material07_NF.zip
• Inthefilemovie-search.html completealltheTODOentries
• Goal:– typinginstantlysearchestheOMDBAPI
http://www.omdbapi.com/– Thetitleandyearoftheresultaredisplayedinthe#result<div>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 19
Round-upQuiz
1. WhatdoestheacronymAJAXstandfor?2. WhatisanadvantageofAJAX?3. WhatisanadvantageofJSONcomparedtoXML?4. Describeallelementsthatappearinthiscall:
$.ajax('https://api.spotify.com/v1/search',{method : 'get',data : {
type : 'track',q : 'the cars'
},success : function(data){
/// do something}
})
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 20
Thanks!Whatareyourquestions?
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial06(NF)- 21