0

I'm trying to build a mini plug-in.Therefore, I want to minimize the code and make it stable as much as it could be. The problem is clear to observe on the code, see below ( detailed explanation is below the snippet segment):

    $(document).ajaxSend(function (event, xhr, settings) {   
                alert("Settings Data is  : " + settings.data + 
                      " And " + "Settings url is  :  " + settings.url );
             
          
        });

        $("#topLeftButton").click(function () {
                        var arr = {
                            "loadingBar": '#topLeftLoad'
                        }
                        $.ajax({
                            type: "GET",
                            url: "testB.xml",
                            data: JSON.stringify(arr),
                            dataType: "xml",
                            success: function (xml) {
                                
                
                            },

                        });
                    });

         $("#topRightButton").click(function () {
                        var arr = {
                            "loadingBar": '#topRightLoad'
                        }
                        $.ajax({
                            type: 'POST',  
                            url: 'testB.xml',
                            data: JSON.stringify(arr),
                            dataType: "xml",
                            success: function (xml) {
                             
                            },

                        });
                    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <input type="button" id="topLeftButton" value="Top Left">
        <div id="topLeftLoad" style="display:none; width:100%; height:60px">
        </div>

        <input type="button" id="topRightButton" value="Top Right">
        <div id="topRightLoad"  style="display:none; width:100%; height:60px">
        </div>

When I check the documents at Get Method and Post Method, I could not observe any difference between settings,data and url of the post & get. However,in the Post method of above code snippet it works great. Url and data is on the exact place where it should be. Whereas, in the Get method data is appended to url and settings.data is shown as undefined.

Thank you for your cares,

Mehmet Doğan
  • 186
  • 2
  • 8

2 Answers2

0

It seems to be alright. On a GET request, the data is passed in the URL, after the question mark, and the body is empty, whereas in a POST request the body contains the data.

In the jQuery.get, jQuery let you pass the data inside the data attribut but moves it on the URL for the xhr request.

hyde
  • 36
  • 4
  • Actually it was the reason that I said " I want to minimize the code and make it stable as much as it could be." According to your answer, I must first check if it's GET or POST then for each i need 2 parsing operation, right ? thank you – Mehmet Doğan Jun 29 '16 at 12:22
0

Yes as you did, if you are compare these two methods by looking at the parameters, method definitions there are not much difference, but the way it's been implemented by jquery( and other low level implementations) is a considerably different.

The GET simply appends the data to the url. But the post send the data witihn the request body.

Hence POST is more secure than GET. Is either GET or POST more secure than the other?

Also GET request has the pay load limitation. By default you cannot send data more than 8192 bytes (8KB).

maximum length of HTTP GET request?

Hence it's good practice to use POST instead of GET

Community
  • 1
  • 1
Tharsan Sivakumar
  • 6,351
  • 3
  • 19
  • 28