1 00:00:00,420 --> 00:00:01,810 Ajax isn't that hard. 2 00:00:01,810 --> 00:00:04,080 We've already looked at the basic steps required 3 00:00:04,080 --> 00:00:07,050 to set up and send an Ajax request. 4 00:00:07,050 --> 00:00:11,790 First you create the XMLHttpRequest object, then you define 5 00:00:11,790 --> 00:00:16,100 a callback function, you open the request, and then you send it. 6 00:00:16,100 --> 00:00:21,100 As I mentioned in the last video opening a request requires specifying the method 7 00:00:21,100 --> 00:00:25,020 you'll use to send the request and the URL you'll send the request to. 8 00:00:25,020 --> 00:00:29,440 The two most common methods are GET and POST. 9 00:00:29,440 --> 00:00:32,840 Here's an easy way to think about which method you should use. 10 00:00:32,840 --> 00:00:34,550 Use GET when you're only interested in 11 00:00:34,550 --> 00:00:37,670 receiving or getting information from a server. 12 00:00:37,670 --> 00:00:41,540 Such as the result of a database search or retrieving a set of tweets. 13 00:00:43,140 --> 00:00:45,910 Use post when sending data that's going to be saved 14 00:00:45,910 --> 00:00:49,500 like an email address for an email newsletter sign-up form. 15 00:00:49,500 --> 00:00:51,050 Or a vote for a Reddit post. 16 00:00:52,500 --> 00:00:54,720 You use the GET method all the time when you 17 00:00:54,720 --> 00:00:57,220 open a web browser and type in a web address. 18 00:00:57,220 --> 00:01:00,940 The web browser uses a get to request a webpage. 19 00:01:00,940 --> 00:01:03,620 The GET method is meant to get a resource, like 20 00:01:03,620 --> 00:01:07,490 a webpage, image, or other file from a web server. 21 00:01:07,490 --> 00:01:12,110 In other words, all that's required for a get request is a url. 22 00:01:12,110 --> 00:01:17,730 But with AJAX, we frequently want more than just a static file of text or HTML. 23 00:01:17,730 --> 00:01:20,970 We're after dynamic, that is, changing information. 24 00:01:20,970 --> 00:01:23,700 Like the latest tweets from your friends, the results of 25 00:01:23,700 --> 00:01:27,960 a web search, or information on an employee in a business. 26 00:01:27,960 --> 00:01:29,650 For a server site program to send 27 00:01:29,650 --> 00:01:32,480 you customized information, like the map of your 28 00:01:32,480 --> 00:01:35,860 current location or photos from your flickr account, 29 00:01:35,860 --> 00:01:38,590 you need to send the server some information. 30 00:01:38,590 --> 00:01:43,170 You can do this by adding data to the url sent to the server. 31 00:01:43,170 --> 00:01:45,810 You may have seen urls that look something like this. 32 00:01:47,730 --> 00:01:51,210 The part after the question mark is called a query string. 33 00:01:51,210 --> 00:01:54,690 A query string appears at the end of a URL and provides a way to 34 00:01:54,690 --> 00:01:57,920 send additional information that a web server can 35 00:01:57,920 --> 00:02:00,230 use to control the output of its response. 36 00:02:01,490 --> 00:02:05,080 Commonly, the data in a query string is used to search a database 37 00:02:05,080 --> 00:02:09,849 of information and return just a single record or a small subset of information. 38 00:02:11,260 --> 00:02:14,490 In this case, the file employees.php 39 00:02:14,490 --> 00:02:17,120 is programmed using the PHP programming language. 40 00:02:18,220 --> 00:02:22,030 In other words, it's not a regular old HTML file, it's a program 41 00:02:22,030 --> 00:02:26,580 that does something and it requires information so it knows what to do. 42 00:02:26,580 --> 00:02:30,920 Its purpose might be to retrieve information on employees at the company. 43 00:02:30,920 --> 00:02:34,200 This information is often sent in a query string. 44 00:02:34,200 --> 00:02:37,700 A query string is made up of one or more name value pairs. 45 00:02:38,800 --> 00:02:42,850 In this example the query string contains one name value pair. 46 00:02:42,850 --> 00:02:45,400 lastName equals Jones. 47 00:02:45,400 --> 00:02:47,980 lastName is the name or property. 48 00:02:47,980 --> 00:02:51,280 The equal sign assigns a value to that property. 49 00:02:51,280 --> 00:02:53,480 Jones is the value here. 50 00:02:53,480 --> 00:02:56,400 Query strings can hold multiple name value pairs. 51 00:02:56,400 --> 00:02:59,270 Simply add an ampersand, followed by another 52 00:02:59,270 --> 00:03:01,450 name, an equal sign and another value. 53 00:03:01,450 --> 00:03:05,720 There are some requirements for query strings. 54 00:03:05,720 --> 00:03:10,560 Most importantly, you can't just use any symbol you want in a query string. 55 00:03:10,560 --> 00:03:13,960 Some characters like the ampersand, equal, space, and 56 00:03:13,960 --> 00:03:17,220 quote marks have special meaning in a URL. 57 00:03:17,220 --> 00:03:19,030 So if you send information that includes 58 00:03:19,030 --> 00:03:22,360 those special characters you need to encode them. 59 00:03:22,360 --> 00:03:25,120 That is, translate them into a set of symbols that 60 00:03:25,120 --> 00:03:29,860 are safe and don't conflict with their URL specific version. 61 00:03:29,860 --> 00:03:33,864 For example, ampersand is represented by %26. 62 00:03:33,864 --> 00:03:37,460 A space is converted to a plus. 63 00:03:37,460 --> 00:03:40,230 And a plus is converted to %2B. 64 00:03:40,230 --> 00:03:40,730 There 65 00:03:42,780 --> 00:03:47,490 are lots of online tools that demonstrate what URL encoded strings look like. 66 00:03:47,490 --> 00:03:51,360 The site URL Encode and Decode online is one of them. 67 00:03:51,360 --> 00:03:55,206 For example, let me type in a string with spaces, quotes, and an ampersand. 68 00:03:55,206 --> 00:04:01,625 [BLANK_AUDIO] 69 00:04:01,625 --> 00:04:07,554 Now, when I click the URL encode button, you can see how it's translated. 70 00:04:07,554 --> 00:04:11,860 You can also use this tool to decode a URL encoded string. 71 00:04:11,860 --> 00:04:13,470 Don't worry about memorizing these codes. 72 00:04:13,470 --> 00:04:16,120 As you'll learn later, JavaScript and jQuery both 73 00:04:16,120 --> 00:04:19,372 include functions that do this conversion for you. 74 00:04:19,372 --> 00:04:22,960 The GET method is a simple way to send data to a web server. 75 00:04:22,960 --> 00:04:25,520 However, there are some down sides to it. 76 00:04:25,520 --> 00:04:29,490 First, all of the data is sent in the URL, which means that if you need 77 00:04:29,490 --> 00:04:32,250 to send sensitive information, like a social security 78 00:04:32,250 --> 00:04:35,720 number, a password or your personal telephone number. 79 00:04:35,720 --> 00:04:38,380 It will appear in the computer's browser history 80 00:04:38,380 --> 00:04:41,030 and show up in the web server's log files. 81 00:04:41,030 --> 00:04:43,510 This isn't the most secure solution. 82 00:04:43,510 --> 00:04:47,480 Second, there's only so much information you can put into a URL. 83 00:04:47,480 --> 00:04:54,130 For example, Internet Explorer can only handle URLs that are 2083 characters long. 84 00:04:54,130 --> 00:04:56,260 When you need to send lots of information, 85 00:04:56,260 --> 00:04:59,410 like a blog post, the get method isn't good. 86 00:04:59,410 --> 00:05:03,830 That's why http offers another method called POST. 87 00:05:03,830 --> 00:05:06,830 The POST method sends data differently than get. 88 00:05:06,830 --> 00:05:11,240 Whereas get puts all its information in the url, the post method sends 89 00:05:11,240 --> 00:05:15,950 data separate from the url, in what's called the body of the request. 90 00:05:15,950 --> 00:05:17,710 For example, say you had a sign up 91 00:05:17,710 --> 00:05:21,350 form on your site with username and password fields. 92 00:05:21,350 --> 00:05:23,630 Using get to submit that form, you'd see 93 00:05:23,630 --> 00:05:26,410 the username and password in the URL like this. 94 00:05:28,280 --> 00:05:34,390 However, using post, the URL to the sign up script has no extra information. 95 00:05:34,390 --> 00:05:37,930 The actual form data is sent separate from the URL. 96 00:05:37,930 --> 00:05:40,100 Not only is this more secure, it also let's 97 00:05:40,100 --> 00:05:42,180 you send a lot more information to the server. 98 00:05:42,180 --> 00:05:47,890 The post method does require special encoding, just like get requests. 99 00:05:47,890 --> 00:05:52,500 In addition, you need to set up a special header for the request. 100 00:05:52,500 --> 00:05:54,940 That's an instruction, sent to the server, telling 101 00:05:54,940 --> 00:05:56,770 it what kind of data it should expect. 102 00:05:58,110 --> 00:06:00,970 In many cases, you can use either get or post, but 103 00:06:00,970 --> 00:06:04,200 the basic rule of thumb is that if you're requesting information, 104 00:06:04,200 --> 00:06:07,640 like search results, new HTML to add to a page, 105 00:06:07,640 --> 00:06:10,270 photos from a photo service and so on, use get. 106 00:06:11,670 --> 00:06:13,390 On the other hand, use post if you're 107 00:06:13,390 --> 00:06:16,680 sending information that's to be stored in a database, 108 00:06:16,680 --> 00:06:19,300 if the data is sensitive, like a password, or 109 00:06:19,300 --> 00:06:21,490 if you're sending lots of information from a form.