在本文中，我使用Node.js作为后端。没错，你可以堆叠JS(浏览器和服务器)。Node.js非常简洁。我鼓励大家在Github下载演示，关注这个项目。以下是服务器端的代码：

//app . jsvar app=http . createserver(function(req，RES){ if(req . URL . indexof('/scripts/')=0){ render(req . URL . slice(1)，' application/javascript '，httpHandler)；} else if(req . headers[' x-requested-with ']==' XMLHttpRequest '){//发送Ajax响应} else { render(' view/index . html '，' text/html '，httpHandler)；}}代码段通过检测请求URL来确定app返回的对应内容。如果请求来自脚本目录，服务器将返回内容类型为application/javascript的相应文件。如果请求头中的x-requested-with设置为XMLHttpRequest，则该请求是一个Ajax请求，然后返回相应的数据。除了以上两种情况，服务器还会返回view/index . html.

我将扩展前面代码段的注释部分来处理Ajax请求，以便进行深入解释。在Node.js方面，我已经处理了渲染和httpHandler的手动工作：

//app.jsfunction render(path，contentType，fn){ fs . readfile(_ dirname/' path，' utf-8 '，function (err，str) { fn(err，str，content type)；});}var httpHandler=function (err，str，Content Type){ if(err){ RES . write head(500，{ ' Content-Type ' : ' text/plain ' })；res.end('出现错误： ' err . message)；} else { res.writeHead(200，{ ' Content-Type ' : Content Type })；RES . end(str)；}};render函数异步读取请求文件的内容。该函数传递对httpHandler的引用，HttpHandler用作回调函数。httpHandler函数检测错误对象是否存在(例如，如果请求的文件无法打开，该对象将存在)。此外，最好指定类型，这样服务器返回的文件内容将具有适当的HTTP状态代码和内容类型。

测试应用编程接口让我们为后端应用编程接口编写一些单元测试，以确保它们正确运行。对于这种测试，我会向supertest和摩卡求助。

//test/app.request.jsit('用html响应'，function(done){ request(app))。get('/')。期望('内容类型'，/html/)。期望(200，完成)；});it’(用javascript响应)，function (done) {request(app)。get('/scripts/index.js ')。期望('内容类型'，/javascript/)。期望(200，完成)；});it’(用json响应)，function (done) {request(app)。get('/')。set('X-Requested-With '，' XMLHttpRequest ')。期望('内容类型'，/json/)。期望(200，完成)；});这些测试确保我们的应用程序可以为不同的请求返回正确的内容类型和HTTP状态代码。一旦安装了这些依赖项，就可以使用命令npm test来运行这些测试。

现在，让我们看看用户界面的HTML代码：

//视图/索引。html没有jquery的香草Ajax/h1 button id=' retrieve ' data-URL='/' retrieve/button p id=' results '/p上面的html代码看起来非常简洁。是的，正如你所看到的，所有令人兴奋的事情都发生在JavaScript中。

Onreadystate vs onload如果你读过任何关于Ajax的权威书籍，你可能会在书中的任何地方找到Onreadystate。这个回调函数需要通过嵌套的ifs或者多个case语句来完成，这样就很难记住了。让我们再次回顾onreadystate和onload事件。

(function(){ var retrieve=document . getelementbyid(' retrieve ')，results=document . getelementbyid(' results ')，toReadyStateDescription=function(state){ switch(state){ case 0: return ' UNSENT '；案例1:返回‘OPERED’；case 2:返回“HEADERS _ RECEIVED”；案例3:返回“LOADING”；案例4:返回‘DONE’；default:返回“”；} };retrieve . addeventlistener(' click ')，函数(e){ var oReq=new XMLHttpRequest()；oreq . onload=function(){ console . log(' onload事件内部')；};oreq . onreadystatechange=function(){ console . log('在onreadystatechange ev内部！[在此输入图片描述] [1]用readystate : ' to readystatedescription(oreq)输入。readystate))；};oReq.open('GET '，e.target.dataset.url，true)；oreq . send()；});}());上述代码在控制台中输出以下语句：

onreadystatechange事件可以在任何请求期间触发。例如在每个请求之前和之后。但是，根据文档，onload事件只有在请求成功后才会被触发。因为onload事件是一个常见的API，所以可以在短时间内掌握它。onreadystatechange事件可以用作备份(backgroundcompatible向后兼容？)方案。onload事件应该是你的首选。而onload事件类似于jQuery的成功回调函数，不是吗？

# # # #设置请求头jQuery已经为您私下设置了请求头，因此后端可以检测到这是一个Ajax请求。一般来说，后端并不关心GET请求来自哪里，只要能返回正确的响应即可。当您使用相同的网络应用编程接口返回Ajax或HTML时，这将非常有用。让我们看看如何通过本机JavaScript设置请求头：

var OReq=new XMLHttpRequest()；oReq.open('GET '，e.target.dataset.url，true)；oreq . setrequestheader(' X-Requested-With '，' XMLHttpRequest ')；oreq . send()；同时，我们在Node.js中做了一个测试：

if(req . headers[' x-requested-with ']==' XMLHttpRequest '){ RES . write head(200，{ ' Content-Type ' : ' application/JSON ' })；RES . end(JSON . stringify({ message : ' Hello World！'}));}如您所见，原生Ajax是一个灵活且现代化的前端API。你可以用请求头做很多事情，其中之一就是版本控制。例如，我想要一个支持多个版本的网络应用编程接口。但是我不想用URL。相反，我设置了请求头，以便客户端可以选择他们想要的版本。因此，我们可以如下设置请求头：

oreq . setrequestheader(' x-vanillaajaxwithquery-version '，' 1.0 ')；然后，在后端编写相应的代码：

如果(请求。标头[' x-requested-with ']=' xmlhttprequest ' req。headers[' x-vanillaajaxwithquery-version ']==' 1.0 '){//sendajaxresponse }我们可以使用Node.js提供的headers对象来执行相应的检测。唯一需要注意的是，它们是用小写字母阅读的。

响应类型您可能想知道为什么responseText返回一个字符串，而不是我们可以操作的普通JSON(普通旧JSON)。结果是我没有设置合适的responseType属性。Ajax属性将很好地告诉前端应用编程接口服务器期望返回什么样的数据。因此，我们应该好好利用它：

var OReq=new XMLHttpRequest()；oreq . onload=function(e){ results . innerhtml=e . target . response . message；};oReq.open('GET '，e.target.dataset.url，true)；oReq.responseType=' jsonoreq . send()；哇，这样我们就不用把返回的纯文本解析成JSON了，我们可以告诉API我们期望接收的数据类型。几乎所有最新的主流浏览器都支持这个功能。当然，jQuery会自动帮助我们转换到合适的类型。但是今天的原生JavaScript也有一种方便的方法来完成同样的事件。本机Ajax已经支持许多其他响应类型，例如XML。

不幸的是，直到IE11，开发团队还没有支持xhr.responseType='json '。虽然微软边缘目前支持这项功能。但是这个Bug已经养了快两年了。我坚信微软团队一直在努力改进浏览器。让我们期待微软Edge和aka斯巴达计划做出的承诺。当然，你可以解决这个IE问题：

oreq . on load=function(e){ var xhr=e . target；if(xhr . responsetype==' JSON '){ results . innerhtml=xhr . response . message；} else { results . innerhtml=JSON . parse(xhr . responsetext)。消息；}};避免缓存Ajax请求的浏览器功能几乎被我们遗忘了。比如IE默认是这样的。我也因此痛苦了好几个小时，导致我的Ajax无法执行。幸运的是，默认情况下，jQuery会清除浏览器缓存。当然，您可以在纯Ajax中实现这一点，而且非常简单：

var bustCache=“？”新日期()。getTime()；oReq.open('GET '，e.target.dataset.url bustCache，true)；查看jQuery文档，您可以知道jQuery将时间戳作为查询字符串附加到每个请求(GET)中。这使得请求在某种程度上是唯一的，并且避免了浏览器缓存。每当您触发一个HTTP Ajax请求时，您都可以看到类似如下的请求：

好的！这里没有戏剧性的事情发生。

希望大家喜欢这篇关于原生Ajax的文章。在过去，Ajax被认为是一个可怕的怪物。事实上，我们已经介绍了本机Ajax的所有基础知识。

最后，我给大家留下一个简洁的Ajax调用方式：

var OReq=new XMLHttpRequest()；oreq . onload=function(e){ results . innerhtml=e . target . response . message；};oReq.open('GET '，e.target.dataset.url '？'新日期()。getTime()，true)；oReq.responseType=' jsonoreq . send()；