MLHttpRequest简介

XMLHttpRequest是由微软提出的一个API接口，目的是为客户端提供与服务器之间传输数据的功能。XMLHttpRequest的特点是可以按需请求、局部刷新，不仅提高了服务器响应速度还可以避免不必要的宽带浪费。XMLHttpRequest提供了一个通过URL来获取数据的简单方式，通过它可以很容易的获取到URL上所有类型的资源数据。

XMLHttpRequest是什么

XMLHttpRequest 是一个JavaScript对象，得到了所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera等）较好的支持并内建了XMLHttpRequest 对象，它定义了很多方法和属性方便用户配置发送各种请求。比如说可以设置请求的超时时间、获取请求进度信息、设置请求数据类型等，发送GET、POST、DELETE、HEAD、PUT等各种HTTP请求。

XMLHttpRequest对象方法

XMLHttpRequest对象创建可以通过new XMLHttpRequest()来实现，一个请求的实现至少需要使用open和send方法的使用。XMLHttpRequest支持以下几种方法，需要注意的是setRequestHeader()方法指定了HTTP请求的头部信息，需要在请求初始化之后发送之前定义。

XMLHttpRequest对象属性

onreadystatechange是一个事件句柄函数，当readyState属性发生变化时被调用以改变XMLHttpRequest 的状态。我们可以通过获取该对象的属性来分析请求的状态并做出相应的操作决策，也可以帮助开发者快速定位错误因素。

XMLHttpRequest监听事件

XMLHttpRequest对象提供了一系列监听事件来获取请求的当前状态，每个请求都以loadstart事件开始，以 loadend 事件结束。在这两个事件中间可以注册响应的监听事件来获取传输的状态，比如通过onprogress获取上传文件的进度，那么我们就可以注册一个onprogress 事件来监听当前进度。

xhr.upload.onprogress=e=>{
  if (e.lengthComputable) {
　　　　var progress=e.loaded / e.total;
　　}
}

发送GET请求接收二进制数据

这里我写了一个简单的页面载入时发送一个请求的示例，通过GET方法来获取后台的文件。在发送请求时可以设置一些请求头部信息，比如content-type、connection、cookie等信息。xhr提供了setRequestHeader来允许我们修改请求头部信息，第一个参数为请求头参数，第二个参数为对应的参数值。我们还可以指定接受返回的数据类型，xhr可以通过responseType属性指定数据类型为blob。老版本的 Internet Explorer不支持 XMLHttpRequest 对象，所以我们先检查浏览器是否支持 XMLHttpRequest 对象，如果不支持的话可以创建 ActiveXObject 对象。

发送POST请求上传文件

XMLHttpRequest新增formData对象，不仅可以发送文本数据还可以上传文件。这里我尝试实现文件上传功能，将二进制文件追加到formData对象，在发送的时候我们将formData对象提交即可。

JavaScript中，你可以使用`fetch` API或者`XMLHttpRequest`对象来发送HTTP请求。以下是两种方法的示例：

**使用fetch API发送HTTP请求**

fetch API是现代浏览器中推荐使用的方法，因为它提供了更简洁的API，并且支持跨域请求。

```javascript

fetch('https://api.example.com/data', {

method: 'GET', // 或者 'POST'

headers: {

'Content-Type': 'application/json',

},

})

.then(response=> response.json()) // 解析响应数据为JSON

.then(data=> console.log(data)) // 在控制台打印数据

.catch((error)=> console.error('Error:', error)); // 捕获错误并打印

```

**使用XMLHttpRequest发送HTTP请求**

如果你需要更多的控制权，或者在旧的浏览器中使用，你可以使用`XMLHttpRequest`对象。但是请注意，由于浏览器的同源策略，`XMLHttpRequest`通常仅用于同一域的请求。

```javascript

var xhr=new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange=function () {

if (xhr.readyState==4 && xhr.status==200)

console.log(JSON.parse(xhr.responseText));

}

xhr.send();

```

以上两种方法都可以发送HTTP请求，但请注意，由于安全性和隐私性的考虑，通常建议尽可能使用fetch API进行跨域请求。此外，请确保服务器已经正确配置了HTTP头信息以允许跨域请求。

MLHTTPrequest 对象

Ajax 的核心是 JavaScript 对象 XmlHTTPRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHTTPRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。通过 XMLHTTPRequest 对象，Web 开发人员可以在页面加载以后进行页面的局部更新。

方法

open(String method,String url,boolean asynch,String username,String password)

send(content)

setRequestHeader(String header,String value)

getAllResponseHeaders()

getResponseHeader(String header)

abort()

常用详细解析

open()：该方法创建 HTTP 请求

第一个参数是指定提交方式(post、get)

第二个参数是指定要提交的地址是哪

第三个参数是指定是异步还是同步(true 表示异步，false 表示同步)

第四和第五参数在 HTTP 认证的时候会用到，是可选的。

setRequestHeader(String header,String value)：设置消息头（使用 post 方式才会使用到，

get 方法并不需要调用该方法）。

xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded");

send(content)：发送请求给服务器

如果是 get 方式，并不需要填写参数，或填写 null，如果是 post 方式，把要提交的参数写上去。

常用属性

onreadystatechange：请求状态改变的事件触发器（readyState 变化时会调用此方法），一般用于指定回调函数。

readyState：请求状态 readyState 一改变，回调函数被调用，它有 5 个状态：

0：未初始化

1：open 方法成功调用以后

2：服务器已经应答客户端的请求

3：交互中。HTTP 头信息已经接收，响应数据尚未接收。

4：完成。数据接收完成

responseText：服务器返回的文本内容

responseXML：服务器返回的兼容 DOM 的 XML 内容

status：服务器返回的状态码

statusText：服务器返回状态码的文本信息

回调函数是什么

回调函数就是接收服务器返回的内容！