基本的“原始”Ajax调用

时间:2012-02-04 17:54:12

标签: javascript jquery ajax http

我有一个服务器端功能:

string foo(string input_string);

例如:

foo("bar") returns "baz"

并将此函数包装到HTTP服务器中,以便:

POST /foo HTTP/1.1
...

bar

将返回:

HTTP/1.1 200 OK
...

baz

即使用输入字符串作为HTTP消息正文的POST请求将输出字符串作为200 OK的HTTP消息正文返回。

现在我在网页上的javascript中有两个功能:

function sendFoo(input_string)
{
   ??? // should asynchronously start process to POST input_string to server
}

function recvFoo(output_string)
{
   ...
}

当我调用sendFoo时,我希望POST与服务器异步进行,稍后当收到响应时,我希望调用recvFoo(可能在另一个线程或其他任何线程中),消息正文为200 OK。

如何在上面实现sendFoo?我目前正在使用jQuery,但纯JavaScript中的解决方案也可以。 (如果需要,我也可以修改服务器?)

解决方案

function sendFoo(input_string)
{
   $.ajax({ url: "/foo", type: "POST", data: input_string, success: recvFoo });
}

3 个答案:

答案 0 :(得分:5)

XMLHttpRequest对象的open()方法允许您指定HTTP方法,而send()方法允许指定邮件正文,例如

var xhr = ... // obtain XMLHttpRequest object
xhr.open('POST', '/foo'); // HTTP method and requested URL.
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
      recvFoo(xhr.responseText); // Will pass 'baz' to recvFoo().
  }
};
xhr.send('bar'); // Message body with your function's argument.

答案 1 :(得分:5)

无需回退到经典JavaScript

$.ajax({
        url:"URL of foo...",
        type: "POST",
        data: "what ever",
        success: recvFoo
       });

post选项:

  $.post('The url of foo', {input_string : 'bar'}, recvFoo);

答案 2 :(得分:3)

jQuery post将完成这项工作:

$.post('foo.html', {'varname' : 'bar'}, function(data) {
  recvFoo(data);
});

非常好的问题,谢谢。