Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Web 2.0, AJAX, JavaScript and you

No description
by

Ralph Corbett

on 23 July 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Web 2.0, AJAX, JavaScript and you

I
How does Web 2.0 manage to do the magic?
The blogs are connected.
Google Search engine second guesses.
Ralph Corbett



The little gremlins behind the webpage mag
numerous, and a few of them keep showing up.

What do these have to do with Web 2.0?

Why is XMLHttpRequest called the
of Web 2.0?
AJAX made Web 2.0 possible.
It makes interaction with the internet behave like a
desktop application –instant results.
It removes the

AJAX is a combination of JavaScript, Dom and XML
JavaScript is built into every web browser.
It makes WebPages more dynamic.
It makes communication with servers better.
The server
If a user pushes the Submit button, their computer sends signals to a server.
Server sends signal back to client, and client refreshes page.
Some browsers have their own version of JavaScript.
This gives web developers a
This is the
All browsers, fortunately, support the
This little command is the beating heart of AJAX, and Web 2.0.
Sho Kosugi
Japanese martial artist
and actor.
Usually plays a ninja.


There was a very long time between responses, and the
.
Where can I find AJAX in Web 2.0?


Google’s search engine box gives suggestions or second guessing
Ever sign up for a new service, or blog, and the little box asks for username, and as soon as your done typing, it says the user name
As bandwidth is almost dirt cheap and faster than ever, AJAX can now do these things.
Google Maps uses AJAX to load

When the user drags the map, map grid squares are downloaded from the
server. When a user searches for a business, the results are downloaded and
inserted into the

This is a fast integration of two or more
to create a Web page or other application. It has three layers, all using AJAX.
Others
Photos on Facebook load in the background without

Gmailed an event? This can be added to Google Calendar to create a shared
Simple AJAX code
// The AJAX part.
function getData(dataSource)
{
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest)
XMLHttpRequestObject = new XMLHttpRequest();
else if (window.ActiveXObject)
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");

if(XMLHttpRequestObject)
{
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
//document.getElementById("ID_Name").innerHTML = XMLHttpRequestObject.responseText;

phpSide = XMLHttpRequestObject.responseText; // Loading array intoone long string.

delete XMLHttpRequestObject;
XMLHttpRequestObject = null;
seperatingPHP();
}
}
XMLHttpRequestObject.send(null);
}
}

It is written in JavaScript and saved as an ordinary JavaScript file (.js)
Normally, this would link to ID tags in a HTML web page.
From
my
webpage's
foreign
language
section
Here is a


So keep your blogs, and other Web 2.0s clean,
Hello
DOM!
AJAX!
JavaScript!
client computers
and
servers
is what sends data to the
data
data
data
wait
between
data
server
The
client
data
data
data
data
A
AJAX stands for
synchronous
vaScript
JA
X
DOM = HTTP + CSS + DHTML + XHTML + ...
XML is not mandatory.
AJAX unofficially
can be used
greatly with
PHP!
ML
client computer.
Clients process all data.
code
code
code
code
code
|
|
|
de
|
|
|
|
drops the entire program code into the
re
loaded.
>
>
>
client
O
O
|
|
This causes screen
and the entire webpage is
blink
blink
blink
blink
blink
computer
a
client
Your
is
Magnetic Poetry
Tag Cloud Art
TM
In a style of
Typography
i.e.
Netscape
IE
F
i
r
e
fox
h
e
a
d
a
c
h
e
WARS
BROWSER
It is the ninja king! Sho Kosugi!
Hey look. It’s my web page!
AJAX uses PHP to contact the server, which has the sentences, and inserts them into textboxes.
code this
YouTube tutorial
I made
on how to
client
client
server
server
chat
chat
chat
chat
chat
chat
chat
chat
you
will speak, and
speak, and
I
Before this, user and webpage interaction was:
Then
I
will
wait.
you
wait.
will
webpage had to be
e
n
t
i
r
e
reloaded
This takes up a lot of download time.
Now, it’s like a chat room, both talking at the same time.
reloaded
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?

of what a person is typing in.
second guessing quotes
second guessing yourself
second guessing myself
second guessing wedding dress
second guessing grandma
of what a person is looking for.
This is AJAX sneaking into the server
to retrieve to most common usage
.
.
.
.
.
.
.
.
)
)
my web
|
Web 2.0, AJAX, JavaScript and you
In the old days of 52K dial up, it would not have been so impressive.
.
in use?
Without pushing the submit button, which causes the page to reload, and flicker.
|
|
user name is unavailiable try:
username_2011
username_1054am
user_nameRC
user_nameRocks
That is AJAX doing some behind the scenes work to look into that webpage’s database to see if username_1054am is availiable.
is
already
!
"yea. that one."
reloaded
m
a
p
gm
se
en
ts
.
and the
The page is not reloaded.
s
i
d
e
p
a
n
e
l
m
a
p
s
client
o
o
|
|
whew!
n
i
n
j
a
a
l
l
i
a
n
c
e
the whole page.
re
loading


Create a pole or five star voting systems on your blog or webpage. Votes will be recorded and updated in real-time.

Tag clouds, GMAIL, Flicker and many more.
with a community
or to display upcoming plans on your blog.
calendar
calendar
calendar
calendar
calendar
community
calendar
calendar
community
calendar
community
calendar
community
community
Why?
I
Because
document.getElementById("Id Tag").innerHtml = ...;
instead.
I used
textboxes
input type = "text"
>
<
can
i have a positive can-do attitude
Warning!
Technical
Warning!
Technical
Technical
Warning!
Technical
Warning!
Mash
ups
|
|
|
|
gulp
|
sources
1
2
sources
sources
3
sources
4
sources
5

Web Services -Hooking up two electronic devices.
inserting data into form fields
Data handling –sending, storing and receiving.
Presentation or user interaction.
click me
mouse over me
Yo!
Click this!
.
.
.
I can buy a Corvette for $10.00 ???
Mash-ups easily hacked into
and Prices changed.
Beware.
networking hardware.
+
+
+
+
Web pages can load different languages with a mouse click on the flag.
with AJAX
...its free.
does this often.
TMZ
.com
Clinet has to work harder
XMLHttpRequest
starring in
A
h
h
h
h
h
!
|
*
'
'
'
'
'
'
w
a
I
t
Live
voting systems.
All without the
Live
Live
Live
Live
voting systems.
.
.
.
.
.
.
*
c are
'
'
'
'
'
'
gremlins
gremlins
gremlins
gremlins
gremlins
little gremlins
|
<
We are going to look at these.
d
a
n
c
e
/
t
r
a
n
c
e
< < click me
and not these
|
>
big gremlins
XMLHttpRequest
Web 2.0
Web 3.0
Web 2.0
Web 2.0
Web 2.0
Web 2.0
Web 2.0
Row lads!
Row!
There be a new world ahead.
'
|
'
heart
command XMLHttpRequest.
Netscape
IE
Firefox
JavaScript
'
'
This is a sneaky “ninja” command which creeps into the server, retrieves data,
and returns to the client
without making a sound, or screen blink.
data
ajnin
atad
ninja
XMLHttpRequest
XMLHttpRequest
ninja tool - Kama
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
|
|
|
|
|
.
Best seen in sequence
http://tunein.com/radio/Frisky-Radio-s2107/
Full transcript