在事件处理程序中发送没有 XHR 的 http 请求

Posted 2023-03-14

【中文标题】在事件处理程序中发送没有 XHR 的 http 请求

【英文标题】：send an http request without XHR in an event handler

【发布时间】：2010-12-09 20:52:43

【问题描述】：

如何使用 javascript 作为事件处理程序使用 post/get 方法发送 http 请求？谢谢！保罗

【问题讨论】：

这称为 Ajax，Google 会比我们更快地帮助您；)

对不起，我没有把问题说清楚：我试图做的不是使用 XmlHttpRequest。还有其他方法吗？

您可以提交表单来发送get或post。我添加了一个关于如何做到这一点的答案。

那将是 form.submit() 。耶稣！下次大声说出来！

对不起各位！我工作很晚，不是很清楚。让我重新表述我的问题：我有一个字符串，想使用 javascript 将字符串发送到服务器，但我不想使用异步请求。有什么办法我可以做到。我认为你们给了我很大的帮助！再次感谢！

【参考方案1】：

您应该尝试在隐藏字段中添加 atring，然后调用 form.submit() 将您的表单提交到实际定义的页面中。

<script type="text/javascript">
  function doTestFormSubmit(yourString) 
    document.getElementById("myString").value=myString;
    document.getElementById("testForm").submit();
  
</script>
<form name="testForm" id="testForm" action="yourDesiredPage.php" method="post">
   <input type="hidden" name="myString" id="myString" value=""/>
</form>

【参考方案2】：

好的，您不想使用 Ajax。 您可以使用事件处理程序来提交表单！

<a href='#' onclick='cow_submit("zoodle")'>send</a>
<form method='post' id='formie' action='find_some_action.php'>
  <input type='hidden' id='snoutvar' name='snoutvar' value='snout'>
</form>

<script>
function cow_submit(a_var_to_set)
  var plip=document.getElementById('formie');
  var snout=document.getElementById('snoutvar');
  snout.value=a_var_to_set;
  plip.submit();
  

见https://developer.mozilla.org/en/DOM/form

【参考方案3】：

执行此操作的标准类是XmlHttpRequest，但并未得到普遍支持。在某些浏览器上，您必须改用ActiveXObject("Microsoft.XMLHTTP")。

查看jQuery 系统，该系统提供 HTTP 下载（AJAX 样式）方法，而不管底层浏览器 API（因此避免了 Tzury 答案中显示的大量代码）。

jQuery AJAX 文档位于http://docs.jquery.com/Ajax

【参考方案4】：

你可以使用XMLHttpRequest从javascript发送请求

发送 GET 请求

var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("GET", url+"?"+params, true);
http.onreadystatechange = function() //Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) 
        alert(http.responseText);
    

http.send(null);

发送 POST 请求

var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() //Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) 
        alert(http.responseText);
    

http.send(params);

并且不要忘记使用encodeURIComponent对参数进行编码，以便在用户输入的情况下进行参数值编码

例如

params="paramName="+encodeURIComponent(paramValue);

【参考方案5】：

Ajax 教程 (http://code.google.com/edu/ajax/tutorials/ajax-tutorial.html)

var obj;

function ProcessXML(url) 
  // native  object

  if (window.XMLHttpRequest) 
    // obtain new object
    obj = new XMLHttpRequest();
    // set the callback function
    obj.onreadystatechange = processChange;
    // we will do a GET with the url; "true" for asynch
    obj.open("GET", url, true);
    // null for GET with native object
    obj.send(null);
  // IE/Windows ActiveX object
   else if (window.ActiveXObject) 
    obj = new ActiveXObject("Microsoft.XMLHTTP");
    if (obj) 
      obj.onreadystatechange = processChange;
      obj.open("GET", url, true);
      // don't send null for ActiveX
      obj.send();
    
   else 
    alert("Your browser does not support AJAX");
  



function processChange() 
    // 4 means the response has been returned and ready to be processed
    if (obj.readyState == 4) 
        // 200 means "OK"
        if (obj.status == 200) 
            // process whatever has been sent back here:
        // anything else means a problem
         else 
            alert("There was a problem in the returned data:\n");
        
    

【参考方案6】：

使用XmlHttpRequest

示例代码：

var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "test.xml");
client.send();

function handler()

   // your handler

【讨论】：

这怎么不是 XHR？