1
00:00:00,000 --> 00:00:00,230

2
00:00:00,230 --> 00:00:02,830
>> SPEAKER: Let's improve upon that
last example a bit further.

3
00:00:02,830 --> 00:00:06,410
This time, rather than using the alert
function, which creates a window that

4
00:00:06,410 --> 00:00:10,330
varies aesthetically from browser to
browser, let's instead embed the

5
00:00:10,330 --> 00:00:14,160
latest stock price inside of my
page itself-- that is, inside

6
00:00:14,160 --> 00:00:15,610
of the page's dom.

7
00:00:15,610 --> 00:00:20,590
>> Notice here, in ajax-2.html, I've
added an additional line that

8
00:00:20,590 --> 00:00:25,900
specifies Price colon, followed by a
span, which is sort of like a division

9
00:00:25,900 --> 00:00:28,480
of the page, but it doesn't
break onto a new line.

10
00:00:28,480 --> 00:00:32,830
And that span has an ID attribute whose
value is price, and some default

11
00:00:32,830 --> 00:00:36,630
text inside of these open and close
tags that simply says to be

12
00:00:36,630 --> 00:00:37,540
determined.

13
00:00:37,540 --> 00:00:42,080
>> Meanwhile, up here in my page's head,
I have a script tag as before.

14
00:00:42,080 --> 00:00:46,640
I construct a URL to quote.php,
passing in a symbol as an HTTP

15
00:00:46,640 --> 00:00:51,110
getParameter, and I call jQuery's
getJSON function as before.

16
00:00:51,110 --> 00:00:55,510
But the line of code that I'm now going
to write when I receive the data

17
00:00:55,510 --> 00:01:01,590
from quote.php, as a JSON object, is
dollar sign, quote, unquote, pound,

18
00:01:01,590 --> 00:01:05,880
price, thereby specifying that I'd like
to get element from my dom, whose

19
00:01:05,880 --> 00:01:08,070
unique identifier is price.

20
00:01:08,070 --> 00:01:12,420
>> And I'd like to then call a function or
method inside of that called html,

21
00:01:12,420 --> 00:01:16,930
which says update the HTML of that
element to be, in this case,

22
00:01:16,930 --> 00:01:19,110
data.price.

23
00:01:19,110 --> 00:01:21,700
>> Let's now save the file and open
this page in my browser.

24
00:01:21,700 --> 00:01:24,570

25
00:01:24,570 --> 00:01:31,830
http://localhost/ajax-2.html--

26
00:01:31,830 --> 00:01:34,930
there's that same form, but this
time with a price beneath it.

27
00:01:34,930 --> 00:01:38,980
Let's type in a symbol like FB for
Facebook and type Get Quote.

28
00:01:38,980 --> 00:01:42,900
And rather than see an alert window this
time, we instead see in my page's

29
00:01:42,900 --> 00:01:44,860
dom Facebook's latest stock price.

30
00:01:44,860 --> 00:01:46,110