一看到这标题估计有同学都要吐了,二十多年前的技术了你还跟我说,都 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

函数原型:

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

xmlhttp.send

函数原型:

XMLHttpRequest.send(body)

JSON.parse

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

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

Reference

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