JQuery, JSON - Web Technologies I.tothzs/edu/webtech/... · 2018-09-03 · JQuery Plug–ins Plug–in Plug–in repository Labels ui form animation input slider responsive effect:::

JQuery, JSONWeb Technologies I.

Zsolt Tóth

University of Miskolc

2018

Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 1 / 29

Introduction

Table of Contents

1 Introduction

2 JSONHierarchical Data ModelSyntaxApplications

3 JQuerySyntaxEvents, FunctionsPlug–ins

4 AJAXJQueryLayout


Introduction

N–Tier Architecture


Introduction

Client-Server Communication

ProtocolHTTP

VerbsStatus Codes

Content ?Challenges

Different platformsData formatsNetwork SecurityFirewall

Text basedHTTP XData formats

CSVXMLJSON

ProcessingJavaScriptJQuery


JSON Hierarchical Data Model

Table of Contents

1 Introduction



4 AJAXJQueryLayout



Hierarchical Data Model

1960’sTree structure1-to-many relationshipXMLJSON



XML

eXtensible Markup LanguageData descriptiontext-basedtag

Schema definitionDTDXML Schema

+ Self contained+ Platform independent+ Readable+ Free, open standard

RSSAPI

SAXDOMJAXB

ApplicationsSOAP

- Huge- "slow" processing


JSON Syntax

JavaScript Object Notation

text-basedSelf containedDesigned for data transferLanguage independentJavaScript syntaxHierarchical Data Model

{"name " : " John Johnson " ," s t r e e t " : " Oslo West 555" ," age " : 3 3 ," phone " : "555 1234567"}


JSON Syntax

XML vs. JSON

XML+ Flexible+ Extendable+ Namespaces+ Readable+ XML Schema+ XPath, XSLT, XQuery- Long- "slow" processing

JSON+ Compact+ Simple+ Easy-to-learn+ "fast" processing- Simple syntax- Hard-to-read


JSON Syntax

Syntax

Name-Value pairscomma separated

ParenthesesNot tag


JSON Syntax

string


JSON Syntax

value


JSON Syntax

Number


JSON Syntax

Array

Array of valuesVarious types

Use brackets [, ]

comma separated


JSON Applications

Language Support

Many JSON LibrariesPlatform independent

JavaScripteval()

PHPPHP 5.2json

JavaJackson JSON Processororg.jsonjson–simplegoogle–gsonxjc, JAXB

C#fastJSONJSON.NET


JQuery Syntax

Table of Contents

1 Introduction



4 AJAXJQueryLayout


JQuery Syntax

Syntax

JavaScript LibraryEasy-to-useEvent handlingAnimationsAJAXPlug–ins

$ functionCSS selectors

tag nameId #class .

"write less, do more"


JQuery Syntax

Usage

JavaScriptExternal filelinking

OnlineLocal file

$ ( t h i s ) . h ide ( ) ;$ ( " . t e s t " ) . h ide ( ) ;$ ( "# content " ) . html (" He l lo World ! " ) ;

< s c r i p t s rc =" jquery −1.10.2. min . j s " / >< s c r i p t s rc =" h t t p : / / a jax . aspnetcdn . com/ a jax / jQuery / jquery −1.10.2. min . j s " / >


JQuery Syntax

Selectors

tag name$("p")

Select all tag

Idid attribute$("#id")

Single node

Osztály alapúclass attribute$(".class")


JQuery Events, Functions

Events

Mouse Keyboard Form Documentclick keypress submit loaddbclick keydown change resizemouseenter keyup focus scrollmouseleave blur unload

$ ( " p " ) . c l i c k ( f u n c t i o n ( ) {$ ( t h i s ) . h ide ( ) ;

} ) ;



Functions

. operatorfunction()

function name()

html()html(content)text()css()

Effectshide()show()toggle(speed,callback)fadeIn()fadeOut()slide{Up,Down,Toggle}()animate()



Callback

function as parameterC function pointerC# delegateGeneralizationUI Design

$ ( " but ton " ) . c l i c k (f u n c t i o n ( ) {

$ ( " p " ) . h ide ( " slow " ,f u n c t i o n ( ) {

a l e r t (" The paragraph i snow hidden " ) ;

} ) ;} ) ;


JQuery Plug–ins

Plug–in

Plug–in repositoryLabels

uiformanimationinputsliderresponsiveeffect. . .

ExamplesSelectableUI Highlight EffectSliderDatepickerMenuSortableAutocompletePeity (chart)


AJAX JQuery

Table of Contents

1 Introduction



4 AJAXJQueryLayout


AJAX JQuery

Asynchronous JavaScript And XML

Request dataAsynchronousDoes not require refreshPage refresh XData is processed at clientside

$ ( document ) . ready (f u n c t i o n ( ) {

$ ( " but ton " ) . c l i c k (f u n c t i o n ( ) {

$ ( "# d iv1 " ) . load (" demo_test . t x t " ) ;

} ) ;} ) ;


AJAX JQuery

$.ajax

urlsettings

acceptsasynccomplete (function)contextdatasucccess (function). . .

$ . a jax ( {u r l : u r l ,data : data ,success : success ,dataType : dataType

} ) ;


AJAX JQuery

Get

GET requestcalls $.ajax()Parameters

urldatasuccessdataType

xmljsonscripthtml

$ . get ( " a jax / t e s t . html " ,f u n c t i o n ( data ) {

$ ( " . r e s u l t " ) . html (data ) ;

} ) ;


AJAX JQuery

Post

POST requestcalls $.ajax()Parameters

urldatasuccessdataType

xmljsonscripthtml

$ . post ( " a jax / t e s t . html " ,f u n c t i o n ( data ) {

$ ( " . r e s u l t " ) . html (data ) ;

} ) ;


AJAX Layout

Layout

div + CSSAJAXChange content with JSSingle pageFragments

elements div

appearance CSSnavigation link X

links other sites X


JQuery, JSON - Web Technologies I.tothzs/edu/webtech/... · 2018-09-03 · JQuery Plug–ins Plug–in Plug–in repository Labels ui form animation input slider responsive effect:::

Documents