By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,960 Members | 1,351 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,960 IT Pros & Developers. It's quick & easy.

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

P: 28
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.
Expand|Select|Wrap|Line Numbers
  1. function req_add()
  2.         {
  3.             var hr = new XMLHttpRequest();
  4.             var url = "To-Do.php";
  5.             var content = document.getElementById("content").value;
  6.             var vars = "content=" + content;
  7.  
  8.             hr.open("POST", url, true);
  9.             hr.setRequestHeader("Content-type","application/x-www-form-
  10. urlencoded");
  11.             hr.onreadystatechange=function()
  12.             {
  13.                 if(hr.readyState == 4 && hr.status == 200)
  14.                 {
  15.                     var return_data = hr.responseText;
  16.                     document.getElementById("result").innerHTML               
  17. = return_data;
  18.                 }
  19.             }
  20.             hr.send(vars);
  21.             document.getElementById("result").innerHTML =   
  22.  
  23. "Processing...";
  24.         }
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.
Mar 12 '13 #1
Share this Question
Share on Google+
3 Replies


100+
P: 1,059
use jquery, it will make your life simple.

Expand|Select|Wrap|Line Numbers
  1. function makeRequest(type, path, params, callback)
  2. {
  3. $.ajax({url: path, type: type, dataType: 'html', data: parameter, timeout: 90000, success: callback(returned_text)});
  4. }
  5.  
Mar 13 '13 #2

P: 28
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?
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>To-Do</title>
  4.         <meta name="description" content="To-Do" charset="utf-8"></meta>
  5.         <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
  6.         <script type="text/javascript" src="jquery.js"></script>
  7.         <script language="javascript" type="text/javascript"> 
  8. function mr(type,params,URL){
  9.  
  10.             var hr = new XMLHttpRequest();
  11.             alert("mr");
  12.                 if(type=='POST')
  13.                 {
  14.                 alert("Post");
  15.                 var content = document.getElementById("content").value;
  16.                 var vars = "content=" + params;
  17.                 hr.send(vars);
  18.                 }
  19.                 if(type=='GET')
  20.                 {
  21.                 alert("Get");
  22.                 hr.send();
  23.  
  24.                 }
  25.                 document.getElementById("result").innerHTML = "Processing...";
  26.  
  27.                 hr.open(type, URL, true);
  28.                 hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  29.  
  30.                 hr.onreadystatechange=function()
  31.                 {
  32.                     if(hr.readyState == 4 && hr.status == 200)
  33.                     {
  34.                         var return_data = hr.responseText;
  35.                         document.getElementById("result").innerHTML = return_data;
  36.                     }
  37.                     else{
  38.  
  39.                         alert("Not successful request!");
  40.                     }
  41.                 }
  42.  
  43.  
  44.  
  45.     }
  46.  
  47.  
  48.         </script>
  49.         <style type="text/css">
  50.         button { cursor: pointer }
  51.     div {
  52.         color:#666;
  53.         font: normal 13px "Trebuchet MS";
  54.         width: 350px;
  55.         padding: 10px
  56.     }
  57. </style>
  58.     </head>
  59.  
  60.     <body>
  61.           Add Item: <input type="text" name="name" id="content"><br>
  62.           <button onclick="javascript:mr('POST','To-Do.php');" type="button" id="btn1">Submit</button><br>
  63.           <button onclick="javascript:mr('GET','Jobs.json');" type="button" id="btn2" >List Jobs</button>
  64.         <div id="result"> </div>
  65.     </body>
  66. </html>
Mar 13 '13 #3

acoder
Expert Mod 15k+
P: 16,027
For GET, you need to add the params to the URL.
Mar 13 '13 #4

Post your reply

Sign in to post your reply or Sign up for a free account.