一起来学javascript-AJAX

最新推荐文章于 2024-09-16 08:47:17 发布

小胡想找到工作

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量846

点赞数 27

文章标签： javascript ajax okhttp

本文链接：https://blog.csdn.net/m0_74762754/article/details/139635095

版权

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 在学习AJAX之前，我们先了解几个概念：

// 1. 同步和异步：

// 在计算机科学中，同步和异步是两个概念，它们分别表示程序执行顺序和执行速度。

// 同步是指程序执行顺序是固定的，即程序执行顺序与代码的顺序一致。

// 异步是指程序执行顺序不是固定的，即程序执行顺序与代码的顺序不一致。

// 2.异步操作和同步操作

// 异步操作指的是在编程中，某个任务不会阻塞代码的继续执行，而是允许程序在等待该任务完成的同时继续处理其他任务。

// 这对于提高应用程序的响应性和性能至关重要，尤其是在涉及I/O操作（如文件读写、网络请求）的场景下，这些操作可能需要较长时间才能完成，如果同步执行会阻塞主线程。

// 在JavaScript中，异步操作尤为重要，因为JavaScript运行在浏览器环境中是单线程的，这意味着同一时间只能执行一个任务。为了不阻塞用户界面的更新和其他任务的执行，

// JavaScript采用了事件循环和回调函数、Promise、async/

// 同步操作是指程序按照代码书写的顺序依次执行，每条语句或指令必须等待前一条语句执行完毕后才能开始执行。在同步操作过程中，程序的执行是线性的，后面的代码必须等待前面的代码执行完成，

// 特别是对于那些需要等待资源（如文件、数据库或网络响应）的操作，会形成阻塞状态，直到所需资源准备就绪或操作完成。

//AJAX，全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种网页开发技术，允许在无需重新加载整个网页的情况下，通过JavaScript异步地从服务器获取数据并更新部分网页内容。

// 这一技术提高了用户体验，因为页面交互更加快速流畅。

// AJAX的核心是XMLHttpRequest对象，这个对象可以向服务器发送请求并接收响应，所有操作都可在不干扰用户界面的情况下后台进行。尽管名字中包含XML，但实际上AJAX可以传输任何形式的数据，包括JSON、HTML片段等，

// XML只是最初常用的数据格式之一。

// AJAX的工作流程通常包括以下几个步骤：

// 1.创建XMLHttpRequest对象。

// 在 AJAX 中，XMLHttpRequest 对象是用来与服务器进行数据交换的。其创建如下所示：

// var httpRequest = new XMLHttpRequest();

// 2.向服务器发送请求

// 在步骤一中我们已经创建了用于服务器交换数据的 XMLHttpRequest 对象，要向服务器发送请求，

// 我们需要调用该对象中的 open 和 send 方法。其使用如下：

// 规定发送请求的一些要求

// httpRequest.open("method", "url", async);

// // 将请求发送到服务器

// httpRequest.send();

// method 是请求的类型，常见的有 GET 和 POST。

// url 是请求的地址。

// async 是设置同步或者异步请求，其值为布尔类型，当为 true 时，使用异步请求；当为 false 时，使用同步请求，默认为 true。

// 使用XMLHttpRequest对象的open()方法初始化请求，设置请求类型（GET、POST等）、请求的URL及是否异步执行。

// 设置请求完成后的回调函数，通常是在onreadystatechange事件中，当readyState变为4（请求完成）且status为200（成功）时执行。

// 发送请求，通过send()方法，如果是POST请求还需提供请求体。

// 在回调函数中处理服务器返回的数据，更新DOM以改变网页的部分内容。

// 由于AJAX的重要性，现代的JavaScript库如jQuery、axios等都提供了更简洁的API来封装XMLHttpRequest的功能，让 AJAX 的使用变得更加简单。

document.addEventListener('DOMContentLoaded', function () {

// 'DOMContentLoaded'是一个事件名称，表示DOM内容加载完成的事件。

// 获取按钮和展示结果的元素

var btn = document.getElementById('fetchDataBtn');

var resultDiv = document.getElementById('result');

// 为按钮添加点击事件监听器

btn.addEventListener('click', function () {

// 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

// 配置发送请求的一些请求

xhr.open('GET', '/api/data', true); // 假设/api/data是你的数据接口

// 发送请求

xhr.send();

// 设置请求完成后的回调函数

xhr.onload = function () {

// xhr.onload 是一个 XMLHttpRequest (xhr) 对象的事件处理器属性

console.log(xhr.readyState);

console.log(xhr.status);

if (xhr.readyState == 4 && xhr.status == 300) {

// readyState 是 XMLHttpRequest (xhr) 对象中的一个属性，用于表示当前请求的状态。

// 它的取值有以下几种：

// 0 代表未初始化请求。

// 1 代表已与服务器建立连接。

// 2 代表请求被接受。

// 3 代表请求中。

// 4 代表请求完成。

// xhr.status 是 XMLHttpRequest (xhr) 对象的属性，用于获取HTTP响应的状态码。

// HTTP状态码是服务器对浏览器请求的响应状态的一种标准表示方式，用三位数字表示。

// 请求成功，处理响应数据

var data = JSON.parse(xhr.responseText);

// xhr.responseText：这是XMLHttpRequest对象的一个属性，用于获取服务器响应的文本内容。当你发送一个Ajax请求到服务器，服务器返回的数据（如果内容类型是text/plain或text/html时，这个属性会返回服务器返回的文本内容）

// JSON.parse() 方法用于解析 JSON 字符串，并将结果转换为 JavaScript 对象。

resultDiv.innerHTML = "接收到的数据: " + data.someProperty; // 假设data是一个对象，someProperty是其属性

// 在这里data.someProperty,表示获取这个属性的值

} else {

// 请求失败，显示错误信息

resultDiv.innerHTML = '请求失败，状态码：' + xhr.status;

}

};

// 设置请求错误的回调函数

xhr.onerror = function () {

resultDiv.innerHTML = '网络错误，请求未完成';

};

});

// AJAX的作用主要包括以下几点：

// 提升用户体验：通过异步数据交互，AJAX使得网页能够在不刷新整个页面的情况下动态更新部分内容，从而让用户感受到更快的响应速度和更流畅的浏览体验。

// 局部刷新：只更新需要变化的部分页面内容，而不是重新加载整个页面，这大大减少了网络流量的消耗和等待时间。

// 后台通信：在后台与服务器交换数据，用户可以在等待服务器响应的同时继续与网页的其他部分进行交互，提高了应用的交互性和响应性。

// 减少带宽占用：因为只传输需要的数据，而不是整个页面，所以能有效减少数据传输量，节省带宽资源。

// 增强网页功能：使得网页能够实现更复杂的交互功能，如实时搜索建议、动态加载更多内容、在线表单验证等，而无需用户手动刷新页面。

// 跨平台兼容：AJAX基于Web标准技术（如JavaScript、XML、HTML和CSS），因此在支持这些技术的浏览器上都能良好运行，增强了应用的可移植性和跨平台能力。

</script>

小胡想找到工作

关注

27
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫