jQuery AJAX load() Method

Hello guys, welcome to our series jQuery. In the previous segment we have completed the introduction part of AJAX and we have also seen how to use the AJAX method. So let’s continue with today’s segment. Today’s topic is on AJAX load method.

Basically the word “ load”, you must be thinking that this word indicates, the method should be executed when the output is loaded. And somehow you are correct also because when we get any response and when that response is loaded to our web page then this method is executed.

Here in load method is written as “a simple but powerful method where load method loads data from a server and puts the returned data into the selected elements”. Means, as we have seen in the previous segment what AJAX method does, AJAX method brings the response and puts it in our program where we have defined it. Like in the previous example, we created an ID named response in the type of paragraph and then we showed the response. And then in one last example we directly loaded the script.

Now we’ll see how the load method works? So for the load method what you have to do for the load method in the previous example,in example of AJAX, dollar AJAX jQuery dot AJAX method was our syntax. But today again in the load method selector will come that you, your data where it is coming from, have to keep it that will come in under this selector part. If you want to show your data by taking name of the response in which ID or class is coming then in this part ID name will come in selector part means if Whether its paragraph so paragraph if it isDIV then DIV any ID or class is given like response  then it will come in selector part.

Then comes our load method. In the URL part, which URL we have taken in the previous section which we used in AJAX method we are going to keep the same URL in this. Then data, what type of data is there that will come here like it is written here “it specifies a set of query string, key value pairs to send along with the request” means, if we want to share or sell  anything with  a request then it will come under the data part. Actually, I will see two data practicals that in first practical we will perform without data and in second practical we will perform with data so both our scenarios would get clear. Okay? And at last its callback. Callback is actually optional when it loads then if you want to execute any function then it will come under the callback part.

So this is our syntax of load method. It is an easy method when we will do the practical then this will get much clearer. This is our example. What do we have to do in this example first?

So firstly, we will need two files as we did in previous files. So we will make one file with names demo HTML and second we will make it with the name of load. So let’s open the sublime text. So the first file under my sublime text is in the name of a demo in which I will take one H two tag and I will take one P tag. So let’s say this is my H two here we will set it to HTML so that it works. Then here comes theH two inH two we will write jQuery… and AJAX.

That’s it. Now we will take our P tag in which I am giving an intention ID that is named P one…. Okay? So now we will do nothing but directly write “this is a… statement”. We will save it by the name of demo dot HTML, so now my programme has been saved by the name of dot HTML.

Now we will make another program under the slide. This is another program which is named by load programme where we will execute the load method inside DIV. So basically how are we going to do it? So, we will go to sublime text where we have our HTML. Our program havecome example load. We will place our library here( 5 seconds pause, typing) . Okay? ( 4 seconds pause, typing) Document …dot ….ready… function. Okay?Or here is…. the style…. inside the body…. text align centre and inside the body…. H one and in H one we will write… an example, load and as always we make a button… What do we have to do when we write? So that is my click button. Button sorry we will give the ID name by BTN and we have performed by clicking this button so it will come to our dollar… hashtag BTN…. dot click function and here we have to write logic that will come basically on button click me in my portion wherever I have to load something.

Let’s say I will take one DIV then give it anID response. Now here,  dollar ID response. We will write an inside response… dot …load correct? So what we have loaded inside this DIV will come here. So here I have written ``load” and here I will give my URL inside these quotes. Our URL is demo… dot HTML. Let’s keep it here for now in this program. Save it this is our program load dot HTML. So now we will go to our browser and where our local host is running there only you can see the local host is already running. Okay? So in the local host there is my jQuery folder and here my demo and load both have come.

Firstly, I will open a demo and there is jQuery and AJAX and this is a statement. Means that what we are going to load. Now I will go to load dot HTML which means in our original program and now I will click on the click. So as soon as I clicked on the click which is my paragraph.. where ID name by response from there is, the whole portion of demo by loading has come here. Now in this program here I am writing one paragraph… ID, this ID which is in response I will take it here and remove this DIV. Now “this statement… will be… replaced”. Reload. So now what will I do? Press the button. So what happened is instead of this statement it replaced the response that has been set because we have given an ID name by response and in that response we have loaded our demo content. So in AJAX there is a facility for this load method. Here you can see that we have removed some things. As you have seen in the previous example jQuery dot AJAX. I will open that program….. As this my AJAX dotHTML. So let’s open in our sublime text. So here as you can see inside the AJAX part and what is the difference in our current program. In our current program we have directly a dollar and a selector and in the load method we have passed our URL.

Next, which was our previous example, what have we written? We have written the method of jQuery dot AJAX in that we have given our URL separately and given type separately. What we have to do on success that is written. So how much less our portion becomes when we use the load method. You can see here that from line number ten to line number sixteen. That means our 6 lines have been reduced when we directly use load instead of AJAX.

But load is definitely used for limited purposes only. Load will only hit on execute at URL and at some specific places were we have to update that only we can define with the help of this selector.

Rest of which we have to perform operation for that you have to, like we cannot define type for that you have to use jQuery AJAX method. But if you only want to generate a request so in that case you can use our demo, sorry the load method you can use that.

 So this was an example of a load method in which simply at wherever you want to load your response that you can load it.

Now, we will go to our slide. This is our load method. There are some callbacks inside the load method. Like here if you have seen inside syntax then after the URL there is data and call backs are written. What is inside it?So which data part is here or else the call back is there so when we generate the callback function then what happens in that function?

So “call back parameter specifies the callback function to run when the load method is completed”.  Means when my load method is completed after then if I have to execute something then that will take place with the functions inside the load method. Now what comes under this function? In this function our response text “contains the resulting content if the call succeeds”. Means, which was our AJAX method in AJAX method which is the success part that success part was it, comes in our load method. So function in callback back function where response text has come there it is.

Second thing, status text, what is statusTXT response to our current situation, what is their status, whether its success, failure or error have come. What is it?  So that we come to know by statusTXT.

Then here comes our XHR which is the object of our XML HTTP request. By this we get the means in XHR we only get a complete response object basically that what we have sent in request and what we get in response. Simply we can find out by XHR that it is gone and what has come.

If we see an example of this, here this is our load method as we did it. This is our URL from which we want the data and then instead of its success we directly update this DIV one we execute one function and what have taken  in functions which we have seen previous  these three parameters that only we have passed here in these three parameters that “response text”, status text and XHR.

In status text there is success and in status text there is error. Because what response we get it can have two statuses: it can be either success or is in failure. Fail indicates some error has come. Here we can see success and error. So if success is there then we do not have to show our data but what are we showing our alert box and data is coming on DIV one and in error we’ll show the status which is in XHR, that what type of error has come.

So this is a very interesting program so let’s say. What programme of load we have done that programme only we will copy and paste it here.  And now here we will write load with callback.Okay?

Here in response load demo dot HTML is already there. But here we will execute it by doing the comma here function. Now this is my function. We passed three parameters in the function, the first parameter is responseT then small X and capital T, then comes out by doing comma we can also keep response TXT no problem then comes statusText and last comes our XHR. Okay? So here comes our three variables and we have passed parameters

 Now what do we have to do? We have to check whether the response text is successful or not. So we will write here if responsetext equal to, equal to success or something else. Or we can also remove “else… and we simply here if response text equal… to, equal to error so this our portion of this

Now in the success part, what do we have to write? We will alert them. If it is successful then “demo file… data loaded …successfully”. Or if it comes wrong then means it has any error then our two status texts and XHR will help us. Response is now used here now we will write here XHR dot status. This is our status means what error has come   which indicates error in status which we can see by XHR dot… status…. So we will write here an error, and here XHR status. Okay? Plus,….

Now here will come after an error about the status of XHR. Means what error has come and what is the status of that error? And what is the status of that text? Means we will show what the error is as well the value of that error. So now here will come after doing colon… XHR dot status…. text. Okay?  So here both things have come.

Save this program. Previously we named it as load so now we will also name it as “load underscore with callback”. And we will run this program on our server only. So, reload so this is our  load with callback.

Currently you can see that we got a successful response that’s why my data has been updated. So now what will I do? Now, I intentionally remove O from my file demo and replace it with Dem, which means such one file that doesn’t exist. Now I will click and you can see nothing is executed means there is something wrong. So for that we will do F twelve here it is coming server responding with status four zero four and here( 6 seconds pause.)

It is successful and here we do not have any error but here in  our alert box it is still not shown which means  we have written something wrong here that’s why it is not showing properly. So we will find out what we have written wrong.  So here we have checked the status whether the status is success or status is having error and here we have used response text so instead of response text here it will come status text.So Status text equal to success or error.

We will save this program. We will go back again to our browser and reload it. Let me close this. So now when you click this, you can see first that the demo file data loaded successfully. It means this part is executed and my status is successful because I have given the file name correctly. Okay?

And then this part of mine has been executed. Now I will intensely remove O from the demo.. and then I will reload it, click.., error, what is the error?Four zero four not found…Means which error we found on console after doing okay here, that error only we have shown in proper manner in alert box also I will click again four zero four not found, four zero four not found means what this indicates that this file did not found on server. How will it happen? There is no such file named as Dem. The file is demo dot HTML.

So this is our example, we have seen two parts of the load. First part, example one in which it simply brings data by the help of load and in second part, brings data by help of loadbut we have executed some function after bringing the data. So here we have seen both examples of load.

One example is left, previously we have seen an example of load simple example in that in load we have GETdemo dot HTML file,  And in my demo file there is part of P one paragraph related. Now I don’t want that jQuery and AJAX will get loads only P one get loaded. Now what do I have to do?  After demo dot HTML I will write hash tag P one what it indicates? Previous means from the demo file there is ID name P one only brings that part only. So if I save this and go back to the server and execute my demo file I’m sorry the demo will not come. So now see what will come? Previously two lines were the header and statement. Now you can see only the statement has come from here now I am reloading. Previously what was coming? Let me open this here so we have ideas. What is a demo file? We have kept two things jQuery and AJAX, this is a statement. But you can see that previously this whole thing was coming, now only this is coming instead of that thing,  “this is a statement”  what it indicates?

This indicates that with the help of the load method which we kept our file on which we have to GET some particular portion so that we can also do by using this P one, P one means using ID and all. We have seen three variations of load files. We will load a complete file or else we will load any portion of the complete file and after loading the complete file we will execute any function based on the status  which was received.

So this was our load method. Guys load method is very important in AJAX. I request you whichever we have seen three practical’s today practice all the three. You practice this   and if you come across any difficulties during practice so you can inform us on forum dot learn Vern dot complus in today’s segment in that also you having any problem, any difficulties or you don’t understand any point so that also you can inform us on forum dot learn Vern dot com we will revert you back there with solution to all your questions. Discussion to be added.

So in the next segment we will see AJAX send and AJAX error methods. Thank you so much.