Ajax and JSON Jeremy Shafer Department of MIS Fox School of Business

Slides:



Advertisements
Similar presentations
JQUERY/AJAX ALIREZA KHATAMIAN DELARAM YAZDANSEPAS.
Advertisements

AJAX Presented by: Dickson Fu Dimas Ariawan Niels Andreassen Ryan Dial Jordan Nielson CMPUT 410 University of Alberta 2006.
IS 360 Course Introduction. Slide 2 What you will Learn (1) The role of Web servers and clients How to create HTML, XHTML, and HTML 5 pages suitable for.
Ajax Dr Jim Briggs WEBP Ajax1. 2 Ajax Asynchronous JavaScript And XML Method of creating more interactive web applications Moves more of the application.
Cloud Computing Lecture #7 Introduction to Ajax Jimmy Lin The iSchool University of Maryland Wednesday, October 15, 2008 This work is licensed under a.
Chris Pinski.  History  What is Ajax  Who uses Ajax  Underlying Technologies  SE Aspect  Common Problems  Conclusion.
Introduction to AJAX AJAX Keywords: JavaScript and XML
JavaScript & jQuery the missing manual Chapter 11
CS 4720 RESTfulness and AJAX CS 4720 – Web & Mobile Systems.
Philly.NET Hands-on Labs JAVASCRIPT SERIES. July 9: JavaScript Syntax Visual Studio ◦Projects ◦Editors ◦Debugging ◦Script blocks ◦Minification and bundling.
Lecture 12 – AJAX SFDV3011 – Advanced Web Development Reference: 1.
The Document Object Model. The Web B.D, A.D. They aren’t web pages, they’re document objects A web browser interprets structured information. A server.
Ajax. –Asynchronous JavaScript and XML –Umbrella term for technologies that often: Use client-side scripting for layout and formatting Use less than full.
Asynchronous Javascript And XML AJAX : an introduction UFCEUS-20-2 : Web Programming.
JQuery JavaScript is a powerful language but it is not always easy to work with. jQuery is a JavaScript library that helps with: – HTML document traversal.
Creating Dynamic Webpages
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
Summer 2007 Florida Atlantic University Department of Computer Science & Engineering COP 4814 – Web Services Dr. Roy Levow Part 1 – Introducing Ajax.
JQuery and AJAX WEB Technologies : PHP Programming Language.
AJAX. Ajax  $.get  $.post  $.getJSON  $.ajax  json and xml  Looping over data results, success and error callbacks.
INTRODUCTION JavaScript can make websites more interactive, interesting, and user-friendly.
CHAPTER 8 AJAX & JSON WHAT IS AJAX? Ajax lets you…
AJAX and REST. Slide 2 What is AJAX? It’s an acronym for Asynchronous JavaScript and XML Although requests need not be asynchronous It’s not really a.
October 7 th, 2010 SDU Webship. What did we learn last week? jQuery makes it really easy to select elements and do stuff with them. jQuery can process.
AJAX – Asynchronous JavaScript And XML By Kranthi Kiran Nuthi CIS 764 Kansas State University.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
Introduction to JavaScript MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/2/2016.
AJAX CS456 Fall Examples Where is AJAX used? Why do we care?
Introduction to AJAX MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/4/2016.
JQuery, JSON, AJAX. AJAX: Async JavaScript & XML In traditional Web coding, to get information from a database or a file on the server –make an HTML form.
Ajax & Client-side Dynamic Web Gunwoo Park (Undergraduate)
National College of Science & Information Technology.
JavaScript, AJAX and JSON MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/9/2016.
Introduction to JavaScript MIS 3502, Fall 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 9/29/2016.
Web Technologies Computing Science Thompson Rivers University
Javascript and Dynamic Web Pages: Client Side Processing
JavaScript and Ajax (Ajax Tutorial)
AJAX and REST.
Application with Cross-Platform GUI
AJAX.
Asynchronous Java script And XML Technology
AJAX.
Introduction to AJAX MIS 3502 Jeremy Shafer Department of MIS
Introduction to JavaScript
Introduction to AJAX MIS 3502 Jeremy Shafer Department of MIS
IS 360 Course Introduction
A second look at JavaScript
Web Browser server client 3-Tier Architecture Apache web server PHP
Ajax and JSON (jQuery part 2)
JavaScript & jQuery AJAX.
Secure Web Programming
Sending a text message (and more)
Form Validation, Part 2 (with jQuery, HTML5, and CSS)
MIS JavaScript and API Workshop (Part 3)
Introduction to AJAX and JSON
An Introduction to Animation
MIS JavaScript and API Workshop (Part 2)
An Introduction to JavaScript
Sending a text message (and more)
An introduction to jQuery
Introduction to JavaScript
AJAX CS-422 Dick Steflik.
An introduction to jQuery
MVC – Model View Controller
Web Technologies Computing Science Thompson Rivers University
An introduction to jQuery
Introduction to AJAX and JSON
Ajax and JSON Jeremy Shafer Department of MIS Fox School of Business
Sending a text message (and more)
AJAX By Prof. B.A.Khivsara
Presentation transcript:

Ajax and JSON Jeremy Shafer Department of MIS Fox School of Business Temple University

Visualizing what we have done so far… Web Server URL, referencing a web page Browser JavaScript Engine HTTP Response Database This is called a “round trip”. Round trips are relatively expensive (in terms of computing power). We’ve been using JavaScript form validation to prevent unnecessary round trips. JavaScript/jQuery run here, in the browser, and do not interact with any resource outside the browser.

The DOM (Document Object Model) JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can remove existing HTML elements and attributes JavaScript can add new HTML elements and attributes JavaScript can react to all existing HTML events in the page JavaScript can create new HTML events in the page All of these activities are accomplished through the properties and methods of objects. NEW IDEA: We can use data, provided by AJAX, and present it in the DOM. Source: http://www.w3schools.com/js/js_htmldom.asp

An AJAX call we see every day…

So, what’s AJAX? AJAX is short for Asynchronous JavaScript and XML It is the combination of these technologies, not a separate technology in itself It’s kind of sneaky…

AJAX uses JavaScript to call web services Web Server URL, referencing a web page Browser JavaScript Engine HTTP Response (the WHOLE page) Database Less of this

AJAX uses JavaScript to call resources Web server HTTP Request Browser (just the data we need) JavaScript Engine Database More of this

AJAX uses JavaScript to call Resources Not this Jesse James!  The term "Ajax" was publicly stated on 18 February 2005 by Jesse James Garrett in an article titled "Ajax: A New Approach to Web Applications", based on techniques used on Google pages. This object acts like a browser, inside the browser. The object is used to retrieve a web resource. XMLHttpRequest()

XMLHttpRequest allows us to do things like this… Yuck! 

$.getJSON(someurl, function(result) { some things to do }) Or… using jQuery  Yes, there really is a dot here. There’s actually a piece here that we’re intentionally leaving out for now. We would use an optional parameter here to send data to someurl $.getJSON(someurl, function(result) { some things to do }) There are other jQuery methods used to do make Ajax calls: .ajax() .load() .get() .post() A list of jQuery Ajax methods can be found here: https://www.w3schools.com/jquery/jquery_ref_ajax.asp This piece is called “the callback function”. It is the function, that runs, when the call to someurl comes back.

Jason and the Argonauts (1963 film) So, what about JSON? This is Jason Not JSON Jason and the Argonauts (1963 film)

JSON JSON is short for JavaScript Object Notation JSON is an alternative to XML A JSON object looks like this:

JSON vs. XML An XML object looks a little like this: <customers> <NameOfInsured>Jeremy Shafer</NameOfInsured> <Spouse>Kimberly Shafer</Spouse> <Dependents> <firstname>Amanda</firstname> <firstname>Tyler</firstname> <firstname>Jordan</firstname> </Dependents> </customer> </customers>

Where is JSON used? Web server HTTP Request Browser How is the data formatted? JSON? XML? Plain text? JavaScript Engine Database

JSON described JSON (JavaScript Object) Notation, is an open standard format that uses human-readable text to transmit data objects consisting of attribute–value pairs. It is used primarily to transmit data between a server and web application, as an alternative to XML. Although originally derived from the JavaScript scripting language, JSON is a language-independent data format. Code for parsing and generating JSON data is readily available in many programming languages. At the end of the day… think key and value pairs in pattern: [{ “KEY” : “VALUE”, “KEY” : “VALUE” }] http://en.wikipedia.org/wiki/JSON

Let’s come back to this… This is the callback function that will execute when the Ajax call is a success. $.getJSON(someurl, function(result) { some things to do}); Result is the simple object returned by the getJSON method. The URL to visit One or more commands. I can use the data in result here!

Concluding thoughts CDN (jQuery) Web API Web Server CDN (Bootstrap) CDN (other ?) Web API

Let’s slay this beast….