如何爲GET和POST編寫通用的XMLhttpRequest函數？

我寫了XMLhttpRequest函數來製作ajax POST。當我添加新作業時，調用這個函數，並且添加作業也顯示在HTML中。代碼如下。如何爲GET和POST編寫通用的XMLhttpRequest函數？

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..."; 
     }

在事先我使用$ .getJSON對GET operation.Now我想編寫一個函數，GET和POST請求可以被done.The功能會是這樣=> makeRequest的（類型，參數，可以URL），類型是POST和GET。數據是否成功返回將會有onsuccess函數。當我編寫通用函數時，我會使用hr.send（）嗎？謝謝。

來源

2013-03-12 ntf

如果您使用$ .get JSON這意味着你使用jQuery，爲什麼然後你不使用$ .ajax，$ .get和$ .post？ – jcubic 2013-03-12 19:29:03

@jcubic我必須編寫一個可以完成兩個操作的通用函數。 – ntf 2013-03-12 19:32:09

你應該看看[jQuery api]（http://api.jquery.com），尤其是[$ .ajax]（http://api.jquery.com/jquery.ajax/），它是所有你需要的 – Andreas 2013-03-12 19:35:42

-1

這確實是可能的，當你谷歌它是有很多的信息。搜索有關XMLHttpRequest對象的信息以及它如何支持GET/POST請求以及如何傳遞參數。

是的：你可以使用普通的XMLHttpRequest對象（hr變量）並有條件地/切換不同類型的請求。一定要正確處理錯誤和事件，你現在已經錯過了很多。

你可以在這裏找到一些信息入手：下面 http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

編輯，這個工作我的本地服務器上，但有要與JS許多工作要做。您應該測試，例如同時請求的完整性......

編輯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文件返回：

get.php

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

post.php中

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

來源

2013-03-13 14:31:56 apelsinapa

我讀了很多，但找不到任何有用的東西。我爲GET和POST嘗試了XMLhttpRequest，但是單獨使用。我想合併它們。我的整個代碼https://docs.google.com/document/d/1n4SSmdyGnuOPYJRSI5m25zHZc81yyYJQynmmskAkDs4/edit?usp=sharing。 – ntf 2013-03-13 15:02:26

如果你有一個POST的工作，它不應該太難。它如何失敗？當您進行調試時，代碼中發生了什麼？當我這樣做時，我只是初始化XMLHttpRequest，然後xhr.open（type，url，true）; （獨立於GET/POST），準備變量。您發送的代碼，看起來像您在發送後打開請求。試試這個命令：啓動XMLHttpRequest，綁定事件，打開請求，發送請求... – apelsinapa 2013-03-13 16:01:08

我試着按照你說的順序。在這種情況下，Get成功，但Post不是。我寫更新後的代碼，先生，請看看它。 https://docs.google.com/document/d/1n4SSmdyGnuOPYJRSI5m25zHZc81yyYJQynmmskAkDs4/edit?usp=sharing – ntf 2013-03-13 17:08:52

如何爲GET和POST編寫通用的XMLhttpRequest函數？

回答

相關問題