目录
1.5. axios:现代 Web 开发的首选 HTTP 客户端
3. 简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法
一直以来都是做C++后端开发的,最近项目二次开发使用C#,涉及到前端开发。前后端数据交互不可避免,不会就学,本文从前后通讯的演变及项目中使用的JQuery技术两个方面,抛砖引玉,算是踏入前端开发入门的第一步。
1.前端与后端通讯的演变
参考文档:
https://baijiahao.baidu.com/s?id=1807105908813829340&wfr=spider&for=pc
随着 Web 技术的发展,前端与后端之间的通讯方式经历了多个阶段的演变。
1.1 初期阶段:表单提交与页面刷新
在早期的 Web 开发中,前端与后端的通讯主要依赖于 HTML 表单和页面刷新。当用户在浏览器中提交表单时,表单数据会通过 HTTP 请求发送到后端服务器,后端处理请求并返回一个新的 HTML 页面,浏览器会刷新并展示新的内容。
这种方法的缺点显而易见:每次通讯都需要刷新整个页面,用户体验较差,尤其是在网络条件较差的情况下。随着 Web 应用的复杂性增加,开发者们开始寻求一种更高效、更流畅的通讯方式。
1.2. AJAX 的兴起
AJAX(Asynchronous JavaScript and XML)技术的出现,标志着前端与后端通讯方式的重大转变。通过 AJAX,前端可以在不刷新整个页面的情况下,与后端进行异步通讯,动态更新页面内容。
1.2.1 什么是 AJAX?
AJAX 是一组技术的组合,包括:
-
XMLHttpRequest:用于在后台与服务器交换数据。
-
JavaScript:用于处理响应并更新网页内容。
-
XML 或 JSON:作为数据交换格式(现代应用中,JSON 更为流行)。
1.2.2 AJAX 的实现示例
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
AJAX 的使用显著提升了用户体验,使得网页可以部分更新,而无需刷新整个页面。然而,XMLHttpRequest
的使用有一定的复杂性和局限性,例如回调地狱、链式回调不友好等问题。
1.3. jQuery 的封装与简化
为了简化 AJAX 的使用,jQuery 库应运而生。jQuery 对 XMLHttpRequest
进行了封装,提供了更简单、更直观的 API,使得前端开发者能够更方便地与后端进行通讯。
1.3.1 jQuery 的 AJAX 示例
$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
success: function(data) {
console.log(data);
},
error: function(error) {
console.log('Error:', error);
}
});
jQuery 的流行进一步推动了 AJAX 的广泛使用,并成为 Web 开发的事实标准。然而,随着前端开发的复杂度进一步提升,开发者对更加现代化、模块化的 HTTP 客户端的需求也逐渐显现。
1.4. fetch
API:现代浏览器的原生解决方案
为了解决 XMLHttpRequest
的局限性,现代浏览器引入了 fetch
API,它是一个更强大、基于 Promise 的 HTTP 客户端,提供了更简单的 API 和更好的可扩展性。
1.4.1 fetch
API 的使用
fetch('https://api.example.c