搜索
首页web前端js教程没有jQuery的香草·阿贾克斯的指南

没有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);
这是控制台中的输出:

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

时,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!一切都没有戏剧。

结论

没有jQuery的香草·阿贾克斯的指南>希望您喜欢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上的常见问题(常见问题解答) 没有jQuery的香草·阿贾克斯的指南

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中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
JavaScript的起源:探索其实施语言JavaScript的起源:探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年,由布兰登·艾克创造,实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后:什么语言能力JavaScript?幕后:什么语言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来:趋势和预测Python和JavaScript的未来:趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

Python vs. JavaScript:开发环境和工具Python vs. JavaScript:开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),