随着科技的迅速发展,Web开发领域正经历着前所未有的变革和创新。为了满足用户对更丰富、更动态在线体验的需求,Ajax技术成为开发中不可或缺的元素,学习和掌握这门技术,对开发者来说至关重要。
本文将带领小白了解 Ajax 的起源、发展,并介绍如何使用 JavaScript 进行 Ajax 开发。
一、什么是 Ajax
Ajax 的起源可以追溯到2005年,当时Web应用程序的开发方式主要是采用同步的模式。每当用户与网页进行交互时,整个页面都需要重新加载,这导致用户体验不佳,因为页面刷新需要时间,而且用户需要等待。
在这样的背景下,为了改善用户体验,开发者们开始寻找一种新的方式,使得网页能够在用户与服务器交互时,不必刷新整个页面,而只更新部分内容。这就催生了Ajax技术。
Ajax的名字在2005年提出,它代表"Asynchronous JavaScript and XML"(异步JavaScript和XML)。关键词中的"Asynchronous"表明Ajax的重要特性之一,即它可以在后台异步地与服务器通信,而不会阻塞用户对网页的操作。这使得Web应用程序能够更加迅速地响应用户的输入,提高了用户体验。
Ajax的真正突破在于它利用JavaScript发起异步HTTP请求,并使用XML作为数据的传输格式。这种异步通信的方式使得页面可以在后台与服务器交换数据,而不需要刷新整个页面。这为实现更加动态、实时的Web应用奠定了基础。
通过Ajax,开发者们可以在不中断用户操作的情况下,从服务器获取数据并将其展示在页面上。这种技术的引入改变了Web开发的传统方式,为现代Web应用的发展提供了强大的支持。随着时间的推移,Ajax逐渐成为前端开发的重要技术之一,为用户带来了更加流畅和响应式的Web体验。
举个栗子🌰:
我们在网页搜索时会实时提示,这其中就使用了Ajax技术。
二、Ajax的发展
1. 异步请求的崭露头角
Ajax的最初形态可以追溯到2005年。在这个时期,网页应用的主要交互方式是同步的,用户与服务器的交互通常需要整个页面的刷新。异步请求的概念首次被引入,使得页面可以在后台与服务器进行通信,无需中断用户的操作。这一变革使得Web应用变得更加动态,用户体验也得到了显著提升。
2. XMLHttpRequest的崛起
为了实现异步请求,JS引入了XMLHttpRequest
对象,这是Ajax的基石。通过XMLHttpRequest
,开发者可以在不刷新整个页面的情况下向服务器发送请求,并在请求完成后处理服务器返回的数据。这一技术的崛起为Web开发带来了巨大的改变,使得页面能够实现更细粒度的数据更新。
3. 数据交互的多样化
随着时间的推移,开发者们逐渐意识到,并非所有的数据交互都需要使用XML。因此,Ajax技术逐渐演变为支持多种数据格式,包括JSON等。这使得数据的交互更加灵活,同时也减少了数据传输的负担。
4. 框架和库的兴起
为了简化Ajax的使用,许多JS框架和库应运而生。其中,jQuery是最为知名的一个,它抽象了XMLHttpRequest
等底层操作,提供了更简单、更一致的API,使得开发者能够更轻松地使用Ajax技术。
5. 现代Web开发的全面崛起
随着前端技术的发展,Ajax逐渐融入到了现代Web开发的方方面面。前端框架(如React、Angular、Vue.js)的出现进一步简化了数据管理和交互,使得Ajax成为构建SPA(Single Page Application)等现代应用的关键组成部分。同时,新兴的Web API技术(如Fetch API)也为Ajax提供了更强大、更现代的替代方案。
6. 实时性和WebSocket的整合
随着对实时性需求的增加,Ajax技术与WebSocket等新兴技术的整合成为一个趋势。WebSocket能够提供更低延迟的双向通信,使得实时性要求更高的应用得以实现。
总体而言,Ajax的发展经历了从异步请求的初始阶段到如今成为现代Web开发不可或缺的技术的演变。它不仅改变了用户与网页交互的方式,也推动了整个Web开发行业向着更灵活、更动态的方向发展。随着新技术的不断涌现,我们可以期待Ajax在未来的Web开发中发挥更加重要的作用。
三、如何使用 Ajax
1. 原生 JS 实现 Ajax 请求
首先我们需要创建一个XMLHttpRequest对象:
js
var xhr = new XMLHttpRequest();
然后使用该对象发起HTTP请求:
js
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.open("GET", "text.json", true);
xhr.send();
这里我们在同级目录下创建一个text.json文件来模拟要请求的数据。
json
{
"data":"Ajax is so easy!"
}
这样我们打开网页控制台就能看到数据了:
接下来我们逐行解释一下每行代码分别干了什么:
-
var xhr = new XMLHttpRequest();
:创建一个名为xhr
的新XMLHttpRequest对象。这个对象用于在浏览器和服务器之间进行HTTP通信。 -
xhr.onreadystatechange = function() { ... };
:设置一个回调函数,当xhr
对象的状态发生变化时,这个函数将被触发。 -
if (xhr.readyState == 4 && xhr.status == 200) { ... }
:在回调函数内,检查xhr
对象的readyState
(就绪状态)和status
(HTTP状态码)属性,以确定请求是否已经完成且成功。readyState
为4
表示请求已完成,status
为200
表示请求成功。
各状态可参照下表:
ajax状态码 | 状态 |
---|---|
0 | xhr 刚刚创建,没有调用 open() |
1 | 已经调用 open() ,但尚未调用 send() |
2 | send() 方法已经被调用,接收到头响应头 |
3 | 接收到部分响应体数据 |
4 | 请求完成,接收到全部响应体数据 |
http状态码 | 类型 | 状态 |
---|---|---|
1xx | 信息 | 服务器收到请求,需要请求者继续执行操作 |
2xx | 成功 | 操作被成功接收并处理 |
3xx | 重定向 | 需要进一步的操作以完成请求 |
4xx | 客户端错误 | 请求包含语法错误或无法完成请求 |
5xx | 服务器错误 | 服务器在处理请求的过程中发生了错误 |
-
console.log(xhr.responseText);
:在控制台打印响应内容。 -
xhr.open("GET", "text.json", true);
:使用open
方法初始化请求。第一个参数是HTTP请求的方法,第二个参数是要请求的URL,第三个参数表示请求是否异步(true表示异步,false表示同步)。 -
xhr.send();
:发送HTTP请求。如果是GET请求,可以将参数设置为null
。如果是POST请求,可以在这里传递请求的数据。这一步实际上启动了整个HTTP请求过程,将请求发送到服务器。
至此,原生 JS 实现 Ajax 请求已完成。
2. 使用 Fetch API 实现
Fetch API是一种现代化的替代XMLHttpRequest的方法,它使用Promise对象提供更简洁的语法。
js
fetch("text.json")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
在控制台中查看数据:
解释一下:
-
fetch("text.json")
:使用fetch
函数向指定的URL发起GET请求。fetch
返回一个Promise,该Promise在HTTP响应可用时解析为Response
对象。 -
.then(response => response.json())
:使用Promise的.then
方法,该方法接fetch
返回的Promise,即Response
对象。通过response.json()
将Response
对象解析为JSON格式,返回一个新的Promise。 -
.then(data => { console.log(data); })
:又使用了.then
方法,接收response.json()
返回的Promise,即解析后的JSON数据。然后在控制台中打印。 -
.catch(error => { console.error(error); })
:使用.catch
方法,用于捕捉报错。
至此,使用 Fetch API 实现 Ajax 完成。
3. 利用第三方库
除了原生JavaScript和Fetch API,还可以使用第三方库简化Ajax的开发。例如,使用jQuery:
首先我们要导入jQuery库:
我们来到一个国内的 jQuery 镜像网站 jquery (v3.7.1) - jQuery,这个是我目前一直在用的,因为他是开源免费的,所以分享给大家,然后我们在下方直接选择复制script
标签,粘贴到我们的html
中。
html
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
需要注意的是:库的引入要写在请求代码的前面,因为我们只有先引入了才能使用。
直接使用 jQuery 已经封装好了的语句进行 Ajax 请求:
js
$.ajax({
url: "text.json",
method: "GET",
success: function(data) {
console.log(data);
},
error: function(error) {
console.error(error);
}
});
在控制台中查看数据:
解释一下:
-
$.ajax({ ... });
:$
是jQuery封装好了的语句,直接使用就行,可以参考官方文档。调用jQuery的ajax
函数,该函数用于执行异步HTTP(Ajax)请求。 -
url: "text.json",method: "GET",
:指定请求的URL和请求方法"GET"。 -
success: function(data) { ... },
:这个回调用于处理请求成功的数据data
。 -
error: function(error) { ... }
:这个回调用于处理错误信息error
。
至此,利用第三方库 jQuery 实现 Ajax 请求已完成。
结语
通过本文的介绍,你现在应该对Ajax有了基本的了解,包括它的来源、发展以及原生 JS、Fetch API、以及第三方库三种实现的方式。如果对这些你还有疑惑可以参考官方文档,或者在评论区留言!
最后
学习之路是一段充满挑战和发现的旅程,加油!
已将学习代码上传至 github,欢迎大家学习指正!
技术小白记录学习过程,有错误或不解的地方还请评论区留言,如果这篇文章对你有所帮助请 "点赞 收藏+关注" ,感谢支持!!