jQuery ajax() Method

Hello guys, welcome to our series jQuery.

In the previous segment we started AJAX in the current module the technology is AJAX. Through jQuery we can do AJAX calls. So today’s video is the connecting part of the previous video. So we are gonna see how to call the client server. So in the last video I explained that for AJAX, a server is mandatory. Therefore, in today’s video we have to learn how to enable a server. So if you have done the JavaScript course of LearnVern, then in that course I explained cookies. In cookies, I explained how to install the XAMPP server. So with the help of the same XAMPP server we will learn how to create a local host server and how to call AJAX. So basically if you remember XAMPP, here I enabled the tool of XAMPP. This is our XAMPP.

So if you remember, after installation this panel was shown. So in this panel we have started our Apache server. So let me start it. If it is successfully started then it will turn green.

So okay now my server has started.

So now once my server is started, I’ll go into my C drive, there in the XAMPP folder, HT docs, as in JavaScript we did that under cookies so these programs saved are cookies related.

As we are learning jQuery, I'll create a new folder named… jQuery. So inside this jQuery we’ll write all our AJAX related programs. Means in here inside the XAMPP, HT docs there is jQuery folder in there all the programs will be written that are of AJAX.

So firstly I’ll open chrome, and here local host because my local host is running on eight triple zero. So here I’ll write eight triple zero and dashboards.

We’ll click enter. So this is my XAMPP server…And it is opening now.

So this dashboard if I have a folder like my folder jQuery, so in HT docs jQuery, here… I’ll write JavaScript….

As here in JavaScript it is capital J…. No request is shown here now…. So here after writing JavaScript we got all programs related to JavaScript and cookies. Now here instead of JavaScript, if we write jQuery here…., then my jQuery folder is shown here. And currently no program is here so nothing is shown here. But if we write any program then we will store it under the jQuery folder so that it is shown under this particular region in our browser.

So firstly the program that we have to write. This is our slide where we have our saved program.

Basically, we have to perform a request response for our AJAX response. So for this firstly I’ll open the sublime text and make a normal HTML file.

Like this is now HTML..

So now in this HTML file I’ll write nothing except this H one. And inside this H one there is ‘hello…everyone’. …Okay and now we will make another, H two and inside it we will write “This is…. LearnVern. LearnVern is…. an awesome place to learn…. jQuery.”

So this is my program now. Now I’ll save it by the name test dot HTML. But I will repeat once again where we have to save the program. In C, in XAMPP there is HT docs, jQuery folder, there we have to save our program.

So my test dot HTML is here. Now I will make another program. If you want to test it then there is a folder in test dot HTML and in our server also you can reload it and see test dot HTML.

Now I will make another program in which I will use HTML. In this program we will write an example of AJAX. Okay.

In this program, we are going to do the normal things that we do in a program, nothing different.

We added our library. We will add our script…. Document.. dot ready function….And as for now we’ll write nothing. In body we’ll write style here. Inside body…., text align center. In H one, example, and this is our example of AJAX…. So this is our program. In this program, we want it to send a request on the server, as it is an AJAX program.  So currently our program is written on a server and we created this local server by ourselves.

So what will happen now is that I will send a request on this test HTML. So the request will go to the server and in response the whole Test HTML file will return. And the things we will show the things we get from test HTML.

So basically what we have to do is need a button…. And in button ID. Click or after this button we can take an element, like I will take it as P and inside this ID I’ll take it as response. Okay. So that whatever I will get will be shown in the place of response. Clear.

Now I have to write the click event of this so that when I click the button the request will be gone and I get a response in return.

So for this what we have to do is, dollar… button dot…. click… function. Meaning, something should be performed once I click the button. So when I click the button then my jQuery program will call AJAX. So for that what we have written is, see it carefully, inside the button jQuery… dot AJAX. So here my function starts and this portion. So if you have seen yesterday’s video then this was our syntax of jQuery dot AJAX. So here I've written jQuery dot AJAX.  We started our function and in function we made our object which will give us a returned value.

So we have to pass some parameters inside AJAX like URL. Now the URL of the whole program will come under this URL. Means test… dot HTML. So what I’ll write here is, test dot… HTML.

And for the next parameter comma. Basically, we want to work on request response so the URL becomes mandatory. Then comes type. Which type of request is it, now this is a get type request.

Now we have given the URL and request type so now what we will do when we get our response. So we get our response and it is successful then this is our success part. If our response is successful then our function, that if our response is successful then this is our data. See it carefully, what we have written here. If we have our response as success we have executed this function to see the data. So dollar… ID means hashtag and this is our response. If you don’t have confidence then you can also copy so that it does not show any error.

Dot.. HTML. We’ll set the data inside it. So this is our program. Basically what we have done in this AJAX is, we have called the AJAX of HTML get type. And when we get a success response then we have set it in the same page P.

Now I’ll save it under HT docs , in jQuery, by naming it AJAX. Now I’ll go to my jQuery folder, where there is my test or if we reload it in chrome then it will show there also. So I’ll run this AJAX program so as you can see it is showing the same thing we wrote or the same thing that… we execute is our test.

So in H one it is written as “hello everyone this is LearnVern. LearnVern is an awesome place to learn jQuery” . So the matter written here should be shown when I click this button. So I’ll click it.

Some data waiting period came but as you can see nothing happened. So I’ll do F twelve to see what is wrong. So here it is written as failing to load resources. Server responded with an error of four zero four. Means, when I called the request then it was not successful means there is something wrong. So now we have to find out what is wrong here. Let us check first.

So for this first we’ll first go to our code and here as you can see our program name is wrong. Instead of TEST here it is written as TEXT. So I’ll write here as text and save it.

Reload the program and then I’ll click it. As soon as I clicked then whatever our content was in our test program. The complete program will come here and my page is also not reloaded. So as you can see how with the help of our AJAX dot HTMLprogram we send a request to test dot HTML and in return we get its complete content. And that whole content is shown here.

So now all the things that we said in previous videos are clear how it works. Here I initially started with a server. Because the response part will not be executed if we do not start it from the server. Request response part is only executed when you do it with a server or rather you have enabled a local host. Because to request it we necessarily need a server. That’s why we used XAMPP in our local host. So this is our program of how we bring the complete code here and show the output.

We’ll go to our slide, this was our first AJAX program. Now comes the second program. There is only one simple difference between these two programs. As you saw before in the previous video that it is called by async true but we don’t want to write async true then we can also write it as async false.

So here I completely copy and pasted the program. AJAX.Async… false.

Here also, async is false.

Here we’ll add parameter async and after writing async we’ll write false like this. Correct? Save…. We’ll name it as AJAX underscore two….

Now we’ll go back to our server and as you can see here, after reloading it came as AJAX two. Now I will run it and I’m getting as it is output.

Async false means that it is not async true now, so what will happen now is we’ll execute a method in which we’ll get a response and the system will wait till its response and once the response has come then it will execute the next function.

Currently in our program there is only one method. And we have also not performed many tasks as we are doing basic programs. But if you are working on a program which sends multiple requests at the same time then in that case put async true. You also get the request if you use async false but the order of the request won’t be proper. Maybe your third response becomes first, so it is better to put async true. But here we put async false and our program is correctly working.

Last name after async is create a file named test JS. So now here what we are gonna do is call AJAX and request a file named test dot HTML but not necessarily we are going to request a HTML file every time. It is possible to bring the js file in response.

So what we can do for it, let’s say I make a file. Here I will set it as js …JavaScript. Okay.

Now here I'll write an alert. Alert is “welcome… to learnvern.”  ….

“This is an alert …box through AJAX call” . Now we’ll save it. And its name will come under HTdocs jQuery. Alert dot, make sure, yes, now it has come as JS. Now I’ll save it. So my name is alert dot JS.

Now let’s say we put the HTML course here as it is. And we’ll write an AJAX alert. The type will not be changed here. But the difference is that the URL we have changed the URL written here and instead of that we’ll write alert dot JS. This is our get , it will remain as it is. But in data type instead of get we have to add data type and here have to script.

Why script?

Sorry. ( 4 seconds pause, typing)

So why we added script here is because the data we are going to receive will come under script. Basically when we receive any data then it will not be shown in any of our success portions. That's why I removed this part and here we do not need P.  So simply when I click the button then an alert will be received.

So let’s say I save this program with the name of “AJAX underscore three”.

This is my AJAX underscore three. In the browser, this is my AJAX dot HTML. I’ll open it by clicking.

So as you can see here the alert box has come with the message “welcome to LearnVern. This is an alert box through AJAX call.” So what we have done here is that we have run the program that was kept on our server.

So you can also run the program kept on the server with the help of AJAX. So in today’s video we saw multiple uses of AJAX. So here the three variations of AJAX are finished. Basically in today’s video and in the previous video we learned about the call of AJAX, why it is required and we did three programs in which we normally called it, we loaded HTML file where we did a program by putting async false and in last program we run a program which was kept in an external server.

So this complete topic was very important. Today we saw how to load a code and a script kept on a server.

So guys, I request you to practice all the practicals we did today and if you want to learn XAMPP installation then you can learn it from our Java section. All the details about XAMPP are given and if you come across any query, question or doubt related to today’s segment then you can tell us at FORUMS dot LEARNVERN dot COM, we’ll give a solution to all your questions. Discussion to be added.

So in the next segment we will seeAJAX load method. Thank you guys.