jQuery AJAX Basics

Hello guys! Welcome to our series jQuery.

Previously we were learning traversing and finished it in the last segment.Moving ahead, from today’s topic we are starting a new module that is AJAX.

AJAX is not part of jQuery , it is an independent technique.

What is AJAX?

AJAX basically stands for Asynchronous JavaScript and XML.

So I will first explain its use in layman terms then we will go to the jQuery part.

AJAX basically helps us in request and response means if we do talk about request and response then having server is mandatory means if I have the server then I can send request from my local computer to the server and secondly I will get some responses on the server. So here comes the request response scenario from my computer on the server.

So here if you had noticed that we had made forms on the jQuery programme and after clicking submit my data got stored in another place and the very important thing is that my page gets reloaded means my page gets reloaded after submitting.

 It is not necessary that after request or getting response my page must be reloaded , as you have seen many websites or web applications in which after clicking any button you get data from the server but every time your current page doesn't get reloaded after receiving data. So stopping this reloading is made very easy through our AJAX.

So till here, you have heard AJAX and from here, the request – response scenario in AJAX starts.

Whenever I want to get data from my server I want the response of my request but don’t want to reload the page and also want to show my received data on the page, so this task can be done through the AJAX.

Now let’s go to our next slide.

Firstly, it is written in the full form of AJAX that is “Asynchronous JavaScript and XML”.

 Now what is AJAX? So AJAX is a group of interrelated technologies like JAVASCRIPT, DOM Means DOCUMENT OBJECT MODEL, XML .What is XML? It is a format of receiving data after sending request to server, HTML AND XHTML, CSS and most important XML Http Request that is XHR means whenever I send request to the server and get the response then there is a use of all of these technologies and if all these are grouped and to handle request – response then the use of AJAX comes into play.

What does AJAX do? It allows us to send and receive data asynchronously and most importantly without reloading the web page means request go and response come without reloading the page. So I can get the data from my server very easily.

Here, on our jQuery we have an ajax method for AJAX means if we have to perform a request –response programme through jQuery then how can we do that? I can do that also with the use of jQuery  and through jQuery we can send requests to the server and get the response with the help of ajax method.

What does AJAX do? AJAX requests the program wherever the request handles, so basically from our end it will send requests to the server. It sends an asynchronous HTTP request to the server and it is widely used for the requests means AJAX is widely used to send requests  and this request is through HTTP.

So ideally, as a conclusion, if I have to send a request from my programme then how can I send it? I can send it with the help of AJAX. So in the ajax method request options are available for how you want to send requests.

So now we go to our next slide. Here the syntax of AJAX is written and as you can see dollar dot ajax, now every time selector part come that is selector then comes method name after dot but in today’s scenario it is not the same, today it is direct written dot ajax after dollar means this part comes under “DOCUMENT DOT READY” but we will handle our dollar dot ajax under “DOCUMENT DOT READY”.

Here you can see an object because when the circular parenthesis starts, under which you can see the curly brackets which indicates that as a request part whatever we are sending in the object the name values are in pairs means an object with name values in pairs.

So now what are possible under name values? Here you can see a table with the name part which comes under name and the value part which comes under value means definitely you don’t have to write long strings but some parts will go there.

For example, what can be the name value of pairs is shown here. One of them is “async” under name. What is async? So async is a Boolean value means async can be true or false and its default value is true means definitely ‘A’ in “async” stands for asynchronous means whether we want our request to be asynchronous or not and for that we have our async and its default value is true which means by default the request is handled asynchronously. So our first parameter of name value pair is async.

 Second parameter is “cache”. Cache is also a Boolean value. What happens in cache is that whenever I send request and get response data then it get stored in my browser cache memory and so if I make cache true then by default I will get the stored data in my browser due to my first request but if I make cache false then data will not come from the stored data in cache memory and always it will get reloaded from response of the request.

It is beneficial sometimes to make cache true so to get the latest data after every reload but it is necessary sometimes to make it false. If you are making it true then you are saving the time period of request by getting the stored data but sometimes it becomes problematic as if you always keep it true then you may get old data instead of latest data from the cache memory, so there are both the possibilities.

Then comes the “content Type”, it is used when sending the data to the server means when we are sending the data and in which way we are sending and it always has a default value, see the part after application with caution that is ‘X DOT WWW DOT URL ENCODED’ because how do we send data, through request seen in URL and data go in URL ENCODED string through object. So we will keep it URL ENCODED.

Some other values are also here which are important and some are mandatory too.

“Data”, Data sent to the server could be a string, an array or a JSON object means whatever I want to send in request then I will combine it in data part however I can send it without data if I only want to send request without adding data.

“Data Type” means in which type we are expecting data from the server means if I want server to reply in string then I will keep the data type string , if I want reply in JSON I will keep it JSON, so in this way I can decide the data Type.

“Timeout” means it is the timeout for the request in terms of milliseconds. It is set to the value of zero means there is no timeout. If possible keep it zero because to handle some requests more time is required and to handle others less time is required. If I give a timeout then the request taking more time will drop out, so better is to keep it zero so as to give the request the time it needs to handle.

Then comes the “Traditional” which is a Boolean method and used in serialisation which we have already learnt in jQuery to how to send serialised data through URL which sets our traditional value.

Now come three important names. First is Type, what kind of work we are doing? Is it a get type of request or post type or put type.

Get request us to receive, post request us to update the data on the server.

I am repeating, if we are using get URL which means using get request which indicates that the request which I had sent on URL must send me something. Post means that I will send something to the server. It means it’s not always that we get a response of request but sometimes we have to update the data on the server so in that case we use post.

Then comes the most important, URL. We have been talking about request- response and URL for so long but until we mention URL we don’t know where we are sending. So this URL indicates where we want to send the data. So the URL is a kind of address of the server’s program or where the program is.

And last is our User Name. If we need authentication then our User Name comes into picture. So if we do an HTTP request and on server side authentication is required then we must send the User Name in the User Name part for authentication.

So these were some parameters.

In today’s segment we will keep till it.

In next segment means in next video of this segment we will see how with the help of AJAX we can perform request response and how to make server because when I start AJAX I mention request response along with I told you how to take and handle data placed on the server and for that we need the server too.

So see you in the next video.

 Thank you so much.