How can I write a common XMLhttpRequest function for both GET and POST?

Question

I wrote XMLhttpRequest function for making a ajax POST.When I add new job this function is called and added job is also shown in HTML.The code is below.

function req_add()
        {
            var hr = new XMLHttpRequest();
            var url = "To-Do.php";
            var content = document.getElementById("content").value;
            var vars = "content=" + content;

            hr.open("POST", url, true);
            hr.setRequestHeader("Content-type","application/x-www-form-
urlencoded");
            hr.onreadystatechange=function()
            {
                if(hr.readyState == 4 && hr.status == 200)
                {
                    var return_data = hr.responseText;
                    document.getElementById("result").innerHTML               
= return_data;
                }
            }
            hr.send(vars);
            document.getElementById("result").innerHTML =   

"Processing...";
        }

In advance I was using $.getJSON for GET operation.Now I want to write a function that both GET and POST requests can be done.The function will be like this=> makeRequest(type,params,URL) ,type is for POST and GET. There will be onsuccess function whether the data is returned successfully or not.And when I write common function will I use hr.send ()? Thanks.

Answer 1

It is indeed possible and there's alot of info when you google it. Search for information about the XMLHttpRequest object and how it supports GET/POST requests and how to pass parameters.

And Yes: you can use a common XMLHttpRequest object (hr variable) and conditionally/switch for diffrent types of requests. Be sure to handle errors and events correctly, you are missing quite much right now.

You can find some info here to start with: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

EDIT below, this works on my local server, but there's much work to be done with the js. You should test the integrity of simultaneous requests for example...

Edited HTML:

<html>
    <head>
        <title>To-Do</title>
        <meta name="description" content="To-Do" charset="utf-8">
        </meta>
        <script language="javascript" type="text/javascript">
            function mr(type, URL) {

                var hr = new XMLHttpRequest();

                //SET UP VARS CORRECTLY FOR GET/POST
                var content = document.getElementById("content").value;
                var vars = "content=" + content;

                if (type == 'GET')
                    URL = URL + '?' + vars;

                //SET EVENTHANDLERS (THERE ARE ALOT MORE)
                hr.onreadystatechange = function() {
                    if (hr.readyState == 4 && hr.status == 200) {
                        var return_data = hr.responseText;
                        document.getElementById("result").innerHTML = return_data;
                    }

                }
                //OPEN THE REQUEST
                hr.open(type, URL, true);

                //SET HEADERS
                hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                switch(type) {
                    case 'GET':
                        hr.send();
                        break;
                    case 'POST':
                        hr.send(vars);
                        break;
                }

                document.getElementById("result").innerHTML = "Processing...";

            }
        </script>
        <style type="text/css">
            button {
                cursor: pointer
            }
            div {
                color: #666;
                font: normal 13px "Trebuchet MS";
                width: 350px;
                padding: 10px
            }
        </style>
    </head>

    <body>
        <div>
            Add Item:
            <input type="text" name="name" id="content">
            <br>
            <button onclick="javascript:mr('POST','post.php');" type="button" id="btn1">
                Submit
            </button>
            <br>
            <button onclick="javascript:mr('GET','get.php');" type="button" id="btn2" >
                List Jobs
            </button>
            <div id="result"></div>
        </div>
    </body>
</html>

PHP files that return:

get.php

<?php echo "GET\n"; if(isset($_GET)) print_r($_GET); ?>

post.php

<?php echo "POST\n"; if(isset($_POST)) print_r($_POST); ?>

How can I write a common XMLhttpRequest function for both GET and POST?

Question

1 answers

solution1
-1 ACCPTED 2013-03-13 14:31:56

How can I write a common XMLhttpRequest function for both GET and POST?

Question

1 answers

solution1 -1 ACCPTED 2013-03-13 14:31:56

solution1
-1 ACCPTED 2013-03-13 14:31:56