概述

一看到这标题估计有同学都要吐了，二十多年前的技术了你还跟我说，都 8102 年了，现在都 React、Vue 满天飞的时代了，你还跟我聊最原始的 Ajax？额，道理我都懂，虽然很久没去试水前端了，但是对于这些基本的行业大趋势还是有点小了解的，不可否认，现在前端是基本上没啥人玩原始 JS 了，除了 React 和 Vue 之外，现在也有很多人玩 CoffeeScript（2014-2015） 和 TypeScript（2017-2018），而对于我真正有写过实践过的也就 CoffeeScript 了，也要追述到 2、3 年前了。

扯远了，我为什么要再写一写 XMLHTTPRequest 呢，是因为最近我在玩一款新的软件，其中有一些操作我是通过调用 Http 来实现，但是，很明显，对于这款软件来说，嵌入 js 你肯定不能说我架个 js 框架上去，这要崩啊，即使架上去了能 run 起来我还得折腾这个框架呢，累不累啊，所以这个时候还是最原始的 XMLHTTPRequest 最高效和方便。我搜了一下，我之前也写过一篇：JQuery Ajax 总结，但是这篇还不够，内容太少，虽然这篇也不准备写深（关键我写得出来么？）但是至少我是希望下次能马上找到一篇能 work 的。

一个简单的 Ajax

对于一个熟悉各种语言的简单 Hello World 写法的程序员，肯定上来是先写个简单的 Hello World 啊，这里就先上一个简单的 GET 请求的 Ajax，（兼容 IE 浏览器是不可能兼容的，这辈子不可能兼容 IE 浏览器的）：

我这里简单得尝试了一下 GET 操作，下面我要尝试其他的操作，其实其他操作都基本一致，只不过是 Method 变了，所以我就尝试一下 POST 就好了。

用 Post 传递数据

这里在 Line 20 通过 Post 向服务端传递了一个 Json 参数，这里有一个很重要的地方是一定要用 JSON.stringify() 序列化一番，反正这是我写这篇记录的很大一个原因，太久没写 js 代码了，也就忘记这个规则了。

关于那些函数

其实从上面的两个例子中可以知道，这里有两个函数是经常被用到的，当然，我忽略了 new XMLHttpRequest() 我说的是:

• xmlhttp.open
• xmlhttp.send

这里我要对这些函数做个记录。

xmlhttp.open

函数原型:

XMLHttpRequest.open(method, url)
XMLHttpRequest.open(method, url, async)
XMLHttpRequest.open(method, url, async, user)
XMLHttpRequest.open(method, url, async, user, password)

• method
  • The HTTP request method to use, such as “GET”, “POST”, “PUT”, “DELETE”, etc. Ignored for non-HTTP(S) URLs.
• url
  • A DOMString representing the URL to send the request to.
• async Optional
  • An optional Boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send() method does not return until the response is received. If true, notification of a completed transaction is provided using event listeners. This must be true if the multipart attribute is true, or an exception will be thrown.
  • Note: Synchronous requests on the main thread can be easily disruptive to the user experience and should be avoided; in fact, many browsers have deprecated synchronous XHR support on the main thread entirely. Synchronous requests are permitted in Workers.
• user Optional
  • The optional user name to use for authentication purposes; by default, this is the null value.
• password Optional
  • The optional password to use for authentication purposes; by default, this is the null value.

xmlhttp.send

函数原型:

XMLHttpRequest.send(body)

• body Optional
• A body of data to be sent in the XHR request. This can be:
  • A Document, in which case it is serialized before being sent.
  • A BodyInit, which as per the Fetch spec can be a Blob, BufferSource, FormData, URLSearchParams, ReadableStream, or USVString object.

JSON.parse

前面说了，在请求 POST 的时候我用了一个 JSON.stringify() 将 Json 转换成字符串传给服务端；如果这里我们从服务器接收到一个字符串之后，要如何反序列化成 Json 对象，这就需要使用到这个 JSON.parse 函数了：

这里就简单得举一个小例子好了:

Reference

1. xmlhttp.open
2. xmlhttp.send
3. JSON.parse()