没有jQuery的香草·阿贾克斯的指南

钥匙要点

ajax，用于异步JavaScript和XML的缩写，允许部分页面更新，减少了整页刷新的需求，并启用了更多流畅的用户体验。 AJAX请求的基本解剖结构涉及为HTTP请求创建所需类的实例，指定HTTP请求方法和页面的URL并发送请求。
• 虽然jQuery可以简化AJAX请求，但并非总是必要的。 Vanilla JavaScript中的Ajax API经历了重大改进，从标准角度来看，XMLHTTPreQuest规范现在被视为一个单一实体，表明社区承诺坚持一个标准。 Ajax是异步JavaScript和XML的简短，AJAX是一种进行部分页面更新的机制。它使您能够使用来自服务器的数据更新页面的部分，同时避免需要进行完整的刷新。以这种方式进行部分更新可以有效地创建流体用户体验，并且可以减少服务器上的负载。
这是基本Ajax请求的解剖学：

>在这里，我们正在创建所需类的实例，以向服务器提出HTTP请求。然后，我们调用其开放方法，将HTTP请求方法指定为第一个参数，以及我们要求的页面的URL。最后，我们将其发送方法称为NULL作为参数。如果在请求后（在这里我们使用的是GET），则此参数应包含我们要发送请求的任何数据。

>这就是我们处理服务器的响应的方式：

>

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

> onreadystatechange是异步的，这意味着它随时被调用。这些类型的功能是回调 - 一旦处理完成后，它就会被调用。在这种情况下，处理器正在服务器上进行。

>

对于那些希望更多地了解Ajax基础知识的人，MDN网络有一个很好的指南。

到jQuery还是不jQuery？

> 因此，好消息是上述代码将在所有最新的主要浏览器中起作用。坏消息是，它非常令人费解。好！我已经在寻找优雅的解决方案。

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

>

使用jQuery，可以将整个片段浓缩为：>

这很好。确实，对于包括您在内的许多人来说，JQuery在Ajax方面已成为事实上的标准。但是，你知道吗？不必是这样。存在jQuery来绕过丑陋的DOM API。但是，真的是

丑陋的吗？还是难以理解？

在本文的其余部分中，我想调查对Vanilla JavaScript中Ajax API的改进。可以在W3C上找到整个规范。令我惊讶的是这个规范。它不再是“ xmlhttprequest级别2”，而是“ xmlhttprequest级别1”，这是两个规格之间2011年合并的结果。展望未来，它将从标准的角度将其视为一个实体，而生活水平将被称为XMLHTTPREQUEST。这表明社区有承诺坚持一个标准，这对于想要摆脱jQuery的开发人员而言，这只会意味着好消息。

>

所以让我们开始吧……

>

>设置

在本文中，我在后端使用node.js。是的，浏览器和服务器上将有JavaScript。 Node.js后端很精美，我鼓励您在Github上下载整个演示并跟随。这是服务器上的肉和土豆：

>

这将检查请求URL，以确定应用程序应如何响应。如果请求来自脚本目录，则将适当的文件与应用程序/JavaScript的内容类型一起提供。否则，如果已将请求的X重新抽出标题设置为XMLHTTPRequest，那么我们知道我们正在处理AJAX请求，并且可以做出适当的响应。如果没有这样的情况，则提供文件视图/index.html。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

>我将在我们潜入服务器中的AJAX响应中，扩展评论的部分。在node.js中，我不得不对渲染和httphandler进行一些重弹性：

渲染函数异步读取所请求的文件的内容。它通过对HTTPhandler函数的引用，然后将其作为回调执行。 httphandler函数检查是否存在错误对象（例如，如果无法打开所请求的文件）。提供一切都很好，然后使用适当的HTTP状态代码和内容类型为文件的内容提供服务。

>

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

测试API

喜欢使用任何声音后端API，让我们编写一些单元测试以确保其有效。对于这些测试，我正在呼吁Supertest和Mocha寻求帮助：>

这些确保我们的应用程序以正确的内容类型和HTTP状态代码响应不同的请求。安装了依赖项后，您可以使用NPM测试从命令中运行这些测试。

接口

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

现在，让我们看一下我们在html中构建的用户界面：

html看起来不错又整洁。如您所见，所有兴奋都在JavaScript中发生。

> >如果您浏览任何规范的Ajax书，您可能会发现到处都有现有状态。此回调功能带有嵌套的IF和许多绒毛，这使得很难记住头顶。让我们将现有状态和on载事件直接放在头上。

>

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

这是控制台中的输出：

成功

时，Onload事件才会发射。因此，Onload事件是您可以在几秒钟内充分利用的现代API。现有的事件将有向后兼容。但是，Onload事件应该是您选择的工具。 Onload事件看起来像是JQuery上的成功回调，不是吗？ 是时候将5磅的哑铃放在一边，然后移动到手臂卷发了。

>设置请求标头

jQuery设置封面下的请求标头，因此您的后端技术知道这是AJAX请求。通常，后端不在乎get请求只要发送适当的响应即可到达何处。当您想使用相同的Web API支持Ajax和HTML时，这很方便。因此，让我们看一下如何在Vanilla Ajax中设置请求标题：>

>这样，我们可以在Node.js中进行检查：

如您所见，Vanilla Ajax是灵活而现代的前端API。您可以使用请求标题有很多想法，其中之一是版本化。因此，例如，假设我想支持此Web API的多个版本。这很有用，因为当我不想打破URL并提供一种机制，客户可以选择他们想要的版本。我们可以这样设置请求标头：

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

在后端，请尝试：

>

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

>我们在家中，没有汗水！您可能想知道，关于Ajax还有什么要知道的？好几个整洁的技巧。

>

响应类型

// app.js
var 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') {
    // Send Ajax response
  } else {
    render('views/index.html', 'text/html', httpHandler);
  }
});

>您可能想知道，当我与之合作时，为什么ResponseText包含服务器响应，这就是普通的旧json。事实证明，这是因为我没有设置适当的重新定型。此AJAX属性非常适合告诉前端API对服务器对期望的响应类型。因此，让我们充分利用它：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

很棒的，我可以告诉API的期望，而不必退回纯文本，而不得不将其解析为JSON。几乎所有最新的主要浏览器都可以使用此功能。当然，jQuery会自动进行这种类型的转换。但是，我们现在有一种方便的方式在普通的JavaScript中做同样的事情，这不是很棒吗？ Vanilla Ajax对许多其他响应类型都有支持，包括XML。 可悲的是，在Internet Explorer中，这个故事并不那么出色。截至IE 11，该团队尚未增加对Xhr.ResponseType ='json'的支持。此功能将到达Microsoft Edge。但是，截至撰写本文时，该错误已经近两年了。我的猜测是微软的人们一直在努力改造浏览器。希望我们希望Microsoft Edge（又名Spartan项目）能兑现其承诺。

a，如果您必须解决这个问题：

>

>缓存破坏

>人们倾向于忘记的一个浏览器功能是缓存AJAX请求的能力。例如，Internet Explorer默认情况下会这样做。我曾经挣扎着几个小时，试图弄清为什么我的Ajax因此因此而无法工作。幸运的是，JQuery默认情况下会破坏浏览器缓存。好吧，您也可以在普通的ajax中，这很简单：

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

>

根据jQuery文档，它所做的只是将时间戳查询字符串附加到请求的末尾。这使请求有些独特，并破坏了浏览器缓存。发射http ajax请求时，您可以看到这是什么样子：

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

tada！一切都没有戏剧。

结论

>希望您喜欢300磅的卧推香草·阿贾克斯（Vanilla Ajax）。一段时间以来，阿贾克斯是一个可怕的野兽，但不再是。实际上，我们涵盖了Ajax的所有基础知识，而没有拐杖，sha骨，jQuery。

我会以简洁的方式给您打电话：

>

这就是响应的样子：

别忘了，您可以在Github上找到整个演示。我欢迎您在评论中听到和没有jQuery的想法。

// app.js
var 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') {
    // Send Ajax response
  } else {
    render('views/index.html', 'text/html', httpHandler);
  }
});

>

在没有jQuery

的香草ajax上的常见问题（常见问题解答）

vanilla ajax是指使用本机JavaScript创建异步的Web应用程序，而无需依靠JQuery库。尽管JQuery Ajax提供了一种简化的跨浏览器兼容方法来处理Ajax，但Vanilla Ajax可以使您对基础过程有更多的控制和理解。如果您想减少诸如JQuery之类的外部库的依赖关系。

>，这也是一个不错的选择。

如何使用vanilla 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（）;
>

>我如何处理香草ajax中的错误？可以使用XMLHTTPREQUEST对象的OnError事件处理程序完成

var xhr = new xmlhttpRequest（）;

xhr.open（“ get”，'https：//api.example.com/data'，true） 。失败的“）;

};

xhr.send（）;
var xhr = new xmlhttprequest（）; xhr.open（“ post”，'https：//api.example.com/data'，true） .setRequestheader（“ content-type”， “ application/json”）;
xhr.send（json.stringify（{key：“ value”}））;

如何在Vanilla Javascript中取消AJAX请求？ >您可以通过调用xmlhttprequest对象的中止方法来取消AJAX请求。这将立即终止请求。

>我可以使用vanilla javascript？

>是的，但是不建议这样做，因为它可以阻止脚本的执行并使您的网页无反应互动，但不建议这样做。 。要提出同步请求，请将false作为第三个参数传递到打开的方法。

>

>如何监视AJAX请求的进度？

您可以使用AJAX请求的进度来监视AJAX请求的进度XMLHTTPREQUEST对象的OnProgress事件处理程序。此事件是多次触发的，提供了当前的进度信息。

>我可以与其他JavaScript库或框架一起使用Vanilla Ajax？ 。这是本机JavaScript功能，不依赖任何外部库。

>所有现代浏览器都支持

以上是没有jQuery的香草·阿贾克斯的指南的详细内容。更多信息请关注PHP中文网其他相关文章！