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

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • notfound
    New Member
    • Jun 2012
    • 28
    #1

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

    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.
    Code:
    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(typ e,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.
    Tags: None
    • johny10151981
      Top Contributor
      • Jan 2010
      • 1059
      #2
      use jquery, it will make your life simple.

      Code:
      function makeRequest(type, path, params, callback)
{
$.ajax({url: path, type: type, dataType: 'html', data: parameter, timeout: 90000, success: callback(returned_text)});
}

        Comment

        • notfound
          New Member
          • Jun 2012
          • 28
          #3
          This is another way.But my instructor does not want like this.
          I tried the below code, but it didn't work.Can you fix it?
          Code:
          <html>
	<head>
		<title>To-Do</title>
		<meta name="description" content="To-Do" charset="utf-8"></meta>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
		<script type="text/javascript" src="jquery.js"></script>
		<script language="javascript" type="text/javascript"> 
function mr(type,params,URL){

			var hr = new XMLHttpRequest();
			alert("mr");
				if(type=='POST')
				{
				alert("Post");
				var content = document.getElementById("content").value;
				var vars = "content=" + params;
				hr.send(vars);
				}
				if(type=='GET')
				{
				alert("Get");
				hr.send();

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

				hr.open(type, 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;
					}
					else{

						alert("Not successful request!");
					}
				}
				
				

	}


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

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

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              For GET, you need to add the params to the URL.

                Comment

                Previous template Next
                Working...