搜索
首页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中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

构建您自己的Ajax Web应用程序构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

如何创建和发布自己的JavaScript库?如何创建和发布自己的JavaScript库?Mar 18, 2025 pm 03:12 PM

文章讨论了创建,发布和维护JavaScript库,专注于计划,开发,测试,文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能?如何在浏览器中优化JavaScript代码以进行性能?Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略,重点是减少执行时间并最大程度地减少对页面负载速度的影响。

如何使用浏览器开发人员工具有效调试JavaScript代码?如何使用浏览器开发人员工具有效调试JavaScript代码?Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试,专注于设置断点,使用控制台和分析性能。

如何构建简单的jQuery滑块如何构建简单的jQuery滑块Mar 11, 2025 am 12:19 AM

本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库,它基于jQuery构建,并提供许多配置选项来设置轮播。 如今,图片轮播已成为网站必备功能——一图胜千言! 决定使用图片轮播后,下一个问题是如何创建它。首先,您需要收集高质量、高分辨率的图片。 接下来,您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计,因此使用此库构建的轮播可以适应任何

jQuery矩阵效果jQuery矩阵效果Mar 10, 2025 am 12:52 AM

将矩阵电影特效带入你的网页!这是一个基于著名电影《黑客帝国》的酷炫jQuery插件。该插件模拟了电影中经典的绿色字符特效,只需选择一张图片,插件就会将其转换为充满数字字符的矩阵风格画面。快来试试吧,非常有趣! 工作原理 插件将图片加载到画布上,读取像素和颜色值: data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地读取图片的矩形区域,并利用jQuery计算每个区域的平均颜色。然后,使用

如何使用源地图调试缩小JavaScript代码?如何使用源地图调试缩小JavaScript代码?Mar 18, 2025 pm 03:17 PM

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图,设置断点以及使用Chrome DevTools和WebPack之类的工具。

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脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

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

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。