Ajax Tutorial Post to PHP File XMLHttpRequest Object Return Data Javascript [w/ subs]



00:00:00 – hello everybody how you doing in this
00:00:02 – lesson we will demonstrate how to use
00:00:03 – ajax to post form data to a PHP file and
00:00:07 – then get return data without page
00:00:09 – refresh
00:00:10 – some people like to use jQuery to help
00:00:12 – them post Ajax calls to PHP without
00:00:15 – having to know what is taking place in
00:00:17 – the code but i bet some of you guys
00:00:19 – would love to know how the raw ajax
00:00:21 – mechanism is assembled and how it all
00:00:24 – works in the guts of things and trust me
00:00:27 – is so easy that a twelve-year-old kid
00:00:29 – can manage creating their own custom
00:00:30 – Ajax calls the PHP after watching this
00:00:33 – video and snatching this free script
00:00:35 – from developed hp.com
00:00:37 – alright i'll be using dreamweaver cs5 as
00:00:40 – my text editor and you can use whichever
00:00:42 – one you want because we're not going to
00:00:44 – be in design view at all so you can use
00:00:46 – Notepad if you want you can see I have
00:00:48 – the beginnings of a very simple web
00:00:50 – document here the first thing I'll do is
00:00:52 – go into the body section and type in
00:00:54 – ajax close to PHP and get return data
00:01:00 – and i'll just take that and wrap it in
00:01:02 – an h2 tag by highlighting that text and
00:01:05 – pressing ctrl to injury and even now I
00:01:09 – want to have a field for your first name
00:01:13 – so this would be like the field label
00:01:14 – and there's the text field you can see
00:01:16 – it has it's an input text field to form
00:01:19 – element HTML has an idea of first name
00:01:23 – the name is also first name for that
00:01:25 – element and go one line down put in a
00:01:28 – break tag and the highlights this line
00:01:30 – and copy it and paste it here then I'm
00:01:33 – just going to put in last name here and
00:01:36 – change these to last and you'll notice
00:01:38 – that it's not going to be necessary for
00:01:39 – me to put in a form opening tag and a
00:01:42 – form closing tag i can just have form
00:01:44 – elements where I need them and then ajax
00:01:48 – can do the processing or JavaScript
00:01:50 – really can do the processing all right
00:01:52 – let's pop another break tag right here
00:01:54 – and take to break tags put them under
00:01:58 – this one because we're going to put a
00:01:59 – button here now actually in the break
00:02:01 – tags i'm going to put forward slash
00:02:04 – because you'll notice that those break
00:02:06 – tags if you just have BR by itself
00:02:08 – without the /in it doesn't validate w3c
00:02:12 – we just put our cursor here go up two
00:02:15 – forms at the button right there and
00:02:19 – we'll choose a submit button named we
00:02:23 – can just make it my BTN and the value
00:02:27 – can be submitted data whatever you want
00:02:30 – that to say is ok now all you have to do
00:02:33 – is add the on click event for this
00:02:36 – button so on click what we're going to
00:02:39 – do is fire up the javascript function
00:02:41 – called Ajax post so you just type in
00:02:44 – JavaScript colon and then the function
00:02:47 – that you want to fire off on click of
00:02:51 – this button when somebody clicks this
00:02:53 – button going to make this function
00:02:55 – called Ajax post-fire off now this
00:02:58 – function called Ajax post just needs to
00:03:01 – be assembled here in the head tag of
00:03:03 – this document will send data to PHP file
00:03:06 – the fabric
00:03:07 – ok now let's popped in that javascript
00:03:10 – function and you can see lines for 225
00:03:14 – it's really not bad and some of those
00:03:16 – lines are actually comments that I put
00:03:18 – in there now let me explain the code to
00:03:19 – your real well and also let me reassure
00:03:21 – you that I fully tested this in Firefox
00:03:24 – Internet Explorer Safari Chrome Opera
00:03:27 – and all the newest versions of all those
00:03:29 – popular browsers and it works nicely in
00:03:32 – all of them so as you can see here
00:03:34 – function ajax post and that's the one
00:03:37 – that fires off remember on click this
00:03:40 – button so you go in design mode you'll
00:03:42 – see exactly what we have so what happens
00:03:45 – is they put the first name they put
00:03:46 – their last names and they click submit
00:03:48 – data and that's the button when they
00:03:50 – click it fires off the Ajax post
00:03:52 – function young the first thing we need
00:03:54 – to do is create our xmlhttprequest
00:03:56 – object so I just name that HR short for
00:04:00 – HTTP request now we create some
00:04:03 – variables we need to send to our PHP
00:04:05 – script first one is URL and that's going
00:04:08 – to be equal to whatever the name of your
00:04:11 – PHP parsing script is the next variable
00:04:14 – is going to be called SN and that's
00:04:16 – going to be equal to the first name
00:04:19 – whatever the value is in this first name
00:04:21 – field the way access that was through
00:04:23 – document that get element by ID and I
00:04:25 – just claimed the first name field to
00:04:28 – grab that ID for that field and then
00:04:30 – that value i use that value property for
00:04:33 – it that way you can get the value but
00:04:35 – what is in the field when the person
00:04:38 – click that button so it in a variable
00:04:40 – called FN same for the last name that's
00:04:42 – in a variable called ln and last
00:04:45 – variable we need is one called bars and
00:04:47 – this is where you can assemble your URL
00:04:50 – encoded variables so you have key value
00:04:52 – pairs my first key is first name and the
00:04:55 – value for that is my FN variable
00:04:58 – whatever the person types in for their
00:05:00 – first name my next variable key is going
00:05:03 – to be last name
00:05:04 – and that's going to be equal to whatever
00:05:05 – they type in for their last name
00:05:07 – those are the variables that can be sent
00:05:09 – to my PHP script this URL now we're
00:05:12 – going to use the open method on the
00:05:15 – xmlhttprequest object right here and
00:05:18 – we're going to set its parameters are
00:05:20 – going to use post instead of get going
00:05:23 – to set the URL that supposed to be in
00:05:25 – place for the parsing we set the last
00:05:27 – parameter the true which lets the method
00:05:29 – know that we wanted to happen
00:05:31 – asynchronously now the next thing we do
00:05:34 – is set the content-type header
00:05:35 – information for sending the URL encoded
00:05:38 – variables in the request because right
00:05:41 – up here we're sending URL encoded
00:05:43 – variables key-value pairs that are
00:05:45 – separated by the ampersand the next line
00:05:48 – is we access the onreadystatechange
00:05:49 – event the xmlhttprequest object now what
00:05:54 – already state changes is an event of the
00:05:57 – HTTP request object I can say it anymore
00:06:01 – the xmlhttprequest object it's an event
00:06:04 – of that object that triggers every time
00:06:06 – the ready state changes and the values
00:06:08 – are 0 through 4 but the ready state and
00:06:11 – we can make a function fire off every
00:06:14 – time the ready state changes by
00:06:16 – listening and using this
00:06:17 – onreadystatechange event and there's a
00:06:20 – function that's going to fire off every
00:06:22 – time the ready state changes so when
00:06:25 – that ready state changes anytime it
00:06:27 – throughout the document for instance 0
00:06:29 – means not connected yet
00:06:31 – well I think one is establishing
00:06:33 – connection to establishing communication
00:06:36 – or some crap like that before is when
00:06:38 – it's complete and all throughout the
00:06:40 – transaction of the data there's going to
00:06:42 – be this onreadystatechange is going to
00:06:45 – be going from 0 to 4 so when this ready
00:06:49 – state changes this function is going to
00:06:51 – fire off and you can see that there's a
00:06:53 – little bit of code inside that function
00:06:55 – for lines and it's just an if statement
00:06:58 – a conditional and that conditional reads
00:07:01 – is our object ready state is equal to
00:07:04 – four which means complete and the
00:07:07 – objects status is equal to 200 which
00:07:10 – means ok then we can go ahead and
00:07:13 – process the return data in our document
00:07:16 – and you just scoop up
00:07:17 – the returns that PHP spits back to this
00:07:20 – file by using the response text property
00:07:24 – on your object now the next line is
00:07:27 – communication for some kind of div or
00:07:29 – box that you have on the page which i
00:07:31 – didn't put in place yet let me that put
00:07:33 – that now I'll just pop it right here on
00:07:35 – the bottom i'll put a couple of break
00:07:38 – tags and right there in the bottom and
00:07:41 – it did and you can use span if you want
00:07:45 – you can use a paragraph tag if you want
00:07:47 – long as you get the ID of status that
00:07:49 – way the JavaScript can communicate with
00:07:52 – it so when the data gets back from the
00:07:54 – PHP file and all is done processing then
00:07:58 – you can update that status field to put
00:08:00 – any kind of data that's coming back in
00:08:02 – the PHP file some kind of thank you
00:08:05 – message or whatever you want to put
00:08:07 – there and I'm going to show you what
00:08:09 – we're going to have an our PHP file
00:08:10 – don't worry
00:08:11 – so now there's only really two lines
00:08:13 – left to this whole function ajax post
00:08:16 – now this onreadystatechange
00:08:17 – functionality in this function that
00:08:20 – fires off and this condition that we
00:08:22 – have in here are all things that
00:08:24 – happened after you use this send method
00:08:27 – now the send method sends the request
00:08:29 – off to the server is going to contact
00:08:32 – the PHP file and send these variables
00:08:35 – that we assign here so you can put your
00:08:37 – parameter variables right there and
00:08:39 – really this line is where we actually
00:08:43 – execute the request and i put a little
00:08:46 – comment here for you guys that says send
00:08:48 – the data to the PHP now and wait for the
00:08:50 – response to update the status div so
00:08:53 – before you're even listening to the
00:08:54 – onreadystatechange you want to put in
00:08:56 – the status div maybe a little animated
00:08:58 – gift loader i just put the word
00:09:00 – processing by using the innerhtml
00:09:03 – property for that element which is the
00:09:07 – status box down here
00:09:08 – alright this age expose function is
00:09:10 – going to be looking for my parts while
00:09:12 – dot PHP to communicate with so that's
00:09:15 – what we got to create right now real
00:09:16 – quick so let's go to file new PHP get
00:09:20 – rid of all that data and let's put in
00:09:23 – this data and don't worry I'll have all
00:09:25 – this scripting available at develop PHP
00:09:28 – under the video where it's playing there
00:09:30 – so let me go ahead
00:09:31 – hey this is the proper file name which
00:09:34 – is my parts file file save as my parts
00:09:39 – file save
00:09:40 – ok now we can test it out and you have
00:09:43 – to make sure that you're on a server
00:09:45 – that process is PHP is on some people's
00:09:48 – local machines PHP won't process so you
00:09:50 – have to throw it up on your server
00:09:51 – that's PHP enabled for this whole script
00:09:54 – set to work alright so take note of what
00:09:57 – it says in the PHP file here says thank
00:10:00 – you going to say first name last name
00:10:03 – says the PHP file so that way if you get
00:10:06 – this response back in your original
00:10:08 – document that has the form on it then
00:10:10 – you know that your HX plus happened
00:10:12 – successfully and everything worked out
00:10:14 – fine
00:10:15 – alright i'll show you guys that it works
00:10:18 – i put in Adam Corey submit data and it
00:10:23 – said processing for a split second there
00:10:25 – and that is where you can put an
00:10:26 – animated loader if you want
00:10:28 – so here we have the information back
00:10:30 – from PHP file that says thank you Adam
00:10:32 – Corey says the PHP file so you know
00:10:34 – everything work nice and you have a nice
00:10:36 – smooth lightweight ajax posed to PHP
00:10:39 – mechanism now or you can even
00:10:41 – externalize this you can put this
00:10:44 – function into an external javascript
00:10:45 – file and call on it whenever you need to
00:10:48 – post to a PHP script using ajax


Video Url:
http://youtu.be/Y2meCt_akpY

Comments

comments