Ajax Framework Tutorial JavaScript Module Programming PHP Script Included

in this lesson you can learn to scratch code the most lightweight Ajax framework in the you remember zero lines of code due to power we're going to demonstrate the simplicity behind creating an ultra efficient Ajax module to be reusable site-wide and any pages that need to use Ajax for data transmissions on your website but those of you waiting for the web intersect videos this video is related to that series because we're going to use this exact Ajax module of the social network website training series now before we create the most lightweight efficient modular Ajax framework in the universe I'm going to show you a raw JavaScript Ajax request now and explain it quickly it's just normal lightning-fast raw unobstructed JavaScript Ajax and after I explain it to you tell me if you think that you need a framework that hides this simple code from you to perform this simple task called Ajax or tell me if you are capable of using Ajax in its raw form natural unloaded unobstructed like you see here and after you experiment with this if you've never used raw Ajax before you have to make me a deal if you find that you can easily create your own Ajax module that works for you you have to stop using popular frameworks as your crush for that specific functionality because now you know how to do it from scratch and now I'm going to show you how to make it modular as well so it's just going to be just as intelligent as any framework actually it'll be more intelligent because it'll be a very efficient lightweight module that only performs Ajax that's all that your external file will perform is Ajax and any page that requires Ajax you just plug the module right into it okay let's get all the things that are not actually the Ajax requests separated so you can see how many lines there are to it and how simplistic it is all it does is transmit data basically from the client to the server and back all seamlessly without page refresh okay now let me quickly explain it to you and you'll see how very simple it is the first thing you do is create a new variable with the name of Ajax you can name that pooh-pooh i don't care just change all of these where it says ajax to pupal if you want so you say bar Ajax or whatever you want your variable to be named new xmlhttprequest so what that means is that your XML HTTP request object your Ajax mechanism is now residing in this variable called Ajax then the next line you run Ajax open method now the open method takes in three parameters the first one is the method you can use poast or you can use get if you're going to use get you're not sending any variable so you would just put null down here in the send method but since we're going to use post we're going to send a couple of URL encoded variables to our PHP script and the PHP script is named parser dot PHP which is the second parameter for your open method and then true for asynchronous then you have to set the request header for the Ajax object and then establish the onreadystatechange property that runs every time the ready state changes is important to understand because the Ajax object it runs through these five phases or stages or ready states and 0 is the unsent state it's a request that has not called the open method yet which is right here the open method then ready state one which is opened that means the open method has been called but the send method has not been called yet when the Ajax ready state hits - that means the headers are received so the headers and status received then the third ready state is loading that means the xmlhttprequest object is downloading the data back from whatever PHP script or whatever is sending data to it back to it and then done means that all of the data is back from your server-side script and you can display or evaluate the data that comes back in the Ajax dot response text okay now let me get rid of these because I just wanted to explain to you the Ajax dot ready state or your xml httprequest objects ready state so it's going to cycle through those states and when it gets to four and the Ajax that status is equal to 200 that means the data transmission is complete both ways so you sent these variables to PHP and then PHP sent it back and then you alert yourself the response text and in simple terms this is basically the function that is your data returned complete listener this function is listening but when this ready state is equal to four and the status is equal to 200 and that happens upon completion of the data return the last thing you do is you use the send method and why I said in here you can send URL encoded variables like I am C name equals Adam and then the ampersand separates your name value pairs and then I put country equals USA and I can put another ampersand here but in age equals 12 or whatever but I'm just going to send two variables you can send as many as you like okay now what I want you to do is take this script whatever you want to name the file I have my name temp a HTML and I also want you to have parser dot PHP alright so I'll zoom in on the code for partial PHP and you can just type it in you can see we're picking up the posted variables coming from Ajax so you say if is set the posted variable of name and you're just going to echo back to Ajax Adam or whatever the name is being sent is from whatever country so if we have successful data transmission we should get back to Ajax the string adam is from USA and that way that will confirm to you that you have successfully sent data from this to this file this file processed the variables and then post the data back and whatever data you want to send back can go back to Ajax and then Ajax scoops it up here and where this alert is you can put this data that comes back the response text you can put that data that comes back from PHP inside of a div or whatever you want to do or you can evaluate it with a bunch of if conditions in else conditions and so you take these two files template CML parse or PHP and you put them on your live web server you go to attempt at HTML and all you have to do is press Enter just make the file run all you have to do is navigate to temp dot HTML and you're going to see it alert data that came back from your PHP script letting you know that you have successful data connection between everything it'll be actually even easier to use then you see it here and it's going to make a little more sense because we can take some of these lines of code and put them into the module because if our site happens to use a JAXA and 100 different files in 100 different places if you don't use it externally you'll have to have these lines in every time you make an AJAX request basically all these lines would have to be there every time you make an AJAX request but if your sites going to do it more than a dozen times on a dozen different pages that you might want to externalize it a little bit that's what I'm going to show you how to do but what you're looking at here and if you have a successful data transmission on your server what you have done now is you have learned to use raw real ajax without the help of any frameworks and it's so simple now I'll ask you now is that is Ajax really hard once you hear somebody explain it and you have proof that it works actually let me prove on video that it works right so here I am I'm going to type in temp dot HTML on my live web server web intersect and I have the dialogue or the alert pop-up Adam is from USA so everything's working okay I'm on my live web server online make sure you have parser dot PHP and temp dot HTML both on your server all right so is that really so hard is that something right there that code that I have highlighted is that something that requires a framework or maybe you just have the wrong teachers but maybe you went to the wrong school it took the wrong curriculum or something because I know if somebody would have taught you Ajax as simply as I just put it to you you would have never turned to any frameworks for using Ajax in your applications you would have been like man it's so easy I can bust that out without any framework man but like I said we're going to create our own framework and you can even allow people who don't understand the Ajax object very well to use your external framework after you get done making it external and reusable now as I promised I'm going to show you guys how to create the most lightweight Ajax framework in the known universe and we're going to try our best to gear it in such a way that even a beginner who doesn't understand Ajax at all can use it with just a little bit of direction and then that beginner to be up and running and he doesn't even have to understand Ajax at all it'll be like oh i'm Ajax in my little butt off they'll think he's awesome but he squat okay so above the code let's just put this comment into ourselves and then down here go down a few lines and we'll put another comment it says usage so up here we have modular portion that we will externalize in a moment and then the usage portion right here this is the portion that you would have in your page we'll set that right there and the first thing we know we're going to want there is actually let me take this comment and put it right up here right there let's just push all of that down because we're going to be taking that out manipulating it just a little bit to make a framework out of it that way it can be external reusable and just a little bit easier to use or maybe somebody who's not familiar with how the Ajax really works okay so back up top let's go ahead and bring this up type in function ajax obj open closed parentheses put the opening curly brace and then go down a couple of lines and put your closing curly brace and there's your function nest all set up and ready to go now the Ajax object function is going to be externalized and that's going to be responsible for creating this xml httprequest object so actually we can copy this line right there because inside of it we know that we want to start assembling our xml httprequest object instead of calling this ajax inside of the ajax objects function let's just call it X so just make a mental note that this X represents this new xmlhttprequest object then directly under that you want your open method so you can just take that right there ctrl C put it right under this line but this you want to make dynamic and this is the magic behind the externalizing and modular functionality really it's just dynamics its dynamic functionality that makes this possible so in the Ajax object function we're going to have to take in two parameters for the request method and the URL so up top let's just type in meth and URL and we're going to take in those two parameters when this age act object function is called and we have no script yet or no line that's calling that object yet so we can't pass those parameters just yet but I will be doing that in just a second and I'll explain it to you so what you want to do down here where it says post is take meThe variable put it there and the URL variable put it here and then leave this true for asynchronous and just be sure to change this to X because you're working with the variable X for this new xmlhttprequest object now the next line you just want to get this request header control-c put it up here and just change Ajax here to X then the last thing in this external function well it's going to be external in a moment when we put it in its own file you want to return X so when this Ajax object function is called when it's called to run after all these lines process the final line is going to return that xml httprequest object to the line that called it or wherever you have called it in your code or wherever you have called the Ajax object function in your code this xml httprequest object will be returned there now let's go down here to our usage section we're going to bring all this code up and you know that we can get rid of a few things here actually the Ajax new xmlhttprequest object we're going to keep that variable named Ajax but we're going to call the a jacked object instead now instead of creating the object directly in the script so let's put that line in for our Ajax is equal to call the Ajax object function right here make it run and pass two parameters to it the mess method and the URL you can see we're passing those up here so if you want to use git you would just change it right there okay so this opened the next line the open method we've already externalize that but we're going to externalize that in a moment so it doesn't need to be in our usage example we can remove that and this line you can remove that because you already have it up here all you need is on ready state change function now actually this will work exactly how it's sitting right now I think let's see yes sir that'll work exactly the way it did before we changed everything if you run this script but if you want to make this usage section really easy and more humanly readable to somebody who has never worked with Ajax for instance if you want to make this brain work for a stone-cold beginner you don't want to really have this code that says Ajax out ready state equals four and Ajax I status ID equals 200 that's just going to confuse the framework user the stone-cold beginner so what you do is in your modular portion the portion that will be externalized in just a moment you put another function and that function is set up for the Ajax return to check the ready state so you can have that confusing looking X dot ready state equals 4 and x dot status equals 200 hidden away in your in your module where the user the end user will never see it so what you do is you just run Ajax return you can just copy that function and instead of having that code directly in here you just run it like this and then what you do is so you're calling the function to run here and this function is going to return the value of true if the ready state equals four and the status equals zero basically if the Ajax request is done if it's complete it's going to return this function is going to return true so you want to say if this function returned on the Ajax object so you have to change that X here to Ajax object because you're passing the Ajax object as a parameter to this Ajax return function and it becomes X and it's scooped up here and it's evaluated here see how that X is evaluated there then this function returns true so you want to evaluate to see if that is in fact equal to true now this reads let's take the usage push it down a little bit and look at it all by itself now this is how you would tell the newbs or whoever how to use Ajax for your particular framework for instance if you look at jQuery it shows you a few lines of code that you can use to use Ajax within the jQuery system this is the pretty much the same concept it's just set up a little different and I wanted to keep it a little more true to raw programming that way it's not so abstracted and the person who is using it gets a little bit of a glimpse about how Ajax the ready state change is set up but you can see it's very you the usage it's very lightweight and all the user has to do is set their variable Ajax to call the Ajax object function and what that does is creates the xmlhttprequest object externally and in a way that can be reused over and over this Ajax object function will be called many times be used by many pages and these lines will never have to be within your application for the usage section okay now let's take this press ctrl s and before we actually externalize this code into its own file we're going to test it now because everything should run exactly how it is here and you should get the same value that you got before we made it into a framework okay and I tell you what just to make sure let's change this name to equals George now you go back to your web browser online refresh temp dot HTML and you can see I have George's from USA so that proves that my temp dot HTML my modular based script is working all I have to do is take this code press ctrl X and let's say Adams Ajax usage now you just go to file new JavaScript and you can remove that initial data that Dreamweaver might put in and you just simply place your code the modular portion that we had in the other file so you'll have function Ajax object and function Ajax return I'll press ctrl s and in the directory for your website you're going to save this into a new folder you see we have our images folder style Boulder are index file that's our homepage and all that good stuff right there let's put another Boulder in that same directory and it's called it j s now double click inside of it and you're going to name this file I'm just going to name mine simply Ajax save now I'm going to FTP that new jes folder with the Ajax J s inside of it to my root directory of my web server online now you simply tell the user of your framework that they are to go into the head document and make sure they put a link call that script into this file so basically it's the equivalent of calling jQuery into your web page and what you're doing when you're calling jQuery into your web page is you're calling all of its code into your web page which is a lot if you have a look at the source code for jQuery file you'll you'll know how much code you're calling in to your page but when you set this in here you know exactly what you're calling it to your page is this code right here it will be available basically for use within this web page and then when you go to make another file maybe temp to that HTML template ml whatever and those files might do totally different things you can simply add this to make sure all of that code is readily available if those other files are also going to use Ajax on them and you can see the usage right here so just remember that when the data gets back where you see this alert Ajax dot response text is the data that has returned from PHP and then you can work with it at that point display it evaluated whatever you want now let's make sure this works by loading tempi HTML to the root directory of web intersect calm again okay now I'm going to refresh the page and I get George is from USA and let me go ahead and view the page source and so you can see that what we're doing is basically we've created a the most lightweight Ajax and JavaScript framework in the known universe I don't think you can find a more lightweight Ajax framework so I just wanted to show you guys how the mind that of a brain work creator works alright so like I said all you have to do is show somebody give a little bit of direction on the usage of your framework and then offer them the file for download or you can tell them to link to the file directly from your server ok so hopefully you guys now have a more clear picture of what a framework is created for why they're created who is creating them and who they are created for

Channel: Adam Khoury

Views: 34,784

Keywords: ajax tutorial, learn ajax, javascript tutorial, ajax javascript, learn, xmlhttprequest, framework, JavaScript, php, mysql, ajax module, external, php tutorial, web intersect, learn programming, howto, script, program, web, development, design, online, free, lesson, educational, school, class, adam khoury

Id: kITAxN_5kUg

Length: 21min 7sec (1267 seconds)

Published: Fri Jan 11 2013