quick introduction to jquery ajax and json module 3

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


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?


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/

http://jquery.com/

http://jquery.com/


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


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


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


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".


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>


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>


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();


Example – 4 – jQuery Double Click Event

1. <script>

2. //This code will hide all the <span> elements


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>


Example – 5 – More Mouse Events

In this exercise, we will cover most common events such as:

• mouseenter()

• mouseleave()

• mousedown()

• mouseup()

• Hover()

• Focus()

• Blur()


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);



$(selector).show(speed,callback)


$(selector).fadeOut(speed,callback);


$(selector).toggle(speed,callback)


$(selector).fadeToggle(speed,callback);


Ex: $("p").hide();

$("p").hide(1000);

$("p").hide(slow,callbackfunc);

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

*. Opacity: takes values between 0 and 1



Example – 7 – jQuery Effects

The slide effects

Slide

$(selector).slideDown(speed,callback);



$(selector).slideUp(speed,callback);


$(selector).slideToggle(speed,callback)


Ex: $("#panel").slideToggle();

Quick Overview of AJAX?


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


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


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


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>


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>


Examples – 2 – jQuery AJAX URL Parameter

In this example:


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>



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>


Examples – 3 – jQuery AJAX calback Function

In this example:


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>



$("#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


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.


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.


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>


$("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>


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.


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>


$("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


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?


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


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


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"


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"


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 )


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 )


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 ()?


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


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


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


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

http://www.w3school.com/

quick introduction to jquery ajax and json module 3

Documents