title
AJAX Crash Course (Vanilla JavaScript)

description
In this video we will dive into AJAX with Vanilla JS and NO JQUERY. We will examine the XHR object and how it works. This is a beginner friendly tutorial for anyone that has very basic JavaScript knowledge. We will make xhr requests to a txt file, local json files, an external API and even PHP files. CODE: Files for this course http://www.traversymedia.com/downloads/ajaxcrash.zip BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia NEW DISCORD CHAT SERVER: https://discord.gg/traversymedia

detail
{'title': 'AJAX Crash Course (Vanilla JavaScript)', 'heatmap': [{'end': 1675.235, 'start': 1628.365, 'weight': 0.702}, {'end': 4180.203, 'start': 4139.978, 'weight': 1}], 'summary': 'This crash course on ajax technology covers its evolution to using json over xml, setting up ajax requests, creating xhr object, handling xhr events and states, working with local json and external api, using ajax for data interaction, and integrating with mysql database.', 'chapters': [{'end': 399.603, 'segs': [{'end': 119.137, 'src': 'embed', 'start': 91.316, 'weight': 0, 'content': [{'end': 95.238, 'text': "And it's just easier, it's faster, and it's much more popular.", 'start': 91.316, 'duration': 3.922}, {'end': 103.123, 'text': "So most of the APIs, if you're working with external APIs, you're probably going to be working with JSON and not XML.", 'start': 95.958, 'duration': 7.165}, {'end': 104.484, 'text': 'Or maybe both.', 'start': 103.763, 'duration': 0.721}, {'end': 109.328, 'text': 'Sometimes these external APIs will return both if needed.', 'start': 104.784, 'duration': 4.544}, {'end': 113.092, 'text': 'And AJAX can also just work with plain text.', 'start': 110.589, 'duration': 2.503}, {'end': 119.137, 'text': "So let's take a look at a quick diagram to kind of explain how AJAX works.", 'start': 114.373, 'duration': 4.764}], 'summary': 'Working with json is faster and more popular than xml for most external apis.', 'duration': 27.821, 'max_score': 91.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA91316.jpg'}, {'end': 172.059, 'src': 'embed', 'start': 145.791, 'weight': 1, 'content': [{'end': 152.217, 'text': 'and then the server sends a common response back which includes the headers, the webpage, pretty much just everything.', 'start': 145.791, 'duration': 6.426}, {'end': 155.02, 'text': 'We request everything and we get everything.', 'start': 152.257, 'duration': 2.763}, {'end': 156.923, 'text': 'Well, with Ajax,', 'start': 155.581, 'duration': 1.342}, {'end': 165.935, 'text': 'what it allows us to do is it allows us to make requests asynchronously in the background without having to reload or refresh the entire webpage.', 'start': 156.923, 'duration': 9.012}, {'end': 172.059, 'text': 'Alright. so if we wanted to just update one little section of text, we can do that with Ajax,', 'start': 166.656, 'duration': 5.403}], 'summary': 'Ajax enables asynchronous background requests for updating webpage content.', 'duration': 26.268, 'max_score': 145.791, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA145791.jpg'}, {'end': 265.338, 'src': 'embed', 'start': 235.2, 'weight': 3, 'content': [{'end': 237.381, 'text': "you'll get it back and you'll do what you want with it.", 'start': 235.2, 'duration': 2.181}, {'end': 243.745, 'text': 'you can put it in your web page or whatever it is that you want to do this just so many different things that you can do with Ajax.', 'start': 237.381, 'duration': 6.364}, {'end': 255.192, 'text': 'Now, like I said, this happens through something called the XMLHttpRequestObject, also called the XHRObject.', 'start': 245.346, 'duration': 9.846}, {'end': 260.315, 'text': 'This is actually an API in the form of an object.', 'start': 255.252, 'duration': 5.063}, {'end': 265.338, 'text': 'What I mean by an object is it has properties and methods attached to it.', 'start': 260.675, 'duration': 4.663}], 'summary': 'The xmlhttprequestobject, or xhrobject, is an api with properties and methods for various uses like web page integration.', 'duration': 30.138, 'max_score': 235.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA235200.jpg'}, {'end': 405.507, 'src': 'embed', 'start': 375.186, 'weight': 4, 'content': [{'end': 377.748, 'text': 'so these are really nice libraries to work with.', 'start': 375.186, 'duration': 2.562}, {'end': 381.21, 'text': 'The Fetch API is actually part of the browser.', 'start': 378.688, 'duration': 2.522}, {'end': 383.011, 'text': "It's pretty new.", 'start': 381.73, 'duration': 1.281}, {'end': 386.374, 'text': "I know it's fully implemented in Firefox and Chrome.", 'start': 383.412, 'duration': 2.962}, {'end': 387.935, 'text': "I'm not too sure about the others.", 'start': 386.394, 'duration': 1.541}, {'end': 396.54, 'text': "So if someone wants to clarify the compatibility with Edge and Safari and these other browsers, I'm not really sure.", 'start': 388.395, 'duration': 8.145}, {'end': 399.603, 'text': 'I have used it and I do like it.', 'start': 397.981, 'duration': 1.622}, {'end': 402.084, 'text': "I'm just not sure as far as the compatibility goes.", 'start': 399.663, 'duration': 2.421}, {'end': 405.507, 'text': 'Although I know there are polyfills for it and stuff like that.', 'start': 402.425, 'duration': 3.082}], 'summary': 'The fetch api is implemented in firefox and chrome, but compatibility with other browsers is uncertain. polyfills are available.', 'duration': 30.321, 'max_score': 375.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA375186.jpg'}], 'start': 7.711, 'title': 'Ajax technology', 'summary': 'Provides an introduction to ajax technology, emphasizing its importance in web development, its evolution to using json over xml, and its impact on enhancing webpage interactivity and speed. it also covers the xmlhttprequest object and various libraries for making ajax calls.', 'chapters': [{'end': 119.137, 'start': 7.711, 'title': 'Introduction to ajax technology', 'summary': 'Provides an introduction to ajax technology, covering its importance in web development, its definition as an acronym for asynchronous javascript and xml, and its evolution to primarily using json over xml for sending and receiving data from a client to a server asynchronously.', 'duration': 111.426, 'highlights': ['Ajax is an acronym for asynchronous JavaScript and XML, but JSON has largely replaced XML in its usage. The chapter highlights that JSON has become more popular than XML in Ajax technology, attributed to its ease of use, speed, and popularity.', 'Ajax technology enables sending and receiving data from a client to a server asynchronously, without having to explicitly reload the web page. The chapter emphasizes the key functionality of Ajax technology, allowing data exchange between client and server without explicit page reloads, contributing to a smoother user experience.', 'Introduction of a Discord chat server for programming and web development support and discussion is mentioned. The chapter mentions the creation of a Discord chat server for supporting programming and web development, providing a platform for assistance, idea sharing, and daily interaction.']}, {'end': 235.2, 'start': 119.898, 'title': 'Introduction to ajax and asynchronous requests', 'summary': 'Explains how ajax allows making asynchronous requests in the background, updating specific sections of a webpage, returning data in json format, and using the xml http request object, enhancing webpage interactivity and speed.', 'duration': 115.302, 'highlights': ['The chapter explains how Ajax allows making asynchronous requests in the background, updating specific sections of a webpage, and returning data usually in JSON format, improving webpage interactivity and speed.', "The server sends a common response back, which includes headers, webpage, and more. With Ajax, it's possible to update one little section of text without having to reload or refresh the entire webpage, making things much more interactive and faster.", 'The server returns data, usually in JSON format, and the request is done using the XML HTTP request object, which enhances webpage interactivity and speed.']}, {'end': 399.603, 'start': 235.2, 'title': 'Understanding ajax and its implementations', 'summary': 'Introduces the xmlhttprequestobject, its methods for transferring data between client and server, and various libraries like jquery, axios, super agent, and the fetch api for making ajax calls.', 'duration': 164.403, 'highlights': ["The XMLHttpRequestObject, also known as the XHRObject, is an API provided by the browser's JavaScript environment, used for transferring data between client and server or browser and server.", 'AJAX is commonly used with JSON and plain text, and the XMLHttpRequestObject can work with protocols other than HTTP.', 'Libraries like jQuery, axios, and super agent are recommended for making HTTP requests and handling updates and deletes, while the Fetch API is a part of the browser, fully implemented in Firefox and Chrome.']}], 'duration': 391.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA7711.jpg', 'highlights': ['JSON has largely replaced XML in Ajax technology, attributed to its ease of use, speed, and popularity.', 'Ajax technology allows data exchange between client and server without explicit page reloads, contributing to a smoother user experience.', 'Ajax allows making asynchronous requests in the background, updating specific sections of a webpage, and returning data usually in JSON format, improving webpage interactivity and speed.', "The XMLHttpRequestObject, also known as the XHRObject, is an API provided by the browser's JavaScript environment, used for transferring data between client and server or browser and server.", 'Libraries like jQuery, axios, and super agent are recommended for making HTTP requests and handling updates and deletes, while the Fetch API is a part of the browser, fully implemented in Firefox and Chrome.']}, {'end': 768.845, 'segs': [{'end': 491.011, 'src': 'embed', 'start': 445.071, 'weight': 0, 'content': [{'end': 446.833, 'text': "Alright, guys, so we're going to get started now.", 'start': 445.071, 'duration': 1.762}, {'end': 451.039, 'text': 'as far as your environment, you do need to have some kind of server to work with Ajax.', 'start': 446.833, 'duration': 4.206}, {'end': 458.088, 'text': "you don't want to be just opening your HTML file from you know, from Windows or from your file system, and now you can.", 'start': 451.039, 'duration': 7.049}, {'end': 459.41, 'text': 'you have a lot of different options.', 'start': 458.088, 'duration': 1.322}, {'end': 461.753, 'text': "what we're going to be doing is using XAMPP, which is.", 'start': 459.41, 'duration': 2.343}, {'end': 464.455, 'text': 'It gives us an Apache server.', 'start': 462.874, 'duration': 1.581}, {'end': 468.357, 'text': 'It gives us PHP and MySQL on our local machine.', 'start': 464.515, 'duration': 3.842}, {'end': 473.28, 'text': 'And if you want to install this, you can go to apachefriends.org and you can install it.', 'start': 468.978, 'duration': 4.302}, {'end': 478.884, 'text': 'If you watch the second video of my PHP front-to-back series, it shows you how to install it.', 'start': 473.901, 'duration': 4.983}, {'end': 485.447, 'text': "Now, the reason I'm using this is because we are going to deal a little bit with PHP towards the end.", 'start': 479.904, 'duration': 5.543}, {'end': 491.011, 'text': 'For those videos, you will need PHP, and XAMPP gives you that.', 'start': 486.268, 'duration': 4.743}], 'summary': 'Using xampp provides apache, php, and mysql on local machine for working with ajax and php.', 'duration': 45.94, 'max_score': 445.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA445071.jpg'}, {'end': 587.103, 'src': 'embed', 'start': 560.568, 'weight': 2, 'content': [{'end': 564.29, 'text': "now what we're gonna do is just set up a basic HTML document.", 'start': 560.568, 'duration': 3.722}, {'end': 566.371, 'text': "now I'm using VS code, which has Emmett,", 'start': 564.29, 'duration': 2.081}, {'end': 577.816, 'text': "so I can just do an exclamation and tab and it'll give me this basic HTML layout and I'm just gonna enable word wrap here so you guys can see everything all right.", 'start': 566.371, 'duration': 11.445}, {'end': 582.101, 'text': "and then what I'll do is just Let's change the title.", 'start': 577.816, 'duration': 4.285}, {'end': 584.302, 'text': "We'll say Ajax 1.", 'start': 582.121, 'duration': 2.181}, {'end': 587.103, 'text': 'And I just want to give a little description for each file.', 'start': 584.302, 'duration': 2.801}], 'summary': 'Setting up basic html document using vs code with emmett for ajax 1.', 'duration': 26.535, 'max_score': 560.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA560568.jpg'}], 'start': 399.663, 'title': 'Ajax setup and usage', 'summary': 'Covers setting up ajax requests using xhr object, the necessity of a server environment like xampp, creating multiple files to explore various ajax functionalities, and setting up basic html document for asynchronous text file fetching, aiming for a crash course lasting about an hour.', 'chapters': [{'end': 491.011, 'start': 399.663, 'title': 'Setting up ajax requests', 'summary': 'Focuses on setting up ajax requests using xhr object, understanding its methods and properties; the necessity of a server environment like xampp for ajax development is highlighted, and the availability of php support via xampp is emphasized.', 'duration': 91.348, 'highlights': ['The necessity of a server environment like XAMPP is highlighted for working with Ajax, as simply opening HTML files from the file system is discouraged.', 'XAMPP is recommended for its provision of an Apache server, PHP, and MySQL on the local machine, essential for dealing with PHP towards the end of the series.', 'The chapter focuses on setting up Ajax requests using XHR object, understanding its methods and properties, and potentially exploring the use of libraries.']}, {'end': 560.568, 'start': 491.791, 'title': 'Using ajax for external api requests', 'summary': 'Demonstrates setting up a server environment using xampp and creating multiple files to explore various ajax functionalities, aiming for a crash course lasting about an hour.', 'duration': 68.777, 'highlights': ['The chapter focuses on utilizing XAMPP as the server environment for creating and testing Ajax functionalities, with a target duration of approximately one hour.', 'The instructor plans to cover loading plain text files, JSON, external data, and data from a PHP file, along with exploring different libraries, comprising about eight different files in total.', 'It is highlighted that the tutorial aims to be concise, aiming to keep the crash course around an hour in duration.']}, {'end': 768.845, 'start': 560.568, 'title': 'Setting up basic html document for asynchronous text file fetching', 'summary': 'Demonstrates setting up a basic html document for fetching a text file asynchronously, including creating a button to trigger the ajax call and creating an event listener. it also shows the process of setting up the text file and testing the button click functionality.', 'duration': 208.277, 'highlights': ['The chapter demonstrates setting up a basic HTML document with VS code and Emmet for creating an AJAX request to fetch a text file asynchronously.', 'It includes creating a button with an ID and event listener to trigger the AJAX call for fetching the text file.', 'The process of setting up the text file by creating a simple sample.txt file with 50 words of sample text is shown.']}], 'duration': 369.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA399663.jpg', 'highlights': ['XAMPP is recommended for its provision of an Apache server, PHP, and MySQL on the local machine, essential for dealing with PHP towards the end of the series.', 'The chapter focuses on utilizing XAMPP as the server environment for creating and testing Ajax functionalities, with a target duration of approximately one hour.', 'The chapter demonstrates setting up a basic HTML document with VS code and Emmet for creating an AJAX request to fetch a text file asynchronously.']}, {'end': 1106.393, 'segs': [{'end': 870.051, 'src': 'embed', 'start': 841.867, 'weight': 1, 'content': [{'end': 846.972, 'text': "So we'll take that XHR, All right, and actually you know what before we do that.", 'start': 841.867, 'duration': 5.105}, {'end': 855.858, 'text': "Let's just console dot log the XHR All right, just so you can see that this is actually an object with a bunch of properties and methods.", 'start': 847.012, 'duration': 8.846}, {'end': 862.244, 'text': "So if I click the button, you'll see XML HTTP requests, and it has all this stuff associated with it.", 'start': 855.898, 'duration': 6.346}, {'end': 865.787, 'text': "So it has an onload function, which we're going to be dealing with.", 'start': 862.784, 'duration': 3.003}, {'end': 870.051, 'text': 'It has a ready state with different values.', 'start': 867.469, 'duration': 2.582}], 'summary': 'Xhr object has properties and methods, including onload function and ready state with different values.', 'duration': 28.184, 'max_score': 841.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA841867.jpg'}, {'end': 917.374, 'src': 'embed', 'start': 893.996, 'weight': 2, 'content': [{'end': 903.223, 'text': "So we're going to say xhr.open and then, like I said, it takes in these three parameters.", 'start': 893.996, 'duration': 9.227}, {'end': 907.226, 'text': 'first one is going to be the type of request which is going to be get.', 'start': 903.223, 'duration': 4.003}, {'end': 910.148, 'text': "then it's going to take the URL or the file name.", 'start': 907.226, 'duration': 2.922}, {'end': 917.374, 'text': "in our case it's just going to be sample.txt, and then it's going to be a true or false, if it's going to be asynchronous or not.", 'start': 910.148, 'duration': 7.226}], 'summary': 'Using xhr.open for a get request with sample.txt file, and specifying asynchronous behavior.', 'duration': 23.378, 'max_score': 893.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA893996.jpg'}, {'end': 1088.346, 'src': 'embed', 'start': 1062.797, 'weight': 0, 'content': [{'end': 1067.702, 'text': "so if i comment that out, you'll see it's not going to log anything, but with the chrome tools,", 'start': 1062.797, 'duration': 4.905}, {'end': 1072.719, 'text': "if we go to network And we reload and you'll see there's nothing down here.", 'start': 1067.702, 'duration': 5.017}, {'end': 1076.181, 'text': "If I click the button, all of a sudden you'll see this sample text.", 'start': 1072.779, 'duration': 3.402}, {'end': 1077.861, 'text': "You'll see it has a status of 200.", 'start': 1076.581, 'duration': 1.28}, {'end': 1080.443, 'text': 'It has a type of XHR.', 'start': 1077.861, 'duration': 2.582}, {'end': 1084.104, 'text': "And if we click on it, you'll see all the headers.", 'start': 1080.923, 'duration': 3.181}, {'end': 1086.766, 'text': 'I just want to make this a little bigger.', 'start': 1084.124, 'duration': 2.642}, {'end': 1088.346, 'text': 'so the headers.', 'start': 1087.486, 'duration': 0.86}], 'summary': 'Using chrome tools to inspect network activity, revealing a 200 status and xhr type with headers.', 'duration': 25.549, 'max_score': 1062.797, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA1062797.jpg'}], 'start': 768.865, 'title': 'Xhr object and making requests', 'summary': 'Explains creating xhr object, defining request type and url, handling response status, and sending request, demonstrating xhr object properties and methods, and making asynchronous requests and handling responses.', 'chapters': [{'end': 1106.393, 'start': 768.865, 'title': 'Xhr object and making requests', 'summary': 'Explains the process of creating an xhr object, defining the request type and url, handling the response status, and sending the request, demonstrating the properties and methods of the xhr object, and the flow of making asynchronous requests and handling responses.', 'duration': 337.528, 'highlights': ["Creating XHR Object The process of creating an XHR object is explained, including the use of 'new XMLHttpRequest' and the associated properties and methods of the XHR object.", "Defining Request Type and URL The explanation of using the 'open' function to define the request type, URL, and asynchronous nature of the request, with a clear example of using 'xhr.open' with parameters.", "Handling Response Status The importance of checking the response status, with a specific focus on the HTTP status codes such as 200, 403, and 404, and the use of 'this.status' to ensure a successful response before further actions.", "Sending the Request and Handling Response The process of sending the request using 'xhr.send' is detailed, and the demonstration of accessing the response data, including the use of console logs and network inspection tools to verify the response."]}], 'duration': 337.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA768865.jpg', 'highlights': ['Demonstration of accessing the response data, including the use of console logs and network inspection tools to verify the response.', "The process of sending the request using 'xhr.send' is detailed.", "The explanation of using the 'open' function to define the request type, URL, and asynchronous nature of the request, with a clear example of using 'xhr.open' with parameters.", "The process of creating an XHR object is explained, including the use of 'new XMLHttpRequest' and the associated properties and methods of the XHR object."]}, {'end': 1596.185, 'segs': [{'end': 1167.381, 'src': 'embed', 'start': 1142.037, 'weight': 0, 'content': [{'end': 1148.678, 'text': 'And then when we do this, we do need to check for the status, but we also need to check for something called the ready state.', 'start': 1142.037, 'duration': 6.641}, {'end': 1149.578, 'text': 'All right.', 'start': 1149.278, 'duration': 0.3}, {'end': 1152.099, 'text': "Now I'm going to paste in something else in down here.", 'start': 1149.638, 'duration': 2.461}, {'end': 1156.9, 'text': 'And this is just the different states that the request goes to.', 'start': 1152.919, 'duration': 3.981}, {'end': 1159.7, 'text': 'So zero is going to be request not initialized.', 'start': 1157, 'duration': 2.7}, {'end': 1162.261, 'text': 'One is server connection established.', 'start': 1160.3, 'duration': 1.961}, {'end': 1164.661, 'text': 'Two is request received.', 'start': 1162.841, 'duration': 1.82}, {'end': 1167.381, 'text': 'Three is processing request.', 'start': 1165.721, 'duration': 1.66}], 'summary': 'Checking for status and ready state is important in the request process, with different states including 0 for request not initialized, 1 for server connection established, 2 for request received, and 3 for processing request.', 'duration': 25.344, 'max_score': 1142.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA1142037.jpg'}, {'end': 1273.951, 'src': 'embed', 'start': 1216.714, 'weight': 2, 'content': [{'end': 1223.299, 'text': "Now the difference with onload is this is not going to run in less ready state is ready unless it's at four.", 'start': 1216.714, 'duration': 6.585}, {'end': 1230.564, 'text': 'So what I want to do is is go to some different points and show you what the ready state actually equals.', 'start': 1223.799, 'duration': 6.765}, {'end': 1238.769, 'text': "So we'll go right under where we did the right under where we did the open and we're going to console dot log.", 'start': 1231.284, 'duration': 7.485}, {'end': 1242.171, 'text': "Let's see.", 'start': 1238.789, 'duration': 3.382}, {'end': 1244.333, 'text': "So we'll say ready state.", 'start': 1242.231, 'duration': 2.102}, {'end': 1250.005, 'text': "and let's say XHR.ReadyState.", 'start': 1246.479, 'duration': 3.526}, {'end': 1253.05, 'text': "Remember, it's a property of XHR.", 'start': 1250.345, 'duration': 2.705}, {'end': 1265.162, 'text': 'So if we go ahead and save that and we go ahead and click the button, You know, let me get rid of the console log of the text just to clear that up.', 'start': 1256.335, 'duration': 8.827}, {'end': 1266.023, 'text': 'All right.', 'start': 1265.783, 'duration': 0.24}, {'end': 1268.045, 'text': "So let's click it and we get ready state one.", 'start': 1266.043, 'duration': 2.002}, {'end': 1273.951, 'text': "So at this point of the of the whole thing, we're at one, which is server connection established.", 'start': 1268.125, 'duration': 5.826}], 'summary': 'The ready state of the xhr object is at 1, indicating server connection established.', 'duration': 57.237, 'max_score': 1216.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA1216714.jpg'}, {'end': 1553.158, 'src': 'embed', 'start': 1520.292, 'weight': 1, 'content': [{'end': 1527.536, 'text': "it's all behind the scenes, okay, and this is a very, very simple example of what ajax can do.", 'start': 1520.292, 'duration': 7.244}, {'end': 1528.976, 'text': 'obviously you can do a lot more.', 'start': 1527.536, 'duration': 1.44}, {'end': 1530.897, 'text': 'this is just just to give you an example.', 'start': 1528.976, 'duration': 1.921}, {'end': 1535.043, 'text': 'now you can test for other statuses as well.', 'start': 1532.458, 'duration': 2.585}, {'end': 1538.67, 'text': "so right now we're just testing for 200, which means everything's okay.", 'start': 1535.043, 'duration': 3.627}, {'end': 1540.915, 'text': 'but we could also do like else.', 'start': 1538.67, 'duration': 2.245}, {'end': 1553.158, 'text': "if And let's say else if this dot status equals 404, which is a not found, then we could actually we don't have to console log.", 'start': 1540.915, 'duration': 12.243}], 'summary': 'A simple example of ajax demonstrating testing for status codes like 200 and 404.', 'duration': 32.866, 'max_score': 1520.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA1520292.jpg'}], 'start': 1106.393, 'title': 'Handling xhr events and states', 'summary': 'Covers the differences between on ready state change and on load events, usage of on progress for loading indicators, and handling different http statuses like 200 and 404 in an ajax example.', 'chapters': [{'end': 1273.951, 'start': 1106.393, 'title': 'Using on readystatechange for xhr', 'summary': 'Discusses the use of on ready state change for xhr, highlighting the different states of the request, the necessity to check for ready state and status, and the behavior differences between onload and on ready state change.', 'duration': 167.558, 'highlights': ['The different states of the request goes through, such as server connection established and request received. The chapter explains the different states of the request, including server connection established and request received, providing a clearer understanding of the XHR process.', "The necessity to check for ready state and status to ensure the request is at state four and the status is 200 before proceeding with the desired actions. It's emphasized that it's essential to check for the ready state and status, verifying that the request is at state four and the status is 200 before performing the desired actions.", 'The behavioral difference between using onload and on ready state change, where the latter requires the ready state to be at four before execution. A comparison is drawn between the behaviors of onload and on ready state change, highlighting that the latter demands the ready state to be at four before execution, elucidating the distinction between the two approaches.']}, {'end': 1596.185, 'start': 1274.971, 'title': 'Handling xhr events and states', 'summary': 'Covers the differences between on ready state change and on load events, the usage of on progress for loading indicators, and the handling of different http statuses such as 200 and 404 in an ajax example.', 'duration': 321.214, 'highlights': ["The biggest difference between on ready state change and on load events is that on load does not go through all checks and will only run if it's ready, whereas on ready state change goes through all checks before running. Comparison between on ready state change and on load events.", 'The usage of on progress for loading indicators, which is usually used for displaying loading animations while waiting for a response, with an example of logging the ready state during the progress. Demonstration of using on progress for loading indicators and logging ready state.', "The handling of different HTTP statuses such as 200 and 404 in an AJAX example, where 200 signifies everything is okay and 404 indicates a not found status, with an example of displaying 'not found' if the status is 404. Explanation of handling various HTTP statuses like 200 and 404 in an AJAX example."]}], 'duration': 489.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA1106393.jpg', 'highlights': ['The necessity to check for ready state and status to ensure the request is at state four and the status is 200 before proceeding with the desired actions.', "The handling of different HTTP statuses such as 200 and 404 in an AJAX example, where 200 signifies everything is okay and 404 indicates a not found status, with an example of displaying 'not found' if the status is 404.", 'The different states of the request goes through, such as server connection established and request received. The chapter explains the different states of the request, including server connection established and request received, providing a clearer understanding of the XHR process.', 'The behavioral difference between using onload and on ready state change, where the latter requires the ready state to be at four before execution.']}, {'end': 2356.43, 'segs': [{'end': 1675.235, 'src': 'heatmap', 'start': 1618.753, 'weight': 0, 'content': [{'end': 1623.756, 'text': "Let's see, so we'll create a new file called ajax2.html.", 'start': 1618.753, 'duration': 5.003}, {'end': 1634.247, 'text': "All right, and let's put in some basic HTML tags, and we'll say ajax2.", 'start': 1628.365, 'duration': 5.882}, {'end': 1642.25, 'text': "So this one we're going to be fetching JSON, or let's say local JSON.", 'start': 1634.808, 'duration': 7.442}, {'end': 1646.612, 'text': "And what I'm going to do is create two files here.", 'start': 1644.151, 'duration': 2.461}, {'end': 1647.833, 'text': 'One is going to be user.json.', 'start': 1646.712, 'duration': 1.121}, {'end': 1654.119, 'text': 'And then one is going to be users.json.', 'start': 1651.437, 'duration': 2.682}, {'end': 1658.422, 'text': "Okay, so for user.json, I'm just going to paste this in.", 'start': 1654.139, 'duration': 4.283}, {'end': 1660.384, 'text': 'So very simple.', 'start': 1659.623, 'duration': 0.761}, {'end': 1663.827, 'text': 'We just have an object here with an ID, a name, and an email.', 'start': 1660.404, 'duration': 3.423}, {'end': 1665.188, 'text': "We'll save that.", 'start': 1664.387, 'duration': 0.801}, {'end': 1666.409, 'text': "Let's go to users.", 'start': 1665.248, 'duration': 1.161}, {'end': 1672.213, 'text': "And we're just going to paste in a JSON array of users with an ID, name, and email.", 'start': 1667.389, 'duration': 4.824}, {'end': 1675.235, 'text': "And you may recognize these names here if you're cool.", 'start': 1672.233, 'duration': 3.002}], 'summary': 'Creating ajax2.html to fetch and display local json data.', 'duration': 41.631, 'max_score': 1618.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA1618753.jpg'}, {'end': 2094.455, 'src': 'embed', 'start': 2063.125, 'weight': 3, 'content': [{'end': 2063.626, 'text': "There's Rick.", 'start': 2063.125, 'duration': 0.501}, {'end': 2078.125, 'text': "So what we've done is we've fetched data from the JSON file behind the scenes asynchronously and we've built a template string or an output string and we've output it into the browser.", 'start': 2065.476, 'duration': 12.649}, {'end': 2083.748, 'text': 'And this was all done asynchronously without having to reload the page or anything like that.', 'start': 2078.284, 'duration': 5.464}, {'end': 2085.349, 'text': 'All right.', 'start': 2083.768, 'duration': 1.581}, {'end': 2092.254, 'text': "So if we wanted to get users, which is an array that's going to be pretty similar, let's do that with this button too.", 'start': 2086.07, 'duration': 6.184}, {'end': 2094.455, 'text': "So what I'll do is add another event listener.", 'start': 2092.393, 'duration': 2.062}], 'summary': 'Data fetched asynchronously from json file, output without page reload.', 'duration': 31.33, 'max_score': 2063.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA2063125.jpg'}, {'end': 2251.337, 'src': 'embed', 'start': 2189.881, 'weight': 1, 'content': [{'end': 2193.505, 'text': 'So we need to put an I brackets and an I like that.', 'start': 2189.881, 'duration': 3.624}, {'end': 2199.745, 'text': "okay, and then we'll save.", 'start': 2197.481, 'duration': 2.264}, {'end': 2202.35, 'text': "let's try it again, get users, and there we go.", 'start': 2199.745, 'duration': 2.605}, {'end': 2204.894, 'text': "so now we're getting them all all right.", 'start': 2202.35, 'duration': 2.544}, {'end': 2210.46, 'text': "so that's how we can fetch some local json with ajax All right.", 'start': 2204.894, 'duration': 5.566}, {'end': 2214.843, 'text': 'now, what I want to do is I want to show you how we can work with an external API.', 'start': 2210.46, 'duration': 4.383}, {'end': 2219.807, 'text': "So we're going to use the GitHub API, which is extremely public, extremely easy to use.", 'start': 2214.883, 'duration': 4.924}, {'end': 2224.29, 'text': "We don't need any authentication or anything unless we're making a ton of requests.", 'start': 2220.147, 'duration': 4.143}, {'end': 2228.773, 'text': "So let's create a new file called ajax3.html.", 'start': 2224.831, 'duration': 3.942}, {'end': 2235.018, 'text': "And let's go ahead and put some..", 'start': 2232.536, 'duration': 2.482}, {'end': 2244.736, 'text': "structure in here and we'll say Ajax three handles external API.", 'start': 2236.954, 'duration': 7.782}, {'end': 2251.337, 'text': 'So in the body, all I want to put here is a button.', 'start': 2246.796, 'duration': 4.541}], 'summary': 'Fetching local json with ajax and demonstrating working with the github api in an external api file.', 'duration': 61.456, 'max_score': 2189.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA2189881.jpg'}], 'start': 1596.245, 'title': 'Asynchronous data fetching and working with local json and external api', 'summary': 'Covers creating a new html file, fetching local json data, and using javascript to asynchronously fetch and display user data, demonstrating the process of fetching and displaying user information without reloading the page. additionally, it demonstrates fetching local json using ajax and working with an external api, such as the github api, to retrieve user data, emphasizing the ease of use and lack of authentication requirements.', 'chapters': [{'end': 2085.349, 'start': 1596.245, 'title': 'Asynchronous data fetching with ajax', 'summary': 'Covers creating a new html file, fetching local json data, and using javascript to asynchronously fetch and display user data, demonstrating the process of fetching and displaying user information without reloading the page.', 'duration': 489.104, 'highlights': ['The chapter covers creating a new HTML file, fetching local JSON data, and using JavaScript to asynchronously fetch and display user data. The transcript discusses creating a new HTML file, ajax2.html, and fetching local JSON data from user.json and users.json. It also explains using JavaScript to asynchronously fetch user data and display it.', 'Demonstrating the process of fetching and displaying user information without reloading the page. The transcript demonstrates fetching user information without reloading the page and building a template string to display the fetched data in the browser, showcasing the asynchronous data fetching process.']}, {'end': 2356.43, 'start': 2086.07, 'title': 'Working with local json and external api', 'summary': 'Demonstrates fetching local json using ajax and working with an external api, such as the github api, to retrieve user data, emphasizing the ease of use and lack of authentication requirements.', 'duration': 270.36, 'highlights': ['The chapter demonstrates fetching local JSON using AJAX and working with an external API, such as the GitHub API, to retrieve user data. The chapter covers fetching local JSON using AJAX and working with the GitHub API to retrieve user data.', 'Emphasizes the ease of use and lack of authentication requirements of the GitHub API. The GitHub API is highlighted for its ease of use and lack of authentication requirements for accessing user data.', 'Mentions the URL to access the GitHub API and its ability to provide a list of the first 100 users. The chapter mentions the URL to access the GitHub API, which provides a list of the first 100 users.']}], 'duration': 760.185, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA1596245.jpg', 'highlights': ['Covers creating a new HTML file, fetching local JSON data, and using JavaScript to asynchronously fetch and display user data.', 'Demonstrates fetching local JSON using AJAX and working with the GitHub API to retrieve user data.', 'Emphasizes the ease of use and lack of authentication requirements of the GitHub API.', 'Demonstrates the process of fetching and displaying user information without reloading the page.']}, {'end': 3519.786, 'segs': [{'end': 2478.839, 'src': 'embed', 'start': 2447.947, 'weight': 3, 'content': [{'end': 2451.129, 'text': 'Users All right, we need to do our send.', 'start': 2447.947, 'duration': 3.182}, {'end': 2456.192, 'text': "So let's make sure we go down here and say xhr.send and save.", 'start': 2451.229, 'duration': 4.963}, {'end': 2460.274, 'text': "And then let's go to ajax3.html.", 'start': 2456.352, 'duration': 3.922}, {'end': 2462.675, 'text': 'Click load GitHub users.', 'start': 2461.195, 'duration': 1.48}, {'end': 2463.636, 'text': 'And there we go.', 'start': 2462.956, 'duration': 0.68}, {'end': 2464.817, 'text': "There's all of our users.", 'start': 2463.676, 'duration': 1.141}, {'end': 2468.138, 'text': 'So I want to output these into the browser.', 'start': 2466.037, 'duration': 2.101}, {'end': 2470.92, 'text': "So what we'll do..", 'start': 2470.219, 'duration': 0.701}, {'end': 2474.895, 'text': "is kind of the same thing we've been doing.", 'start': 2473.213, 'duration': 1.682}, {'end': 2478.839, 'text': "Let's create a variable called output and set it to nothing.", 'start': 2474.955, 'duration': 3.884}], 'summary': 'Demonstrating sending a request, loading github users, and outputting them to the browser.', 'duration': 30.892, 'max_score': 2447.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA2447947.jpg'}, {'end': 2788.758, 'src': 'embed', 'start': 2755.034, 'weight': 0, 'content': [{'end': 2760.395, 'text': 'Now, a lot of you probably know how to submit a form to a PHP file.', 'start': 2755.034, 'duration': 5.361}, {'end': 2764.035, 'text': 'OK, so you can make a get request with a form or a post request.', 'start': 2760.655, 'duration': 3.38}, {'end': 2772.357, 'text': "So I'm going to show you how to do that first and then how to submit a get request form and post request through Ajax.", 'start': 2764.635, 'duration': 7.722}, {'end': 2773.377, 'text': 'All right.', 'start': 2773.097, 'duration': 0.28}, {'end': 2776.238, 'text': "So let's go ahead and put some markup in here.", 'start': 2773.417, 'duration': 2.821}, {'end': 2788.758, 'text': "And this is going to be Ajax for and we'll just say Ajax and PHP forms.", 'start': 2776.258, 'duration': 12.5}], 'summary': 'Demonstrating form submission to php via get/post requests and ajax.', 'duration': 33.724, 'max_score': 2755.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA2755034.jpg'}, {'end': 3114.276, 'src': 'embed', 'start': 3082.563, 'weight': 2, 'content': [{'end': 3091.256, 'text': 'and then the action, which would be the actual file, which would be process dot php, All right,', 'start': 3082.563, 'duration': 8.693}, {'end': 3103.564, 'text': "and then in here we'll have an input type of text and then it would have a name which would represent that get name variable and we're going to set that to name.", 'start': 3091.256, 'duration': 12.308}, {'end': 3108.807, 'text': "All right, and then we'll just put in a input submit.", 'start': 3104.424, 'duration': 4.383}, {'end': 3114.276, 'text': "We'll say value equals submit.", 'start': 3110.774, 'duration': 3.502}], 'summary': 'Creating an action file process.php with input type text and submit button.', 'duration': 31.713, 'max_score': 3082.563, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA3082563.jpg'}, {'end': 3335.521, 'src': 'embed', 'start': 3308.642, 'weight': 1, 'content': [{'end': 3312.004, 'text': "guys, i know it's a little difficult to understand.", 'start': 3308.642, 'duration': 3.362}, {'end': 3316.207, 'text': "so now we're going to do is we're going to do the same thing, but with post, with a post request.", 'start': 3312.004, 'duration': 4.203}, {'end': 3322.652, 'text': "okay, when you use a post request, when you're doing something like like adding data to a server, when you're, you know,", 'start': 3316.207, 'duration': 6.445}, {'end': 3327.976, 'text': "submitting to a server and you're saving data, things like that, it's much more secure.", 'start': 3322.652, 'duration': 5.324}, {'end': 3331.318, 'text': "so first we'll do the regular post form, just like we did with the get.", 'start': 3327.976, 'duration': 3.342}, {'end': 3335.521, 'text': "So we'll go down here and we'll say post form.", 'start': 3332.219, 'duration': 3.302}], 'summary': 'Explaining the security benefits of using a post request for adding data to a server.', 'duration': 26.879, 'max_score': 3308.642, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA3308642.jpg'}], 'start': 2359.212, 'title': 'Using ajax for data interaction', 'summary': 'Covers using ajax to fetch and display github user data, working with php and ajax to process data and submit forms, and a tutorial on making post requests using ajax, highlighting security benefits and necessary code changes.', 'chapters': [{'end': 2705.652, 'start': 2359.212, 'title': 'Using ajax to load github users', 'summary': 'Demonstrates using ajax to fetch data from the github api, displaying user information, such as avatar, id, and login, within an html page, and applying simple styling to the user display.', 'duration': 346.44, 'highlights': ['Demonstrating fetching data from the GitHub API using Ajax The chapter demonstrates using Ajax to fetch data from the GitHub API, showcasing the process of loading GitHub users into the web page.', 'Displaying user information including avatar, ID, and login The chapter explains the process of displaying user information, including avatar, ID, and login, within an HTML page after fetching the data from the GitHub API.', 'Applying simple styling to the user display The chapter illustrates the application of simple styling, including display flex, background color, padding, and removing bullets for user information display on the web page.', 'Using XHR object for making asynchronous requests The chapter details the usage of the XHR object for making asynchronous requests to the GitHub API, allowing the loading of user data behind the scenes.']}, {'end': 3261.74, 'start': 2705.672, 'title': 'Working with php and ajax', 'summary': 'Demonstrates creating a php file to process data and showcases submitting a form to a php file, as well as using ajax to perform a get request and submit a form without redirecting, providing insights into how ajax interacts with php.', 'duration': 556.068, 'highlights': ['The chapter demonstrates creating a PHP file to process data and showcases submitting a form to a PHP file It provides insights into creating a PHP file called process.php and submitting a form to a PHP file for processing data.', 'Using AJAX to perform a GET request and submit a form without redirecting The chapter showcases using AJAX to perform a GET request without redirecting to the PHP file, demonstrating the use of AJAX to submit a form behind the scenes.', 'Insights into how AJAX interacts with PHP The chapter provides insights into the interaction between AJAX and PHP, including examples of GET and POST requests, and emphasizes the significance of AJAX in the context of PHP.']}, {'end': 3519.786, 'start': 3261.74, 'title': 'Ajax post request tutorial', 'summary': 'Covers the process of making post requests using ajax, emphasizing the security benefits of post requests over get requests and the differentiation between the two, along with a demonstration of how to implement a post request using ajax, including the necessary changes in the code and the behavior of the post request.', 'duration': 258.046, 'highlights': ['The chapter details the process of making post requests using AJAX, highlighting the security advantages of post requests over get requests when submitting data to a server.', 'It explains the differentiation between regular post forms and AJAX post forms, and the necessary changes in the code, emphasizing the need to stop the initial submit when handling the AJAX post request.', 'The demonstration includes the steps to make a post request using AJAX, such as grabbing the value from the form and making a post request by setting the content type as application/x-www-form-urlencoded.']}], 'duration': 1160.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA2359212.jpg', 'highlights': ['Covers using ajax to fetch and display github user data, working with php and ajax to process data and submit forms, and a tutorial on making post requests using ajax, highlighting security benefits and necessary code changes.', 'The chapter details the process of making post requests using AJAX, highlighting the security advantages of post requests over get requests when submitting data to a server.', 'The chapter demonstrates creating a PHP file to process data and showcases submitting a form to a PHP file It provides insights into creating a PHP file called process.php and submitting a form to a PHP file for processing data.', 'The chapter demonstrates using Ajax to fetch data from the GitHub API, showcasing the process of loading GitHub users into the web page.']}, {'end': 4181.626, 'segs': [{'end': 3594.523, 'src': 'embed', 'start': 3544.592, 'weight': 0, 'content': [{'end': 3546.713, 'text': "So let's save that and let's reload.", 'start': 3544.592, 'duration': 2.121}, {'end': 3548.694, 'text': "Let's go to our Ajax post form.", 'start': 3546.773, 'duration': 1.921}, {'end': 3553.195, 'text': "We'll say Tom and submit and we get processing post.", 'start': 3548.734, 'duration': 4.461}, {'end': 3554.896, 'text': 'Your name is Tom.', 'start': 3553.996, 'duration': 0.9}, {'end': 3556.277, 'text': 'All right.', 'start': 3554.916, 'duration': 1.361}, {'end': 3560.318, 'text': 'So it looked at this right here and it gave us this back.', 'start': 3556.377, 'duration': 3.941}, {'end': 3562.919, 'text': 'OK, as our response.', 'start': 3561.639, 'duration': 1.28}, {'end': 3564.96, 'text': 'And of course, we could do whatever we want with that.', 'start': 3562.959, 'duration': 2.001}, {'end': 3568.892, 'text': "all right now I'm gonna take this a step further.", 'start': 3566.789, 'duration': 2.103}, {'end': 3570.975, 'text': "we're gonna get a little more complicated.", 'start': 3568.892, 'duration': 2.083}, {'end': 3579.127, 'text': "don't worry about it if you don't know everything that's going on in PHP, but we're gonna actually submit the data when we make our post request.", 'start': 3570.975, 'duration': 8.152}, {'end': 3582.732, 'text': 'I want to submit it to the database, to a MySQL database.', 'start': 3579.127, 'duration': 3.605}, {'end': 3588.638, 'text': "so I mean, even if you want to stop the video here, if it's getting too difficult, that's fine,", 'start': 3583.713, 'duration': 4.925}, {'end': 3591.78, 'text': 'but I do want to just keep going just to show you guys.', 'start': 3588.638, 'duration': 3.142}, {'end': 3594.523, 'text': 'so in process.php.', 'start': 3591.78, 'duration': 2.743}], 'summary': 'Demonstration of submitting data via ajax post and to a mysql database in process.php.', 'duration': 49.931, 'max_score': 3544.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA3544592.jpg'}, {'end': 3653.543, 'src': 'embed', 'start': 3621.923, 'weight': 2, 'content': [{'end': 3625.284, 'text': "Or actually, let's call it Ajax Test.", 'start': 3621.923, 'duration': 3.361}, {'end': 3626.925, 'text': 'All right.', 'start': 3626.625, 'duration': 0.3}, {'end': 3632.06, 'text': "Now we're going to create a table called users with two columns.", 'start': 3627.986, 'duration': 4.074}, {'end': 3642.12, 'text': "all. right now we're going to have an id for the user, which will be an integer, and let's say 11, length,", 'start': 3634.818, 'duration': 7.302}, {'end': 3645.881, 'text': "and it's going to be let me make this bigger it's going to be auto increment,", 'start': 3642.12, 'duration': 3.761}, {'end': 3653.543, 'text': "meaning it's going to the id is going to increment by one every record that's passed in, and then we want it to be the primary key,", 'start': 3645.881, 'duration': 7.662}], 'summary': "Creating a table named 'users' with 2 columns: id (integer, length 11, auto-increment) and primary key.", 'duration': 31.62, 'max_score': 3621.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA3621923.jpg'}, {'end': 4119.529, 'src': 'embed', 'start': 4079.355, 'weight': 3, 'content': [{'end': 4080.276, 'text': 'So that should be good.', 'start': 4079.355, 'duration': 0.921}, {'end': 4080.997, 'text': "Let's save.", 'start': 4080.336, 'duration': 0.661}, {'end': 4083.52, 'text': "Let's go and go to ajax5.html.", 'start': 4081.958, 'duration': 1.562}, {'end': 4088.643, 'text': "And let's click get users.", 'start': 4087.282, 'duration': 1.361}, {'end': 4089.624, 'text': 'And there we go.', 'start': 4089.083, 'duration': 0.541}, {'end': 4092.126, 'text': "We're getting the data from MySQL.", 'start': 4089.644, 'duration': 2.482}, {'end': 4094.828, 'text': 'It was all done asynchronously through AJAX.', 'start': 4092.366, 'duration': 2.462}, {'end': 4102.093, 'text': "If we go to our network tab and we go to users PHP, you'll see the response right here.", 'start': 4095.508, 'duration': 6.585}, {'end': 4119.529, 'text': "And if we were to go back to ajax4.html and add a new user, we'll just say Brad Traversy, submit and then go back to ajax5.html.", 'start': 4104.794, 'duration': 14.735}], 'summary': 'Successfully retrieved data from mysql using ajax, demonstrated through network tab and adding a new user.', 'duration': 40.174, 'max_score': 4079.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA4079355.jpg'}, {'end': 4181.626, 'src': 'heatmap', 'start': 4132.147, 'weight': 4, 'content': [{'end': 4137.955, 'text': "So what I'll do is make another video of different Ajax libraries and how to use them.", 'start': 4132.147, 'duration': 5.808}, {'end': 4139.457, 'text': 'OK, so at least you have.', 'start': 4138.236, 'duration': 1.221}, {'end': 4143.741, 'text': 'the standard JavaScript XHR object under your belt.', 'start': 4139.978, 'duration': 3.763}, {'end': 4148.082, 'text': 'You should understand how that works, at least the very basics.', 'start': 4143.781, 'duration': 4.301}, {'end': 4150.805, 'text': "If you didn't get the PHP parts, that's fine.", 'start': 4148.122, 'duration': 2.683}, {'end': 4151.626, 'text': "Don't worry about it.", 'start': 4150.845, 'duration': 0.781}, {'end': 4152.805, 'text': 'That was kind of a bonus.', 'start': 4151.666, 'duration': 1.139}, {'end': 4161.712, 'text': 'As long as you understand how this object works, how we call new XML HTTP request,', 'start': 4153.627, 'duration': 8.085}, {'end': 4169.337, 'text': 'we call the open method onLoad and we can get our response and we can do what we want with the response.', 'start': 4161.712, 'duration': 7.625}, {'end': 4170.274, 'text': 'All right.', 'start': 4169.993, 'duration': 0.281}, {'end': 4171.475, 'text': 'So thanks for watching, guys.', 'start': 4170.294, 'duration': 1.181}, {'end': 4173.397, 'text': 'I apologize for the last 10 minutes or so.', 'start': 4171.515, 'duration': 1.882}, {'end': 4175.319, 'text': 'My son is being really loud upstairs.', 'start': 4173.438, 'duration': 1.881}, {'end': 4177.041, 'text': 'But thanks for watching.', 'start': 4176.14, 'duration': 0.901}, {'end': 4178.983, 'text': 'Please hit that like if you liked it.', 'start': 4177.421, 'duration': 1.562}, {'end': 4180.203, 'text': "Subscribe if you're not.", 'start': 4179.063, 'duration': 1.14}, {'end': 4181.626, 'text': 'And I will see you next time.', 'start': 4180.444, 'duration': 1.182}], 'summary': 'Demonstrating usage of different ajax libraries and the standard javascript xhr object.', 'duration': 49.479, 'max_score': 4132.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA4132147.jpg'}], 'start': 3519.786, 'title': 'Ajax and mysql database integration', 'summary': "Covers submitting parameters through an ajax post form, retrieving and processing data from a mysql database, creating a database, inserting data into the database, making ajax requests, and introducing future topics on different ajax libraries. it demonstrates creating a 'ajax test' database with a 'users' table, inserting user data through an html form, and fetching data asynchronously through ajax using php and javascript.", 'chapters': [{'end': 3594.523, 'start': 3519.786, 'title': 'Ajax post form and database submission', 'summary': 'Discusses submitting parameters through an ajax post form to retrieve and process data, with an example using the name parameter and a mysql database.', 'duration': 74.737, 'highlights': ["The chapter demonstrates submitting parameters through an AJAX post form to process and retrieve data, showing an example using the 'name' parameter.", 'The tutorial also covers submitting data to a MySQL database using PHP, providing an insight into advanced data processing techniques.']}, {'end': 4181.626, 'start': 3594.523, 'title': 'Connecting to mysql database with php and ajax', 'summary': "Covers creating a database and table, inserting data into the database, making an ajax request to insert and fetch data from the database, and briefly mentions future topics on different ajax libraries. it demonstrates creating a database called 'ajax test' with a 'users' table, inserting user data into the database through an html form, and fetching the data asynchronously through ajax, using php and javascript. it also introduces the idea of covering other ajax libraries in future videos.", 'duration': 587.103, 'highlights': ["Creating a database called 'Ajax Test' with a 'users' table and inserting user data into the database through an HTML form.", 'Fetching the data asynchronously through Ajax, using PHP and JavaScript.', 'Introducing the idea of covering other Ajax libraries in future videos.']}], 'duration': 661.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/82hnvUYY6QA/pics/82hnvUYY6QA3519786.jpg', 'highlights': ["The chapter demonstrates submitting parameters through an AJAX post form to process and retrieve data, showing an example using the 'name' parameter.", 'The tutorial also covers submitting data to a MySQL database using PHP, providing an insight into advanced data processing techniques.', "Creating a database called 'Ajax Test' with a 'users' table and inserting user data into the database through an HTML form.", 'Fetching the data asynchronously through Ajax, using PHP and JavaScript.', 'Introducing the idea of covering other Ajax libraries in future videos.']}], 'highlights': ['JSON has largely replaced XML in Ajax technology, attributed to its ease of use, speed, and popularity.', 'Ajax technology allows data exchange between client and server without explicit page reloads, contributing to a smoother user experience.', 'Ajax allows making asynchronous requests in the background, updating specific sections of a webpage, and returning data usually in JSON format, improving webpage interactivity and speed.', "The XMLHttpRequestObject, also known as the XHRObject, is an API provided by the browser's JavaScript environment, used for transferring data between client and server or browser and server.", 'Libraries like jQuery, axios, and super agent are recommended for making HTTP requests and handling updates and deletes, while the Fetch API is a part of the browser, fully implemented in Firefox and Chrome.', 'XAMPP is recommended for its provision of an Apache server, PHP, and MySQL on the local machine, essential for dealing with PHP towards the end of the series.', 'The chapter focuses on utilizing XAMPP as the server environment for creating and testing Ajax functionalities, with a target duration of approximately one hour.', 'Demonstration of accessing the response data, including the use of console logs and network inspection tools to verify the response.', "The process of sending the request using 'xhr.send' is detailed.", "The explanation of using the 'open' function to define the request type, URL, and asynchronous nature of the request, with a clear example of using 'xhr.open' with parameters.", "The process of creating an XHR object is explained, including the use of 'new XMLHttpRequest' and the associated properties and methods of the XHR object.", 'The necessity to check for ready state and status to ensure the request is at state four and the status is 200 before proceeding with the desired actions.', "The handling of different HTTP statuses such as 200 and 404 in an AJAX example, where 200 signifies everything is okay and 404 indicates a not found status, with an example of displaying 'not found' if the status is 404.", 'The different states of the request goes through, such as server connection established and request received. The chapter explains the different states of the request, including server connection established and request received, providing a clearer understanding of the XHR process.', 'The behavioral difference between using onload and on ready state change, where the latter requires the ready state to be at four before execution.', 'Covers creating a new HTML file, fetching local JSON data, and using JavaScript to asynchronously fetch and display user data.', 'Demonstrates fetching local JSON using AJAX and working with the GitHub API to retrieve user data.', 'Emphasizes the ease of use and lack of authentication requirements of the GitHub API.', 'Demonstrates the process of fetching and displaying user information without reloading the page.', 'Covers using ajax to fetch and display github user data, working with php and ajax to process data and submit forms, and a tutorial on making post requests using ajax, highlighting security benefits and necessary code changes.', 'The chapter details the process of making post requests using AJAX, highlighting the security advantages of post requests over get requests when submitting data to a server.', 'The chapter demonstrates creating a PHP file to process data and showcases submitting a form to a PHP file It provides insights into creating a PHP file called process.php and submitting a form to a PHP file for processing data.', 'The chapter demonstrates using Ajax to fetch data from the GitHub API, showcasing the process of loading GitHub users into the web page.', "The chapter demonstrates submitting parameters through an AJAX post form to process and retrieve data, showing an example using the 'name' parameter.", 'The tutorial also covers submitting data to a MySQL database using PHP, providing an insight into advanced data processing techniques.', "Creating a database called 'Ajax Test' with a 'users' table and inserting user data into the database through an HTML form.", 'Fetching the data asynchronously through Ajax, using PHP and JavaScript.', 'Introducing the idea of covering other Ajax libraries in future videos.']}