×

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

作者:Terry2020.06.29来源:Web前端之家浏览:11636评论:0

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

总结

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

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/12313123Request20200629.html

网友评论文明上网理性发言 已有0人参与

发表评论: