原生JS发送HTTP请求的方式：XMLHttpRequest.send()

在前端开发过程中，就目前来看，发送HTTP请求，大家习惯在框架里去应用，比如vue,react等。我们在往前追朔下，用的最多的是jQuery里的ajax。但是最原始的发送HTTP请求方式是什么呢？一起了解下~~

其实就是XMLHttpRequest.send()。

说明

XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。

如果没有使用 setRequestHeader() 方法设置 Accept 头部信息，则会发送带有 "* / *" 的Accept 头部。

Note: 请注意不要使用一个简单的AarryBuffer对象作为参数，ArrayBuffer已经不再是ajax规范的一部分，请改用ArrayBufferView（有关信息请参考兼容性列表。）

语法

XMLHttpRequest.send();
XMLHttpRequest.send(ArrayBufferdata);
XMLHttpRequest.send(ArrayBufferViewdata);
XMLHttpRequest.send(Blobdata);
XMLHttpRequest.send(Documentdata);
XMLHttpRequest.send(DOMString?data);
XMLHttpRequest.send(FormDatadata);

如果发送的数据是Document对象，需要在发送之前将其序列化。当发送一个Document对象时，Firefox 3之前的版本都是使用utf-8编码发送请求的；FireFox 3则使用由body.xmlEncoding指定的编码格式正确的发送文档，但如果未指定编码格式，则使用utf-8编码格式发送。

如果是一个nsIInputStream接口,它必须与nsIUploadChannel的setUploadStream（）方法兼容。在这种情况下，将 Content-Length的头部添加到请求中，它的值则使用nsIInputStream接口的available（）方法获取。任何报头包括在数据流顶部的都会被当做报文主体。所以，应该在发送请求即调用send（）方法之前使用setRequestHeader() 方法设置 Content-Type头部来指定数据流的MIME类型。

发送二进制内容的最佳方法（如上传文件）是使用一个与send（）方法结合的 ArrayBufferView 或者Blobs。

案例: GET

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.onload = function () {
   // 请求结束后,在此处写处理代码
};

xhr.send(null);
// xhr.send('string');// xhr.send(new Blob());
// xhr.send(new Int8Array());
// xhr.send({ form: 'data' });
// xhr.send(document);

案例: POST

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//发送合适的请求头信息
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onload = function () { 
    // 请求结束后,在此处写处理代码 
};
xhr.send("foo=bar&lorem=ipsum"); 
// xhr.send('string'); 
// xhr.send(new Blob()); 
// xhr.send(new Int8Array()); 
// xhr.send({ form: 'data' }); 
// xhr.send(document);

总结

在掌握各种框架的同时，不要忘记了最原始的技术，这些是你拓展知识面的基础。