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

Question

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

Answer 1

好吧，你不想使用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

Answer 2

可以使用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); 

而且不要忘记以编码PARAM使用encodeURIComponent参数在用户输入的情况下的值编码

例如

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

Answer 3

使用XmlHttpRequest

示例代码：

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

function handler() 
{ 
    // your handler 
} 

Answer 4

阿贾克斯教程（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"); 
     } 
    } 
} 

Answer 5

这样做的标准类是XmlHttpRequest，但它没有得到普遍支持。在某些浏览器中，您必须改用ActiveXObject("Microsoft.XMLHTTP")。

查看jQuery系统，该系统提供HTTP下载（AJAX样式）方法，无论基础浏览器API如何（因此避免了Tzury答案中显示的很多代码）。

jQuery的AJAX文档可以http://docs.jquery.com/Ajax

Answer 6

你应该尝试添加在一个隐藏字段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>