jQuery ajaxSend() and ajaxError() Methods

 Hello Guys, welcome to our series jQuery. In our previous segment we completed the Load Method of AJAX through jQuery. So, we are moving forward with simple things in our AJAX and we finished the Load Method in our previous section with all the possible examples. I hope you have practiced the entire practical we did.

Let’s move ahead in today’s AJAX segment only. Our segment for today is on ajaxSend and ajaxError Methods. The names are big but the methods are very easy if you’re using ajax terms.

The use of AjaxSend is, sometimes it so happens that if you have to send a request on a server, but before sending the request you have to finish a task, means exactly before it, if, exactly before the request is sent on server, you have to highlight a portion on your webpage, to fix a button, or any change you have to do, show an alert box, then you can do with the help of ajaxSend. AjaxSend is a method that is executed exactly before a request is made. It means that you have sent a request, the request is on the way, and the ajaxSend method is executed exactly before it. So the same thing is written here. “It is an AJAX event that triggers when an AJAX request is about to be sent”.

So it’s not like that one method, whenever you send a request, execute a request, send it, our ajaxSend method will be executed before each such request. So here its Syntax is also very simple, we have to apply ajaxSend after a simple selector. Here in the program an example is given here, we will create a file named demo text and another one named ajaxsend. And here its Syntax is something like this in which we will write a function on ajaxSend and  an alert box is shown inside the function and there is a simple message inside the alert box “the request is about to send” and after requesting we have kept the URL in OPT. You can see that in our function that is being executed there are three values, parameters.

One is E which indicates an event; one is XHR, which we have seen in our previous section, XHR defines our send/receive status; and opt is options. Options holds all the parameters of ajax, for example type, data type, URL, async, etc. So we have shown the URL from OPT.

So what we can do for our ajaxSend. So, here my Xampp is already started, I have started it, and after Xampp if I go to my browser(4 seconds pause, typing).

Here, you can see that in my jQuery folder all the programs that I have done so far are all there as it is in my local host. So I will use one from these programs, which is my last program of load method.

So from this file here, from jQuery, I will open this load method program in sublime text... I will copy paste this load method and in place of load, I will write …‘ajaxSend’. Let’s keep this response here as it is, and this response here “this statement will be replaced” and ‘click’ we will keep this portion as it is, there is no change in this. Basically, my ajaxSend will be executed exactly before I send the request, which means that the request that is done by the load method, exactly before that my ajaxSend method will be executed. So I will do one thing here. On the button click here, I will again write a Dollar….. Document. Means here Dollar Document is already written, still here Dollar Document dot ….ajaxSend …..and my function okay, this portion comes.

 What does it indicate? The document that I have is a complete document anytime when my ajax request will be executed means the load method will be executed or else if I request it from jQuery dot ajax, it either I am requesting from jQuery dot ajax or from the lower. Either of the both requests are gone, indirectly from the document the request will be forwarded then this ajaxSend method will be executed.

Now what do we keep in our function? One is our event, second is our XHR, and last is options. So what alert do I have to make when I have to make a request? ‘The request is… about to be… sent..’. In the new line I will write …‘request URL’ ….and here, ‘plus option dot…. URL’. …Okay and plus it and pass an empty string. This much I want to show everytime when I press the button and this load method will be executed. So let’s say I save this program…. in the name ‘ajaxSend’. And now if I go to this page, here my ajaxSend method has come. I opened it.

This statement will be replaced. Definitely, in the previous segment, we have made a demo dot html file for our load method where two statements are kept. A response will come from there and this statement will be replaced. But before that, I click here, so an alert box comes. ‘The request is about to be sent’, ‘Request url is demo dot html’.

 Now I haven’t written demo dot html anywhere in my alert box, demo dot html is inside my load method. So demo dot html has come from my options here. So what do options hold here?

 All the parameters of this ajax call through load method.  Async, URL, data, data type, etc, everything will come in our options. Now as I click on this okay, so you can see the statement will be replaced but my statement has not been replaced yet, means something is wrong ‘Server with status four zero four not found’. So here I have taken demo dot html, and here is my response, this is correct, nothing wrong is here…. So here in the name, nine point two space demo dot html in place of demo dot html. Again click, okay, and this is still not updated, because it is showing a problem in the name.

So I will update the names of these files here. So we have written nine point two here, so here remove the space, and here also remove space, and save. Reload, click, and my data has come here. Because we made a problem in naming the file, this problem has been occurring.

So as soon as I click, whatever name I have given to my file is here on my alert box, whatever the file name I have taken here and then my data is showing. So this is an indication that whenever I make a request through this program, whatever is written here in the ajax dot send portion will be executed before each such request. Not necessarily I will make it an alert, but whatever you want to make before each request, before each URL, that task you can execute here.

So this was our AjaxSend. Exactly like ajaxSend, we have our second method that is ajaxError. Now if you have understood ajaxSend, then you must have understood ajaxError also.

What does ajaxError do, basically? If send does something before request is sent, then what will error do? It will do some task before the error comes, meaning if my URL is successfully executed, there is no error. But if an error occurs because of any of my execution, my program will give an error. There will be an error in the console as well as in the network.

So to understand what is error, we have to write an error part. If there is an error at any place in our program, we can use ajaxError to make it show up. And to know what error is, and for indication if there is an error, that an error has come and now you have to resolve it, so that you can tell with the help of ajaxError.

So as it is written here ‘AjaxError method is used to attach a function to be run when an AJAX request fails’ means on failing, so indirectly, either its failing or an error is occurring, same thing. ‘The jQuery triggers the ajaxError event when an AJAX request completes with an error’ means whenever a request is converted into an error, our ajaxError method is executed then.

Its syntax is similar to ajaxSend. After selector in place of ajaxSend we will write an error and write our function. Here, XHR and options are the same as we have learnt in ajaxSend, but EXC means the execution object will be different. Here exception object is one that will be passed when an exception occurs during the request processing. Means if an exception occurs then our exception part will be executed. Not necessarily that we will write all these parameters each time.

Let’s say an error has occurred, then only our Error part is being executed, isn’t it? So let’s say I only have to give a simple alert that an error has occurred, so in that case I don’t have any requirement of all these portions. So we will do a simple program where none of these parameters will be used.

So that program is in this way. We will create a file named demo. In our current case we already have a filename demo. And we will only write about the ajaxError part. So in the previous program we have written ajaxSend part, we will replace it with ajaxError part.

 So this is our ajaxSend part. So I will copy this program.(6 seconds pause, typing)  This complete program we will copy and paste here. Here, ajaxError ….will come. Here also Error, and here also Error. Now this error that we wrote, so this alert part and as I said I don’t need the parameters in the function part, so I removed the parameters.

 So here alert ‘the request is about to be sent’ we will also remove this part. We will only keep “an error… occurred while executing ….the request” that’s it. We will save this program. And we will name it as “ajaxError”….

 Along with it the load method that we have written so let’s see what we have here. So we have here the response method written over a button click. So let’s change this part. Let’s say this dollar document and ajaxerror part here we take common. Alright. So that whatever button is clicked, whatever method is executed, each time an error occurs, this part is executed okay. So we took this part out.

Now here we have taken ‘click’… “make request one”(7 seconds pause, typing)  and here “make request two”. So here we have taken the ‘button’. So let’s give one the ID button one and the other will be button two. And here we will do button one, in which I will get this result in the response. Let’s say I will copy this same button one part and button two and here remove this nine point two part and only keep demo dot html. Means I have intentionally given the wrong name to the file, okay.

Now I will save this program and go to my server, which means here in the jQuery part I will execute ajaxError. So what comes here in the heading? ‘This statement will be replaced’ means if I make request one this part will be replaced with my response but when I make request two then an error will occur because I have changed the name of the file. So let’s say I click on make request one. So my part is executed, an error has not occurred. You can see, no error has occurred in the console either. Now I will click on request two and my alert box comes which indicates something is wrong.’ An error occurred while executing the request’ and, what is the error? That is four zero four not found means the name I have given to the file here is wrong.

The file name is nine point two demo dot html but I have given a demo. Means file is not matching so error is occurring. What does it indicate? In my document there are a total of two buttons and two requests are being generated from the two buttons. If an error occurs from any button then the ajaxError part kept in the function here will be executed. So no matter how many methods I have made in my document, how many requests I am executing, if there is any error generated from any particular document, then my ajaxError part will be executed, and if there is an error then my alert box will show up.

Very useful method, whenever you have to tell a user that there is something wrong in the request you have sent, then you can tell this through this portion. That’s why this method is very useful. If in this method only, you have to show where the error has occurred from like this event, XHR, options, then you can pass event, XHR, options here also. Options hold URL, etc, so here we can write slash N.. URL plus… option… dot URL. So here is our URL that is also shown and if we want to know the status, then we can also show it inside the status.( 4 SECONDS pause, typing) Plus option dot sorry, XHR dot status. And if we also want to show what the error is, then, here our statusText has come. ( 5 seconds pause, typing) Save this program and execute it.

This is the successful part and this is the error part. What has come? URL is demo dot html and status is four zero four not found. So all the things we should know, tell the user, that where the error has occurred, what is wrong, so it can be sometimes identified from the URL that whether we have hit the URL in the right place or not, we have sent the request or not, that we can find from the URL.

Second, we can find what error has occurred from the status.  You can see I have passed status in XHR status text and that is showing here. So this is another variation. If we don’t pass something in the function and want to tell that an error has occurred, we can show that. If I have passed a value in the function and want to show the user descriptive way, what error has occurred and from what, we can tell it with these parameters also. So this was our ajaxError.

Let’s go to the slide. Here in this segment Ajax Send and Ajax Error, if you want to send the previous task and if an error comes then how to resolve it and what is the error, for this Ajax Error. Two very important methods have been covered in today’s segment. So guys, if you have any difficulty in today’s segment, any problem, anything you did not understand or I request that you practice both the practicals. If you face any difficulty during practicals, you can tell us on forums dot learnvern dot com. We will revert to all your questions, queries and difficulties with solutions. Discussion to be added.

Next segment is about Ajax get and post. How we can execute, get and post things. So see you in the next segment guys. Thank you so much.