1
00:00:00,000 --> 00:00:02,340
>> SPEAKER 1: Let's implement a web
page that allows users to

2
00:00:02,340 --> 00:00:03,660
look up stock quotes.

3
00:00:03,660 --> 00:00:07,970
Let's suppose first that there exists
a file called quote.php, but this

4
00:00:07,970 --> 00:00:11,110
could be implemented in most any
language, but whose purpose in life is

5
00:00:11,110 --> 00:00:15,800
to expect an HTTP get parameter called
symbol, the value of which is the

6
00:00:15,800 --> 00:00:18,120
symbol of the stock for which
you'd like a quote.

7
00:00:18,120 --> 00:00:22,530
>> For instance, if we look at this file in
my browser, quote.php, notice that

8
00:00:22,530 --> 00:00:26,900
I've passed in, already, a symbol
of FB, for Facebook.

9
00:00:26,900 --> 00:00:31,060
And notice that what has come back
is a JSON object with three keys.

10
00:00:31,060 --> 00:00:34,560
One's called symbol, one called
name, and one called price.

11
00:00:34,560 --> 00:00:38,920
The values of which are exactly that
from the file in question.

12
00:00:38,920 --> 00:00:41,680
>> Now let's turn our attention to the
beginnings of some HTML and

13
00:00:41,680 --> 00:00:43,340
JavaScript.

14
00:00:43,340 --> 00:00:48,990
Here, in ajax-0.html, notice that inside
of my page's body I have a form

15
00:00:48,990 --> 00:00:53,430
that has an onsubmit attribute, the
value of which is quote and return

16
00:00:53,430 --> 00:00:57,020
false, thereby specifying that I'd like
to call a JavaScript function

17
00:00:57,020 --> 00:00:59,660
called quote and then return false.

18
00:00:59,660 --> 00:01:04,459
Meanwhile, inside of that form is a
symbol whose ID is, quote unquote,

19
00:01:04,459 --> 00:01:07,940
"symbol," and then another input whose
type is submit that gives me a

20
00:01:07,940 --> 00:01:09,280
submission button.

21
00:01:09,280 --> 00:01:13,460
>> Meanwhile, inside of my page's head,
there is a script tag, the source of

22
00:01:13,460 --> 00:01:18,000
which is the URL to jquery, the very
popular JavaScript library, and below

23
00:01:18,000 --> 00:01:21,150
that is another script tag, inside of
which is the beginnings of some

24
00:01:21,150 --> 00:01:23,440
JavaScript that I myself will write.

25
00:01:23,440 --> 00:01:26,900
This is the quote function that will
ultimately be called, and inside of

26
00:01:26,900 --> 00:01:31,300
here let's declare a variable called
URL, specified that the value of this

27
00:01:31,300 --> 00:01:32,590
variable shall be quote.php?symbol=".

28
00:01:32,590 --> 00:01:38,090

29
00:01:38,090 --> 00:01:42,170
>> And now let's concatenate onto the end
of that initial string whatever symbol

30
00:01:42,170 --> 00:01:43,840
the user has presumably typed.

31
00:01:43,840 --> 00:01:51,770
Specifically, let's do +$""#symbol
thereby specifying that I'd like to

32
00:01:51,770 --> 00:01:54,910
get, with jquery from my DOM,
the element whose unique

33
00:01:54,910 --> 00:01:56,430
identifier, a symbol.

34
00:01:56,430 --> 00:01:59,500
Recall that that is simply the text
field into which the user is going to

35
00:01:59,500 --> 00:02:01,210
type that stock symbol.

36
00:02:01,210 --> 00:02:05,030
>> Then let's call val, which is a function
or method that will get the

37
00:02:05,030 --> 00:02:06,740
value that the user's typed in.

38
00:02:06,740 --> 00:02:11,540
And then let's call a jquery function
called getJSON, passing in as the

39
00:02:11,540 --> 00:02:16,010
first argument that URL, passing in, as
the second argument, an anonymous

40
00:02:16,010 --> 00:02:18,900
function that expects
a single argument.

41
00:02:18,900 --> 00:02:20,360
Data, we'll call it.

42
00:02:20,360 --> 00:02:25,130
And inside of this anonymous function,
we'll simply do alert, and then in

43
00:02:25,130 --> 00:02:27,940
parentheses, data.price.

44
00:02:27,940 --> 00:02:31,470
If data, after all, is that JSON
object with three fields--

45
00:02:31,470 --> 00:02:35,100
symbol, name, and price, by
doing data.price I'll get

46
00:02:35,100 --> 00:02:36,640
exactly that value.

47
00:02:36,640 --> 00:02:39,000
>> Let's now save the file and
open it up in a browser.

48
00:02:39,000 --> 00:02:42,230

49
00:02:42,230 --> 00:02:48,760
http://localhost/ajax-0.html.

50
00:02:48,760 --> 00:02:49,870
Here we have that form.

51
00:02:49,870 --> 00:02:52,890
Let's type in FB for Facebook
and get quote.

52
00:02:52,890 --> 00:02:55,070
And there, then, is Facebook's
latest stock price.

53
00:02:55,070 --> 00:02:58,368