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

在前端开发过程中，就目前来看，发送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);

总结

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

标签：方式WebsendXMLHttpRequestHTTPJS