View
15
Download
1
Category
Preview:
DESCRIPTION
Quick Introduction to JQuery Ajax and JSON Module 3
Citation preview
Quick Overview of jQuery –
AJAX & JSON Ali Chalhoub
March, 2014 Internal
Module 3
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 2 Internal
Agenda
Quick Overview of jQuery
What’s jQuery
How to use it
Examples – Getting Started
Quick Overview of AJAX
What’s AJAX
How to use it
Examples
Quick Overview of JSON
What’s JSON
How to use it
Examples
Reference
Quick Overview of jQuery
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 4 Internal
What’s jQuery?
jQuery
Is a lightweight JavaScript library.
Is designed to help JavaScript programmer to do more with less codes.
Is created to help DOM manipulation and interaction much simpler and faster.
It is case sensitive. It is a JavaScript.
Simplifies very complex common tasks into a few line of codes.
How to use jQuery?
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 6 Internal
How to Use jQuery?
Why jQuery is used?
It is the most popular JavaScript library and easy to read and understand. A lot of
companies are using it such as, IBM, Microsoft, Google, and Netflix.
jQuery is supported by almost all browsers.
What do you need?
– It is a Javascript library that can be downloaded or referenced.
There are two types:
1. Production version which is a compressed
2. Development version is not compressed and it is for testing and developing
– Both versions can be downloaded from http://jquery.com/
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 7 Internal
How to Use jQuery?
jQuery Versions:
jQuery 1.x
jQuery 2.x
– Has the same API as jQuery 1.x, but does not support, IE 6, 7, and 8
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 8 Internal
Syntax
1. <head>
2. <script src="jquery-1.11.0.min.js">
3. </script>
4. </head>
Or It can be referenced from Google CDN
1. <head>
2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
3. </script>
4. </head>
Or It can be referenced from Microsoft CDN
1. <head>
2. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js">
3. </script>
4. </head>
• jQuery library needs to be referenced in
your html page using the <script> tag.
• When using HTML 5, we do not need to
reference type=“text/javascript” in the
<script> tag
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 9 Internal
Performance Tip
There are many benefits of using Google or Microsoft CDN direct reference:
• Decreased Download Time
• Increased Parallelism
• Better Caching
Using your local jQuery library copy helps in the situation where
• Access to the internet is not allowed.
Examples Getting Started with
jQuery
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 11 Internal
Examples – 1– jQuery Syntax
The idea is to use jQuery to select HTML elements and manipulate them in less
coding, fast and easy way
Syntax:
$(selector).action()
Define
Access
to
jQuery Locate the
HTML
element
Action to
perform
Ex:
1. $(this).hide() hide current element.
2. $("div").hide() hides all <div> elements.
3. $(".cssClass").hide() hides all elements
with class="cssClass".
4. $("#test").hide() hides the element with
id="test".
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 12 Internal
Examples – 2 – jQuery Document Ready Event Syntax
You will notice that most jQuery syntax
used in any application uses the
document ready event to protect itself.
• The document ready event allows your
jQuery code not to be executed before the
html document is fully loaded
Syntax:
$(document).ready(function(){
//jQuery code goes here
});
1. <script>
2. $(document).ready(function(){
3. $("div").hide();
4. $(".cssClass").hide();
5. $this.hide();
6. });
7. </script>
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 13 Internal
jQuery Document Ready Event Syntax - Tip
We can omit the $(document).ready from
the coding by using the shorter syntax
• Ex:
$(function(){
//jQuery code goes here
});
1. <script>
2. $(function(){
3. $("div").hide();
4. $(".cssClass").hide();
5. $this.hide();
6. });
7. </script>
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 14 Internal
Ex -3- jQuery Events
Event is an action performed against an HTML element or object
Mouse Event Keyboard Events Form Events Document/Window
Events
click keypress submit load
dbclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
Ex:
$("div").click();
$("div").dblclick();
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 15 Internal
Example – 4 – jQuery Double Click Event
1. <script>
2. //This code will hide all the <span> elements
3. $(document).ready(function(){
4. $("span").dblclick(function(){
5. $(this).hide();
6. });
7. });
8. </script>
9. <body>
10.<span>This is a <span> tag if you double click on me, I will go away. I promise
:)</span>
11.</body>
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 16 Internal
Example – 5 – More Mouse Events
In this exercise, we will cover most common events such as:
• mouseenter()
• mouseleave()
• mousedown()
• mouseup()
• Hover()
• Focus()
• Blur()
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 17 Internal
Example – 6 – jQuery Effects
Let’s examine now the power of jQuery Effects
Hide/Show Fade
$(selector).hide(speed,callback)
*. Parameters are optional
*.speed: “slow”, “fast”, milliseconds
$(selector).fadeIn(speed,callback);
*. Parameters are optional
*.speed: “slow”, “fast”, milliseconds
$(selector).show(speed,callback)
*. Parameters are optional
$(selector).fadeOut(speed,callback);
*. Parameters are optional
$(selector).toggle(speed,callback)
*. Parameters are optional
$(selector).fadeToggle(speed,callback);
*. Parameters are optional
Ex: $("p").hide();
$("p").hide(1000);
$("p").hide(slow,callbackfunc);
$(selector).fadeTo(speed,opacity,callback);
*. Opacity: takes values between 0 and 1
*. Parameters are optional
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 18 Internal
Example – 7 – jQuery Effects
The slide effects
Slide
$(selector).slideDown(speed,callback);
*. Parameters are optional
*.speed: “slow”, “fast”, milliseconds
$(selector).slideUp(speed,callback);
*. Parameters are optional
$(selector).slideToggle(speed,callback)
*. Parameters are optional
Ex: $("#panel").slideToggle();
Quick Overview of AJAX?
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 20 Internal
What’s AJAX?
AJAX
Stands for Asynchronous JavaScript and XML .
Allows you to exchange data from the back-end server to the web page without the
need to refresh or reload the page.
Who uses AJAX?
A lot of well known applications, such as, Youtube, Gmail, Facebook, Google Map
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 21 Internal
jQuery and AJAX
jQuery makes it easy and simple to use AJAX.
Without jQuery, AJAX will be tricky to work with.
jQuery complements AJAX, there are few methods for AJAX functionality.
What can be done with jQuery AJAX methods?
You can request JSON format data from a remote server using HTTP GET and
HTTP post
You can request HTML, XML, text from a remote server
You can load external data into HTML elements
Syntax How to Use jQuery AJAX
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 23 Internal
Syntax - How to Use jQuery AJAX?
To use jQuery AJAX
We need to work with the selector load method
Ex:
$(selector).load(URL,data,callback);
HTML element • URL: Required parameter where to fetch the
data
• data: optional specifies a set fo
querystring key/pair to send along the
request
• callback: optional parameter the function
to be executed after the load function is
done
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 24 Internal
Examples – 1 – jQuery AJAX Load Method
In this example:
• We are loading data from an input text file
at run time.
• In this example you must use a web
server. ( i.e IIS)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script
src="http://ajax.googleapis.com/ajax/libs/jquer
y/1.11.0/jquery.min.js"></script>
5. <script>
6. $(document).ready(function(){
7. $("button").click(function(){
8. $("#divID").load("input_text.txt");
9. });
10.});
11.</script>
12.</head>
13.<body>
14.<div id="divID"><h2>This data will be replaced
by reading a remote data from an input text
file</h2></div>
15.<button>Load Data from TEXT input file</button>
16.</body></html>
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 25 Internal
Examples – 2 – jQuery AJAX URL Parameter
In this example:
• We are loading data from an input text file
at run time and specifically the data inside
the text file under the <p> tag with id=“pID”
to be read and placed in the <div> tag.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script
src="http://ajax.googleapis.com/ajax/libs/jquer
y/1.11.0/jquery.min.js"></script>
5. <script>
6. $(document).ready(function(){
7. $("button").click(function(){
8. $("#divID").load("input_text1.txt #pID");
9. });
10.});
11.</script>
12.</head>
13.<body>
14.<div id="divID"><h2>This data will be replaced
by reading a remote data from an input text
file</h2></div>
15.<button>Load Data from TEXT input file</button>
16.</body></html>
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 26 Internal
Examples – 3 – jQuery AJAX calback Function
In this example:
• We are loading data from an input text file
and calling a callback function after the
load was successfull.
Syntax:
$(selector).load(URL,function(responseTxt,statusTx
t,xhr){
//javascript code to execute
});
1. <html>
2. <head>
3. <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jqu
ery.min.js"></script>
4. <script>
5. $(document).ready(function(){
6. $("button").click(function(){
$("#divID").load("input_text1.txt",function(responseTxt,sta
tusTxt,xhr){
7. if(statusTxt=="success")
8. alert("External content loaded successfully! ");
9. if(statusTxt=="error")
10. alert("Error: "+xhr.status+": "+xhr.statusText);
11. });
12. });
13. });
14. </script>
15. </head>
16. <body>
17. <div id="divID"><h2>This data will be replaced by reading a
remote data from an input text file and a call to a callack
function</h2></div>
18. <button>Load Data from TEXT input file</button>
19. </body></html>
jQuery – AJAX GET and POST
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 28 Internal
What’s GET and POST in jQuery AJAX?
HTTP GET Request:
Basically when the web page request data from the back-end server or specific
resource.
HTTP POST Request:
Basically when the web page submit data to be processed by the back-end server
for a specific resource.
POST method does not caches any data.
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 29 Internal
Syntax - $.get() jQuery Method
Syntax:
$.get(URL, callback);
URL: Where to request the data from
callback: It is the callback function to be executed if the call is successful.
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 30 Internal
Syntax – Example – 4 – $.get() jQuery Method
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("mydata.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Send an HTTP GET request to an asp page and get the result back from the web
server</button>
</body></html>
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 31 Internal
Syntax - $.post() jQuery Method
Syntax:
$.post(URL,data,callback);
URL: Where to send the data to
data: specifying the data sending to the server to be applied or used
callback: It is the callback function to be executed if the call is successful.
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 32 Internal
Syntax – Example – 5 – $.post() jQuery Method
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("process_post.asp",
{
incident:"21542/2014",
processor:"Ali Chalhoub",
company:"SAP AGS"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
}); </script>
</head>
<body>
<button>Send an HTTP POST request to an asp page and get the result back and display it in an alert</button>
</body></html>
Quick Overview of JSON
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 34 Internal
What’s JSON?
JSON
Stands for JavaScript Object Notation.
Is used to do text information exchanged same like XML, but it is faster and smaller
than XML.
It is language independent, it uses the JavaScript syntax in order to describe data
objects.
It is case sensitive
How to use JSON?
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 36 Internal
How to Use JSON?
Why JSON is used?
Faster than XML:
–When using XML,
o You need to fetch the document
o You need to use the XML DOM to loop through the document
o Extract values and store in variables
When using JSON:
– Fetch a JSON string
– use JavaScript eval()function to convert the JSON string
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 37 Internal
How to Use JSON?
JSON can be used and developed the same way JavaScript code is written
A text editor
Chrome, IE 8, Opera 10, Safari 4, or Firefox 3.5
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 38 Internal
Syntax
"incidentNumber":"1234"
JSON is subset of JavaScript Object
syntax:
Data is in a name/value pairs.
Data is separated by commas.
Curly braces hold objects
In JavaScript statement that would be
similar to this:
incidentNumber = "1234"
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 39 Internal
Syntax
1. {
2. "incidentNumber":"1234",
"incidentYear":"2014",
"description":"server is
down", "priority:p1"
3. }
• JSON objects are written inside curly
brackets. syntax: see on the left side
of the slide.
• In JavaScript statement that would be
similar to this:
incidentNumber = "1234"
incidentYear = "2014"
description = "server is down"
priority = "p1"
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 40 Internal
Syntax
• JSON arrays are written inside square brackets:
Example:
{
"incidents":[
{"incidentNumber":"1234", "incidentYear":"2014", "description":"server is down","priority":"p1"},
{"incidentNumber":"8972", "incidentYear":"2014", "description":"client crashed","priority":"p1"},
{"incidentNumber":"8972", "incidentYear":"2014", "description":"Login Failed", "priority":"p2"}
]
}
• In this example:
–The object “incidents” is an array
– There are 3 objects in the incidents array
– Each object is considered a record of an incident with four fields ( incidentNumber, incidentYear, description, priority )
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 41 Internal
Syntax
• In JavaScript statement
Example:
var incidents = [
{"incidentNumber":"1234", "incidentYear":"2014", "description":"server is down","priority":"p1"},
{"incidentNumber":"8972", "incidentYear":"2014", "description":"client crashed","priority":"p1"},
{"incidentNumber":"8972", "incidentYear":"2014", "description":"Login Failed", "priority":"p2"}
]
• In this example:
–The object “incidents” is an array
– There are 3 objects in the incidents array
– Each object is considered a record of an incident with four fields ( incidentNumber, incidentYear, description, priority )
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 42 Internal
Syntax
• An object in an array, can be accessed as follows:
Example of first record access:
incidents[0].incidentNumber + "//" + incidents[0].incidentYear;
• The data of a field can be altered or updated as follows:
Example of updating a field:
incidents[0].incidentNumber="4321";
Using eval ()?
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 44 Internal
Syntax
• Let’s consider we have data from the back-end server was sent to the
application in a JSON format:
Example:
var txtResponse = '{'+
"incidents":[' +
'{"incidentNumber":"1234", "incidentYear":"2014", "description":"server is down", "priority":"p1"},'+
'{"incidentNumber":"8972", "incidentYear":"2014", "description":"client crashed", "priority":"p1"},'+
'{"incidentNumber":"8972", "incidentYear":"2014", "description":"Login Failed", "priority":"p2"}' +
']'+
'}';
var objIncident = eval("(" + txtResponse + ")");
Examples – Accessing a Record
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 46 Internal
Example – Accessing a record
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Process JSON response object from the back-end server</h2>
5. <p>
6. Incident Number: <span id=“incidentNumber"></span><br>
7. Year: <span id=“incidentYear"></span><br>
8. </p>
9. <script>
10.var txtResponse = '{'+ "incidents":[' + '{"incidentNumber":"1234", "incidentYear":"2014",
"description":"server is down", "priority:p1"},'+
11. '{"incidentNumber":“8972", "incidentYear":"2014", "description":"client crashed", "priority:p1"},'+
12. '{"incidentNumber":“2432", "incidentYear":"2014", "description":"Login Failed", "priority":"p2"}' + ']'+'}';
13.var objIncident = eval("(" + txtResponse + ")");
14.document.getElementById(“incidentNumber").innerHTML = objIncident.incidents[0].incidentNumber;
15.document.getElementById(“incidentYear").innerHTML = objIncident.incidents[0].incidentYear;
16.</script>
17.</body></html>
Tutorial – Displaying a Record
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 48 Internal
Tutorial – Displaying a Record
• Use what you learned to display
the following screen on the right:
– Note: You may face the following:
o Data not be able to be displayed
o Sytanx errors
o Wrong format string
• Try to utilize the debugger to
figure out what’s going on
Reference
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 50 Internal
Reference
• The best location I found to really understand and learn everything about
• HTML(5)
• CSS (3)
• jQuery/AJAX
• XML
• ASP
• JSON
http://www.w3school.com
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Thank you
Contact information:
Ali Chalhoub
Global Architect NEXUS Support Engineer
Waterloo, ON CA
Recommended