XMLHttpRequest.send()

待我称王封你为后i 2022-03-08 08:36 219阅读 0赞

`XMLHttpRequest.send()`方法用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只有一个 URL，没有数据体，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

下面是 GET 请求的例子。

var xhr = new XMLHttpRequest();
    xhr.open('GET',
      'http://www.example.com/?id=' + encodeURIComponent(id),
      true
    );
    xhr.send(null);

上面代码中，GET请求的参数，作为查询字符串附加在 URL 后面。

下面是发送 POST 请求的例子。

var xhr = new XMLHttpRequest();
    var data = 'email='
      + encodeURIComponent(email)
      + '&password='
      + encodeURIComponent(password);
    
    xhr.open('POST', 'http://www.example.com', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(data);

注意，**所有 XMLHttpRequest 的监听事件，都必须在send()方法调用之前设定**。

send方法的参数就是发送的数据。多种格式的数据，都可以作为它的参数。

void send();
    void send(ArrayBufferView data);
    void send(Blob data);
    void send(Document data);
    void send(String data);
    void send(FormData data);

如果send()发送 DOM 对象，在发送之前，数据会先被串行化。如果发送二进制数据，最好是发送ArrayBufferView或Blob对象，这使得通过 Ajax 上传文件成为可能。

下面是发送表单数据的例子。FormData对象可以用于构造表单数据。

var formData = new FormData();
    
    formData.append('username', '张三');
    formData.append('email', 'zhangsan@example.com');
    formData.append('birthDate', 1940);
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/register');
    xhr.send(formData);

上面代码中，**FormData**对象构造了表单数据，然后使用send()方法发送。它的效果与发送下面的表单数据是一样的。

下面的例子是使用FormData对象加工表单数据，然后再发送。

function sendForm(form) { 
      var formData = new FormData(form);
      formData.append('csrf', 'e69a18d7db1286040586e6da1950128c');
    
      var xhr = new XMLHttpRequest();
      xhr.open('POST', form.action, true);
      xhr.onload = function() { 
        // ...
      };
      xhr.send(formData);
    
      return false;
    }
    
    var form = document.querySelector('#registration');
    sendForm(form);

XMLHttpRequest.send()

发表评论取消回复

还没有评论，来说两句吧...

相关阅读