原生 JS 实现 HTTP 请求

原生 JS 实现 HTTP 请求用到了 XMLHttpRequest 对象,这篇笔记先对该对象的属性、
方法、事件做一些简单介绍,然后通过代码举例说明

XMLHttpRequest 对象

属性 说明
readyState 请求的5种状态,3代表正在下载响应实体,4代表请求完毕
response 请求时的响应实体,类型由responseType指定
responseText 请求时的响应文本
responseType 设置响应实体的类型,可以是arraybuffer,blob,document,json,text
responseXML 请求响应一个xml类型的数据
status 请求响应的状态码
statusText 请求响应的状态信息
withCredentials 指明在进行跨域请求时,是否使用认证信息
timeout 设置请求超时时长
方法 说明
XMLHttpRequest() 构造函数
open(method,url,async,user,password) 初始化一个HTTP请求
send(data) 发送HTTP请求
abort() 如果请求已经被发送,则立刻中止请求
getResponseHeader(header) 返回指定的响应头的值
getAllResponseHeaders() 返回所有响应头信息(响应头名和值)
overrideMimeType(mime) 重写由服务器返回的MIME,必须在send前调用
setRequestHeader(header,value) 给指定的HTTP请求头赋值或自定义请求头,在send方法后调用
事件 说明
loadstart 在接收到响应数据的第一个字节时触发
progress 在接收响应期间持续不断的触发
error 在请求发生错误时触发
abort 在因为调用abort方法而终止连接时触发
load 在接收到完整的响应数据时触发
loadend 在通信完成或者触发error、abort或load事件后触发
timeout 当进度由于预定时间到期而终止时触发
readyStateChange 当readyState属性发生更改时触发

前端代码演示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Native Http Request</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <script>
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'json';
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.response);
            }
        }
    };
    xhr.open("post", "test.php", true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.send(JSON.stringify({name: 'john', age: 18}));
  </script>
</body>
</html>

后端代码演示

<?php
$data = json_decode(file_get_contents("php://input"), true);
$name = $data['name'];
$age = $data['age'];
echo $name.'-'.$age;

说明

  • 代码中没有列举所有的属性、方法和事件,有兴趣的可以试试其他属性、方法和事件
  • XMLHttpRequest 对象是 W3C 采用的标准,IE 老版本为 ActiveXObject 对象,有兴趣的可以了解了解
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1005.html
鄂ICP备17018604号-1  鄂公网安备42060702000030号