面向小白编程:初识 Ajax

随着科技的迅速发展,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!"
}

这样我们打开网页控制台就能看到数据了:

接下来我们逐行解释一下每行代码分别干了什么:

  1. var xhr = new XMLHttpRequest();:创建一个名为 xhr 的新XMLHttpRequest对象。这个对象用于在浏览器和服务器之间进行HTTP通信。

  2. xhr.onreadystatechange = function() { ... };:设置一个回调函数,当xhr对象的状态发生变化时,这个函数将被触发。

  3. if (xhr.readyState == 4 && xhr.status == 200) { ... }:在回调函数内,检查xhr对象的readyState(就绪状态)和status(HTTP状态码)属性,以确定请求是否已经完成且成功。readyState4表示请求已完成,status200表示请求成功。

各状态可参照下表:

ajax状态码 状态
0 xhr刚刚创建,没有调用 open()
1 已经调用 open(),但尚未调用 send()
2 send() 方法已经被调用,接收到头响应头
3 接收到部分响应体数据
4 请求完成,接收到全部响应体数据
http状态码 类型 状态
1xx 信息 服务器收到请求,需要请求者继续执行操作
2xx 成功 操作被成功接收并处理
3xx 重定向 需要进一步的操作以完成请求
4xx 客户端错误 请求包含语法错误或无法完成请求
5xx 服务器错误 服务器在处理请求的过程中发生了错误
  1. console.log(xhr.responseText);:在控制台打印响应内容。

  2. xhr.open("GET", "text.json", true);:使用open方法初始化请求。第一个参数是HTTP请求的方法,第二个参数是要请求的URL,第三个参数表示请求是否异步(true表示异步,false表示同步)。

  3. 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);
    });

在控制台中查看数据:

解释一下:

  1. fetch("text.json"):使用fetch函数向指定的URL发起GET请求。fetch返回一个Promise,该Promise在HTTP响应可用时解析为Response对象。

  2. .then(response => response.json()):使用Promise的.then方法,该方法接fetch返回的Promise,即Response对象。通过response.json()Response对象解析为JSON格式,返回一个新的Promise。

  3. .then(data => { console.log(data); }):又使用了.then方法,接收response.json()返回的Promise,即解析后的JSON数据。然后在控制台中打印。

  4. .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);
    }
});

在控制台中查看数据:

解释一下:

  1. $.ajax({ ... });$是jQuery封装好了的语句,直接使用就行,可以参考官方文档。调用jQuery的ajax函数,该函数用于执行异步HTTP(Ajax)请求。

  2. url: "text.json",method: "GET",:指定请求的URL和请求方法"GET"。

  3. success: function(data) { ... },:这个回调用于处理请求成功的数据data

  4. error: function(error) { ... }:这个回调用于处理错误信息error

至此,利用第三方库 jQuery 实现 Ajax 请求已完成。

结语

通过本文的介绍,你现在应该对Ajax有了基本的了解,包括它的来源、发展以及原生 JS、Fetch API、以及第三方库三种实现的方式。如果对这些你还有疑惑可以参考官方文档,或者在评论区留言!

最后

学习之路是一段充满挑战和发现的旅程,加油!

已将学习代码上传至 github,欢迎大家学习指正!

技术小白记录学习过程,有错误或不解的地方还请评论区留言,如果这篇文章对你有所帮助请 "点赞 收藏+关注" ,感谢支持!!

相关推荐
黑客老陈36 分钟前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安41 分钟前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
暴富的Tdy1 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se1 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235611 小时前
web 渗透学习指南——初学者防入狱篇
前端
℘团子এ1 小时前
js和html中,将Excel文件渲染在页面上
javascript·html·excel
z千鑫1 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js
m0_748250742 小时前
Web入门常用标签、属性、属性值
前端