Skip to main content

Difference between HTTP GET and HTTP POST method

HTTP GET request append all the required data to the URL while in HTTP POST method it will supply all the additional data to the body of message.
Each form element in HTML form must have an method attributes, it can use either POST or GET. Get is a default method for form element if we are not specifying it. specified method attribute determines how form data is submitted to the server. GET method will encode all the data and append to the request URL as a query string. Post method will pass all the data in a message body of the HTTP request.

Lets see all the difference 1 by 1 for GET and POST method as below.

HTTP GET HTTP POST
In Browser history all the params are stored in the URL. In Browser history none of the params are stored
Get method can be cached Post method can not be cached
Get method restrict form data type, it allows only ASCII chars Post method not restrict form data type, it allowed even binary data
Get method is easier to hack using script Post method is more difficult to hack
GET request is executed again on click of back button Post request alerts user for resubmitting data to the server
In get request all the data being passed are visible to user, It is visible in the address bar. In Post method none of the data is visible to the user because it is being passed in message body
Get method is not advisable to use when we are sending sensitive information to the server like password Post method is advisable to send sensitive information to the server. However it’s better we encrypt the sensitive data using complex algorithm
Get request can be bookmarked in the browser Post method can not be bookmarked to the browser.
Get is less secure as compare to Post method Post is little more secure to get method
Get method save data to the server as a plain text and in browser history Post method not save data to the server and browser history
Get method pass data in a URL and URL length is restricted up to 2048 char, we can not send more data and allowed length, It varies by browser and web server. In Post method there is no restriction on passing very long data.
Get method can support very limited data to the request, it is better if we pass less then 2K of parameters. Post method can send more parameters like we can also send uploading files to the server.

That’s it.

I hope you enjoy this article.

Get outer html of html element using Jquery

<div class='block'>
<p class='paragraph'> 
This is the text inside the second element
</p>
</div>

for an example if we consider above code block and write a code like below

var htmlString = $("#paragraph").html();

then htmString can have a value “This is the text inside the second element” only

now what if you want a result like “<p class=’paragraph’> This is the text inside the second element </p>”

Sometimes you will need the selected object as well, so below is a small jquery code block which will give you the complete html (outer html) of a Jquery selector.

There are 2 different ways for that, we will see both
There are two major methods used to get an objects outerHTML, we’ll be discussing both.

Getting wrapper html using the outerHTML method

var outer_element_html = $('jQuerySelector')[0].outerHTML ;
console.log(outer_element_html);

Just want to discuss 1 thing it will worked on latest browser only, if you are using 5 year old browser then may be it creates an issue

Get outer html of html element using Jquery clone method
using .clone method it will create an object copy into the memory. It will wrap into p tag around. After that we can use .html() function to get the inner html of the p tag. But if you are working with a big amount of data then cloning every element to the memory is not best way. See the below code for an example

outer_html = $('jQuerySelector').clone().wrap('<p>').parent().html();

in above code “jQuerySelector” is the selector we are using, you need to change it. If there are multiple items for selectors then you can go with .each loop and get the outerHtml of individual items.

Javascript setTimeout() Function with Examples

setTimeout() Function

setTimeout() is a native JavaScript function. Which is allow us to call a specific JavaScript function or piece of code at specified interval or delay (on milliseconds). It might be useful when you want to display a message or a popup after user has browse the webpage for a certain amount of time.

Simple example for setTimeout

$('#btnOk').on('click', function(){
setTimeout(openPopup, 2000);
});

function openPopup()
{
alert('You press ok button');
}

in above example, it will display an alert message after 2 seconds once you press ok button.

Let’s have a look at the syntax for setTimeout function

var timerId = window.setTimeout(FunctionName, [timeInterval, parameter1, parameter2, ...]);
var timerId = window.setTimeout(jscode, [timeInterval]);

timerId is a numerical id return by setTimeout function, so later we can use it to call clearTimeout function to cancel the timer.

FunctionName – is the name of the JavaScript function to be executed after given interval.
jscode – in place of js function you can give direct the JS code to be executed
timeInterval – is the number of milliseconds by which the function should be delayed to call. If you are not passing the time interval then default it will be zero.

Difference between setTimeout vs window.setTimeout

If you see the above code carefully then you will have noticed that I have used window.setTimeout and title of this article is setTimeout, why is that?
let me give you the difference between both of them.

Well above both functions setTimeout and window.setTimeout are essentially same, There is a major difference like in window.setTimeout function we are referencing as a property of global window object. So sometimes if we have defined an another setTimout method in the same scope then it will be a issue. However what ever syntax you choose it’s up to the developer.

You can use setTimeout function in a following manner

using the function name

function LetsCall(){
alert('I am called.');
}
setTimeout(LetsCall, 2000);

using a variable which refers to the function

var LetsCall = function(){
alert('I am called.');
};
setTimeout(LetsCall, 2000);

using an anonymous function

setTimeout(function(){
alert('I am called.');
}, 2000);

using a direct JScode as a string

setTimeout('alert(\'I am called.\');', 2000);

Now lets move to the cancelling a Timer
The return value of setTimeout is a numerical id which can be used to cancel the timer using clearTimeout() function.

var timerId = setTimeout(jscode, 2000);

clearTimeout(timerId);