Hello and welcome to this lecture.
In this lecture hall will be looking at a very simple busy Ajax example that will help explain what
we have covered in this course.
We will be using the brackets text editor which is a cross platform to get it on.
It has a bill of teen Web server so we can use it for Ajax example.
So in this example we are going to change the content of a simple web page using AJAX without refreshing
their web page.
So I have caught my brackets text edit all open this is text heavy.
As also got a build team server web server.
So I have got to fast.
This is the first Farn this far here.
This is the text that Ajax will use to change the content off the web page.
All right.
And then this is the hastier mail that will call.
They'll make the Ajax call to the web server.
So I have written out the code.
Let me just run through the code with you.
So the code is in two parts.
You've got the hastier male side of it.
And then you've got the javascript cell of things which contains the Ajax object.
So I'll start with the system part of it.
So the entire documents in hatim old document has the doctype.
But there is some javascript in between the script tag here.
So the an email page contains a deep section which is Deve here and also a button.
This is a button that when the button is being clicked on it all change the content on the page.
Using AJAX the Deve section.
Here is what will be used to display the information from the web server so the information that it
will be displayed from the web server will be displayed in this area here.
The button on the button will call the function when it is clicked.
OK so there would be an event so when the button is clicked it would trigger this function.
Here the name of the function is called My Duck and the function here as being specified inside the
script Ach.
So what this function does is specified inside this great tag here.
This script contains the function write what what function will do.
This function will request data from a web server and display data.
That's what this function will do.
It requires data from the web server and displaying the data.
So we begin on line 10 here by specifying a function.
So we defined the function.
This is a function name my doc and then in between these curly braces is what the function will do.
Line 11 here.
We've got a variable with giving the variable name as X..
Here's TTP.
You can give it any name it doesn't really matter so and then we give individually of new x him.
He's TTP request.
This is very important.
This is a new request object.
You need to create this every time you make a Ajax request to the web server.
Once you request has been made.
Next we need to check this date to change.
There are various t change its so we need to state change here have this function here.
Right so this is the function.
This is what it will do if the read is state.
Remember there are 5 red this date 0 4.
If the red state is equal to 4 and the status is.
Just to read it will do this.
It's called You document.
Don't get it.
I see the idea here is you dummy.
So what then move it will replace this text here with the.
That is Tier mail that is similar is what is used to replace the text and the value of the.
You name it here month it was so the response text this response to it is how this server sends a response
back to the web browser and the value of this response text here is this text here which is this far
here.
All right so on line 17 here.
We've got the method the TTP method which is we're using get.
Remember there are two types.
You can use get top post here we're using get value.
What date is getting is this text file.
Here is this file here.
This file up in N is secret last month because we specified it to be true.
That means it will be a synchronoss to do all these without interrupting the flow of the web browser.
And once he gets that information in then send it is in the air.
It's his TTP Dr St..
K..
So this is how the whole process works.
So if I click on that now we should see that in Arkansas.
That.
Okay it's luncheon.
Okay.
All right.
You can see this is the Web is a web server.
Then say here's the address there.
This is a look back adapter.
So if I click on this now.
Is she changed a date.
So quick change and it is changed to data base.
We can also check to see if the SML el-hage TTP request has finished.
So let's check this out.
We go to the blog on good to develop tools.
Goes to show developer tools
and click on this.
My a web browsers plane up at the moment so I've skipped the developer tools but this is how you would
generate a Ajax core to a server.
So if he is in the brackets tech said it all you should have the same desired result.
As I have saw in this lecture we created a very simple Ajax requests from his same old document and
we were able to change the content of the p without reloading the entire web page.
Thank you so much for watching.
Is there any shoes or any parts on the video.
To not understand.
Please let me know.
Thanks.
Bye for now.